JQuery Toggle Button : The Official Microsoft ASP.NET Forums

Reply

JQuery Toggle Button

Nov 25, 2010 09:24 AM|LINK

I was looking for Toggle Button in JQuery. I have to make something like this A B C D E F G H .............. All alphabetic letters to be in button. Can somebody help for the same.

Reply

Re: JQuery Toggle Button

Nov 25, 2010 09:31 AM|LINK

http://api.jquery.com/toggle/

http://plugins.jquery.com/project/toggle-button

http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/

http://stackoverflow.com/questions/2466005/jquery-toggle-button-trigger

Rajneesh Verma's Blog
www.rajneeshverma.com
Keep Forums Clean || Use Alert Moderators.

Edited by Rajneesh Verma on Nov 25, 2010 09:32 AM

Reply

Re: JQuery Toggle Button

Nov 25, 2010 09:37 AM|LINK

Here is a quick and dirty sample.

If you need it as a plugin let me know and will rewrite it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        $(function () {
            $('#mybtn').val(chars[0])
                       .attr('idx', '0')
                       .click(function () {
                           var index = parseInt($(this).attr('idx')) + 1;
                           if (index == chars.length) index = 0; //reset to zero
                           $(this).val(chars[index])
                                   .attr('idx', index);
                       });


        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" id="mybtn" />
    </div>
    </form>
</body>
</html>

Remeber to mark as answer

My .Net Blog
My Links are shrunk by t-ny.co

Edited by nvanhaaster@resultstel.com on Nov 25, 2010 09:38 AM
Edited by nvanhaaster@resultstel.com on Nov 25, 2010 09:39 AM

Reply

Re: JQuery Toggle Button

Nov 25, 2010 09:50 AM|LINK

nvanhaaster@resultstel.com

Here is a quick and dirty sample.

If you need it as a plugin let me know and will rewrite it.

<div class="dp-highlighter"><div class="bar"><div class="tools">view plaincopy to clipboardprint?</div></div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        $(function () {
            $('#mybtn').val(chars[0])
                       .attr('idx', '0')
                       .click(function () {
                           var index = parseInt($(this).attr('idx')) + 1;
                           if (index == chars.length) index = 0; //reset to zero
                           $(this).val(chars[index])
                                   .attr('idx', index);
                       });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" id="mybtn" />
    </div>
    </form>
</body>
</html>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        $(function () {
            $('#mybtn').val(chars[0])
                       .attr('idx', '0')
                       .click(function () {
                           var index = parseInt($(this).attr('idx')) + 1;
                           if (index == chars.length) index = 0; //reset to zero
                           $(this).val(chars[index])
                                   .attr('idx', index);
                       });


        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" id="mybtn" />
    </div>
    </form>
</body>
</html>

Thank you very much for quick reply but I will 26 Button like A to Z. not a single button. But in your example you have only 1 button and When I click on it it is toggling Some thing like this

Reply

Re: JQuery Toggle Button

Nov 25, 2010 10:14 AM|LINK

Sorry I misread that..

Below is a quick plugin i have come up with

Sample Image

This was just a quick example. Using jQuery UI 1.8 http://jqueryui.com/home

Its written into a plugin that you can seperate into a seperate js file if you like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="/css/black-tie/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
    <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="/js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        $(function () {
            $('#btnWrapper').iconstrip();


        });


//plugin start
;(function ($) {
    $.widget("ui.iconstrip", {
        chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
        _init: function()
        {
            

            var self = this;
            var initElem = self.element;


            initElem.addClass('ui-widget-content')
                    .addClass('ui-corner-all')
                    .html('');
            var aBtn = $('<input />')
                       .attr('type','button')
                       .button()
                       .val('All');
            initElem.append(aBtn);
            for(var i =0;i<chars.length;i++)
                initElem.append($('<input />')
                                .attr('type','button')
                                .button()
                                .val(chars[i]));
        }
        });
})(jQuery);
//plugin end
    </script>
    <style type="text/css">
        ul { list-style-type : none; margin:0 ; padding:0; }
        li { display:inline;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>


    <div id="btnWrapper" >
        

    </div>
    </div>
    </form>
</body>
</html>

Please let me know if this helps

Remeber to mark as answer

My .Net Blog
My Links are shrunk by t-ny.co

Reply

Re: JQuery Toggle Button

Nov 25, 2010 10:16 AM|LINK

Just to add in the lines 31 & 37 call the jQuery UI button plugin. Remove this and add your own classes via .addClass('className') to style differently

Remeber to mark as answer

My .Net Blog
My Links are shrunk by t-ny.co

Reply

Re: JQuery Toggle Button

Nov 25, 2010 10:35 AM|LINK

I don't know iconstrip is giving error. Kindly can what I am missing

Reply

Re: JQuery Toggle Button

Nov 25, 2010 11:18 AM|LINK

I am getting error $('#btnWrapper').iconstrip(); is not a function.

<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">$("#btnWrapper").iconstrip is not a function</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">Line </div>

Reply

nvanhaaster@...

Star

9209 Points

1484 Posts

Re: JQuery Toggle Button

Nov 25, 2010 08:45 PM|LINK

Can you post your page. Just the javascript and html porition would be great.

Remeber to mark as answer

My .Net Blog
My Links are shrunk by t-ny.co

Reply

milindsarasw...

Member

436 Points

545 Posts

Re: JQuery Toggle Button

Nov 25, 2010 09:24 PM|LINK

This is my HTML Part

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<link media="screen" rel="stylesheet" type="text/css" href="css/admin.css"  />
    <link href="css/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 6]><link media="screen" rel="stylesheet" type="text/css" href="css/admin-ie.css" /><![endif]-->
    <script type="text/javascript" src="js/JQuery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/JQuery/jquery-ui-1.8.6.custom.min.js"></script>
    <link href="css/facebox.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/JQuery/Facebox/facebox.js"></script>
    <script type="text/javascript" src="js/JQuery/Collaspe/behaviour.js"></script>
    <script type="text/javascript" src="js/JQuery/Collaspe/animatedcollapse.js"></script>
    <script type="text/javascript" src="js/JQuery/FormValidation/jquery.validate.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"  rel="stylesheet" type="text/css"/>


<script type="text/javascript">
  $(document).ready(function () {
    $("#form1").validate({
      rules:
          {
            ctl00$ContentPlaceHolder1$fvRequester$dpCompanyName:
            {
              SelectNone: true
            },
            ctl00$ContentPlaceHolder1$fvRequester$txRequesterName:
            {
              required: true
            },
            ctl00$ContentPlaceHolder1$fvRequester$txMobileNo:
            {
              number: true,
              minlength: 8
            },
            ctl00$ContentPlaceHolder1$fvRequester$txLandLine:
            {
              number: true,
              minlength: 8
            },
            ctl00$ContentPlaceHolder1$fvRequester$txExtention:
            {
              number: true
            },
            ctl00$ContentPlaceHolder1$fvRequester$txEmailID:
            {
              email: true
            }
          },
      messages:
         {
           ctl00$ContentPlaceHolder1$fvRequester$dpCompanyName:
          {
            SelectNone: "Select Company Name"
          },
           ctl00$ContentPlaceHolder1$fvRequester$txRequesterName:
          {
            required: "Provide Requester Name"
          },
           ctl00$ContentPlaceHolder1$fvRequester$txMobileNo:
            {
              number: "Only digits are allowed",
              minlength: jQuery.format("Minimum {0} digits are required")
            },
           ctl00$ContentPlaceHolder1$fvRequester$txLandLine:
            {
              number: "Only digits are allowed",
              minlength: jQuery.format("Minimum {0} digits are required")
            },
           ctl00$ContentPlaceHolder1$fvRequester$txExtention:
            {
              number: "Only digits are allowed"
            },
           ctl00$ContentPlaceHolder1$fvRequester$txEmailID:
            {
              email: "Provide email in valid format"
            }
         },
      success: function (label) {
        // set   as text for IE
        //label.html(" ").addClass("positive");
      },
      errorPlacement: function (error, element) {
        error.appendTo(element.parent().next());
      }
    });


    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $(function () {
      $('#btnWrapper').iconstrip();


    });


    //plugin start
    ; (function ($) {
      $.widget("ui.iconstrip", {
        chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
        _init: function () {


          var self = this;
          var initElem = self.element;


          initElem.addClass('ui-widget-content')
                    .addClass('ui-corner-all')
                    .html('');
          var aBtn = $('<input />')
                       .attr('type', 'button')
                       .button()
                       .val('All');
          initElem.append(aBtn);
          for (var i = 0; i < chars.length; i++)
            initElem.append($('<input />')
                                .attr('type', 'button')
                                .button()
                                .val(chars[i]));
        }
      });
    })(jQuery);
    //plugin end


    $("#ContentPlaceHolder1_fvRequester_btnDelete").bind("click", function () {
      var answer = confirm("Are sure you want delete current requester !!");
      return answer;
    });
  });


  jQuery.validator.addMethod('SelectNone', function (value, element) {
    if (element.value == "0") {
      return false;
    }
    else return true;
  }, '');
    </script>
</head>
<body>
<div style="width:100%;padding:5px 0 5px 5px;" id="btnWrapper">
 

</div>
</body>
</html>

JQuery Toggle Button RSS

25 replies

milindsarasw...

JQuery Toggle Button

Rajneesh Ver...

Re: JQuery Toggle Button

nvanhaaster@...

Re: JQuery Toggle Button

milindsarasw...

Re: JQuery Toggle Button

nvanhaaster@resultstel.com

nvanhaaster@...

Re: JQuery Toggle Button

nvanhaaster@...

Re: JQuery Toggle Button

milindsarasw...

Re: JQuery Toggle Button

milindsarasw...

Re: JQuery Toggle Button

nvanhaaster@...

Re: JQuery Toggle Button

milindsarasw...

Re: JQuery Toggle Button

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft