JQuery Toggle Button : The Official Microsoft ASP.NET Forums

Reply

nvanhaaster@...

Star

9209 Points

Re: JQuery Toggle Button

Nov 25, 2010 09:41 PM|LINK

<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">Ok I can see the issue.</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">The plugin is inside the load function. Make sure the plugin declaration is outiside of your function. Best thing to do is copy the entire plugin from the load method and create its own</div>

Ok I can see the issue.

The plugin is inside the load function. Make sure the plugin declaration is outiside of your function. Best thing to do is copy the entire plugin from the load method and create its own <script></script> block. Or even better yet add it to its own script file all together.

I also found an issue with the widget in two spots need to change the reference for chars.. it should read this.chars and this.chars[i]

Sample

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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();


        });


        



        $("#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>
    <script type="text/javascript">
        //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 < this.chars.length; i++)
                        initElem.append($('<input />')
                                .attr('type', 'button')
                                .button()
                                .val(this.chars[i]));
                }
            });
        })(jQuery);
        //plugin end
    

    </script>
</head>
<body>
<div style="width:100%;padding:5px 0 5px 5px;" id="btnWrapper">
 

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

Remeber to mark as answer

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

Edited by milindsaraswala on Nov 25, 2010 09:52 PM
Edited by milindsaraswala on Nov 28, 2010 04:17 AM

Reply

milindsarasw...

Member

436 Points

545 Posts

Re: JQuery Toggle Button

Nov 25, 2010 09:54 PM|LINK

Thanks it work out but in default it select All or if I select any thing else other should not.

And we can do same thing with JQuery buttonset()

Edited by milindsaraswala on Nov 25, 2010 09:55 PM
Edited by milindsaraswala on Nov 28, 2010 04:17 AM

Reply

nvanhaaster@...

Star

9209 Points

1484 Posts

Re: JQuery Toggle Button

Nov 25, 2010 10:47 PM|LINK

Sorry I dont really understand what you mean by that?

Can you clarify the requirment and I can possibly help out.

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 26, 2010 03:45 AM|LINK

Buttons are coming okay. But I need like toggle that means it should be like radio button which means any one button is selected always. And By default when page load All button should be selected and When I another button selected than another should be selected. Try this you will understand.

<!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">
<script type="text/javascript">
 $("#btnWrapper").buttonset();
</script>
</head>
<Body>
<div id="btnWrapper">
<input type="radio" checked="checked" />All
<input type="radio" />A
<input type="radio"/>B
</div>
</Body>
</html>

Reply

nvanhaaster@...

Star

9209 Points

1484 Posts

Re: JQuery Toggle Button

Nov 26, 2010 04:13 AM|LINK

Ok Makes sense, this gives you the appearance that it is infact toggleing. You will notice i addded a method called _handleClick aswell and using the enable, disable and refresh buttons of the jquery UI framework (also remove the hover class)

<!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/ui-lightness/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.6.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')
                       .addClass('ui-icon-strip-button')
                       .button().button('disable')
                       .click(function(){
                                    self._handleClick($(this));
                                })
                       .val('All');
                    self._handleClick(aBtn);
                    initElem.append(aBtn);
                    for (var i = 0; i < chars.length; i++)
                        initElem.append($('<input />')
                                .attr('type', 'button')
                                .addClass('ui-icon-strip-button')
                                .button()
                                .click(function(){
                                    self._handleClick($(this));
                                })
                                .val(chars[i]));
                },
                _handleClick:function(elem){
                    $('.ui-icon-strip-button').button('enable').button('refresh').removeClass('ui-state-hover');
                    $(elem).button('disable')
                    var text = $(elem).val();
                    var cVal = -1;
                    for(var i =0;i<this.chars.length;i++)
                        if(this.chars[i] == text)
                            cVal = i;
                    //set the text note -1 indicates all selected
                    $('#sel_btn').val('Selection : ' + $(elem).val() + ' Index ' + cVal);
                }
            });
        })(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>
    <input type="text" id="sel_btn" />
    </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 26, 2010 04:16 AM

Reply

nvanhaaster@...

Star

9209 Points

1484 Posts

Re: JQuery Toggle Button

Nov 26, 2010 07:02 AM|LINK

Did this work for you?

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 26, 2010 07:12 AM|LINK

It works but Look of pressed Button as good as JQuery buttonset(). It really looks like toggle button. But your's logic and code is really nice. We are not getting that of toggle in your widget. If we get that feel widget then it will be very nice.

Reply

milindsarasw...

Member

436 Points

545 Posts

Re: JQuery Toggle Button

Nov 26, 2010 08:27 AM|LINK

It works but Look of pressed Button is not as good as JQuery buttonset(). It really looks good and your's logic and code is really nice. But we are not getting that feel of toggle in your widget. If we get that feel in your widget then it will be very nice.

</div>

Reply

nvanhaaster@...

Star

9209 Points

1484 Posts

Re: JQuery Toggle Button

Nov 28, 2010 04:04 AM|LINK

Sorry for the late reply as the weekend keeps me away from the laptop.

But i see what you are looking at, and I have used the buttonset() plugin and redefined the sample...

View the sample below.

<!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>
    <title></title>
    <link href="../css/ui-lightness/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.6.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        $(function () {
            $('#btnSet').buttonstrip();
        });


        ; (function ($) {
            $.widget("ui.buttonstrip", {
                chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
                _init: function () {
                    

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


                    var aBtn = $('<input />')
                               .attr('type','radio')
                               .attr('id',initElem.attr('id') + '_Radio_all')
                               .attr('name',initElem.attr('id') + '_btnList')
                               .val('-1');


                    initElem.append(aBtn);
                    initElem.append(self._createLabel(aBtn,'All'));
                    

                    for (var i = 0; i < chars.length; i++)
                    {
                        var input = $('<input />')
                                    .attr('type','radio')
                                    .attr('id',initElem.attr('id') + '_Radio' + i)
                                    .attr('name',initElem.attr('id') + '_btnList')
                                    .val(i);
                        initElem.append(input);
                        initElem.append(self._createLabel(input,this.chars[i]));
                    }
                    initElem.buttonset();
                },
                _createLabel: function(forElem,text)
                {
                    return $('<label />')
                            .text(text)
                            .attr('for',$(forElem).attr('id'));
                }


         });
        })(jQuery);
    </script>
</head>
<body>
    <div id="btnSet"></div>
</body>
</html>

Remeber to mark as answer

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

Marked as answer by milindsaraswala on Nov 28, 2010 04:18 AM

Reply

milindsarasw...

Member

436 Points

545 Posts

Re: JQuery Toggle Button

Nov 28, 2010 04:21 AM|LINK

This I can say a perfect toggle button. Just last question how can I bind click even on it.

JQuery Toggle Button RSS

25 replies

nvanhaaster@...

Re: JQuery Toggle Button

milindsarasw...

Re: JQuery Toggle Button

nvanhaaster@...

Re: JQuery Toggle Button

milindsarasw...

Re: JQuery Toggle Button

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