Your Widget become very good and fully usable, Thanks very much for it. But I did some changes I am sending you to check if you okay or for it working good.
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
$(function () {
$('#btnSet').buttonstrip({ onItemSelected: function (event, ui) {
window.location.href = '?s=' + ui.attr('xchar');
$('#clickResult').val('The item selected is: ' + ui.val() + ' Letter: ' + ui.attr('xchar'));
}
});
});
; (function ($) {
$.widget("ui.buttonstrip", {
chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
options: {
onItemSelected: null //
},
_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')
.click(function (event) { self._handleClick(event, $(this)) })
.attr('checked','checked')
.attr('xchar', '')
.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')
.click(function (event) { self._handleClick(event, $(this)) })
.attr('xchar', this.chars[i])
.val(i);
initElem.append(input);
initElem.append(self._createLabel(input, this.chars[i]));
initElem.append(self._btnChecked(input,this.chars[i]));
}
initElem.buttonset();
},
_createLabel: function (forElem, text) {
return $('<label />')
.text(text)
.attr('for', $(forElem).attr('id'));
},
_handleClick: function (event, ui) {
var self = this;
if ($.isFunction(self.options.onItemSelected)) {
try {
self.options.onItemSelected(event, ui);
} catch (e) {
//error handle
}
}
},
_btnChecked: function(forElem,text){
if(getParameterByName("s")==text){
forElem.attr("checked","checked");
}
}
});
function getParameterByName( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
})(jQuery);
Looks great, however one thing you may want to do and this is entirely in your own preference is to actually take your
getParameterByName function outside your widget as it could be reusable in places outside of the widget on other pages.
Also the method <element>.append(...) should only be used when adding elements to the page and not calling a function.
The _btnChecked method can be called by
self._btnChecked(..,..) out side of the append call.
I incorporated your logic into another version that actually has another option called
selectedItem this option allows you to do one of two things, pass in the selected item by value (ie A,B,C,D etc) or by its numerical value of (1,2,3,4,6) etc. Remebering that -1 is reserved for
the All item.
Additionally I added the true toggle that if nothing is passed in the query string then All is selected. If this is not required simply comment out the line 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">
$(function () {
$('#btnSet').buttonstrip({
onItemSelected: function (event, ui) {
window.location.href = '?s=' + ui.attr('xchar');
//$('#clickResult').val('The item selected is: ' + ui.val() + ' Letter: ' + ui.attr('xchar')); not nessesary as the above line redirects the page
},
selectedItem: getParameterByName('s')
});
});
; (function ($) {
$.widget("ui.buttonstrip", {
chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
options: {
onItemSelected : null,
selectedItem : null
},
_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')
.click(function(event) { self._handleClick(event, $(this))})
.attr('xchar','All')
.val('-1');
initElem.append(aBtn);
initElem.append(self._createLabel(aBtn,'All'));
for (var i = 0; i < self.chars.length; i++)
{
var input = $('<input />')
.attr('type','radio')
.attr('id',initElem.attr('id') + '_Radio' + i)
.attr('name',initElem.attr('id') + '_btnList')
.click(function(event) { self._handleClick(event, $(this))})
.attr('xchar',self.chars[i])
.val(i);
initElem.append(input);
initElem.append(self._createLabel(input,self.chars[i]));
}
if(self.options.selectedItem == null)
self.options.selectedItem = -1;
self._setSelected();
initElem.buttonset();
},
_createLabel: function(forElem,text)
{
return $('<label />')
.text(text)
.attr('for',$(forElem).attr('id'));
},
_handleClick:function(event, ui){
var self = this;
if($.isFunction(self.options.onItemSelected))
{
try{
self.options.onItemSelected(event, ui);
}catch(e){
//error handle
}
}
},
_setSelected: function()
{
//item is the index not the character
if(!isNaN(parseInt(this.options.selectedItem)))
{
var v = parseInt(this.options.selectedItem);
this.element.find('input[type=radio]').each(function() {
if(parseInt($(this).val()) == v) {
$(this).attr('checked','checked');
return;
}
});
}
else //passed by text
{
var v = this.options.selectedItem.toLowerCase();
this.element.find('input[type=radio]').each(function() {
if($(this).attr('xchar').toLowerCase() == v)
{
$(this).attr('checked','checked');
return;
}
});
}
}
});
})(jQuery);
function getParameterByName( name )
{
namename = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>
</head>
<body>
<div id="btnSet"></div>
<input type="text" id="clickResult" />
</body>
</html>
Hey you are fantastic. And appreciable that you gave your time to solve my problem. By looking this we can reuse this in many places in many manner. Hats off to you. I tested it and it is working great in IE, Firefox and Chrome.
From this I feel that I should also learn JQuery. I will ask you out of the topic question. What is the best way to learn JQuery may be you can suggest me some website or some good books for it.
To be honest the best way to learn how to use jQuery is to just look through their tutorials and examples on jQuery.com and jQueryUI.com thats how most people picked up the framework. Personally thats how I did it.
Once you understand the fundementals next would be review the jQuery Plugin development guide that will help you understand how and when to use functions, options, paramenters etc.
I have also published my first plugin for select boxes.. check out my tag line if you have some time one day..
milindsarasw...
Member
436 Points
545 Posts
Re: JQuery Toggle Button
Nov 28, 2010 04:42 PM|LINK
I add following line in JQuery Code
.attr('onclick', "window.location='requester.aspx?s="+this.chars[i]+"'")it is working in FireFox but not working in the IE what can be the reason for it.
nvanhaaster@...
Star
9209 Points
1484 Posts
Re: JQuery Toggle Button
Nov 28, 2010 08:44 PM|LINK
The main issue is that in IE it expects
<!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({ onItemSelected: function (event, ui) { window.location.href = '#' + ui.attr('xchar'); $('#clickResult').val('The item selected is: ' + ui.val() + ' Letter: ' + ui.attr('xchar')); } }); }); ; (function ($) { $.widget("ui.buttonstrip", { chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', options: { onItemSelected : null // }, _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') .click(function(event) { self._handleClick(event, $(this))}) .attr('xchar','All') .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') .click(function(event) { self._handleClick(event, $(this))}) .attr('xchar',this.chars[i]) .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')); }, _handleClick:function(event, ui){ var self = this; if($.isFunction(self.options.onItemSelected)) { try{ self.options.onItemSelected(event, ui); }catch(e){ //error handle } } } }); })(jQuery); </script> </head> <body> <div id="btnSet"></div> <input type="text" id="clickResult" /> </body> </html>Hope this helps
My .Net Blog
My Links are shrunk by t-ny.co
milindsarasw...
Member
436 Points
545 Posts
Re: JQuery Toggle Button
Nov 29, 2010 03:02 AM|LINK
Hi,
Your Widget become very good and fully usable, Thanks very much for it. But I did some changes I am sending you to check if you okay or for it working good.
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; $(function () { $('#btnSet').buttonstrip({ onItemSelected: function (event, ui) { window.location.href = '?s=' + ui.attr('xchar'); $('#clickResult').val('The item selected is: ' + ui.val() + ' Letter: ' + ui.attr('xchar')); } }); }); ; (function ($) { $.widget("ui.buttonstrip", { chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', options: { onItemSelected: null // }, _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') .click(function (event) { self._handleClick(event, $(this)) }) .attr('checked','checked') .attr('xchar', '') .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') .click(function (event) { self._handleClick(event, $(this)) }) .attr('xchar', this.chars[i]) .val(i); initElem.append(input); initElem.append(self._createLabel(input, this.chars[i])); initElem.append(self._btnChecked(input,this.chars[i])); } initElem.buttonset(); }, _createLabel: function (forElem, text) { return $('<label />') .text(text) .attr('for', $(forElem).attr('id')); }, _handleClick: function (event, ui) { var self = this; if ($.isFunction(self.options.onItemSelected)) { try { self.options.onItemSelected(event, ui); } catch (e) { //error handle } } }, _btnChecked: function(forElem,text){ if(getParameterByName("s")==text){ forElem.attr("checked","checked"); } } }); function getParameterByName( name ) { name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regexS = "[\\?&]"+name+"=([^&#]*)"; var regex = new RegExp( regexS ); var results = regex.exec( window.location.href ); if( results == null ) return ""; else return decodeURIComponent(results[1].replace(/\+/g, " ")); } })(jQuery);nvanhaaster@...
Star
9209 Points
1484 Posts
Re: JQuery Toggle Button
Nov 29, 2010 03:36 AM|LINK
Looks great, however one thing you may want to do and this is entirely in your own preference is to actually take your getParameterByName function outside your widget as it could be reusable in places outside of the widget on other pages.
Also the method <element>.append(...) should only be used when adding elements to the page and not calling a function.
The _btnChecked method can be called by self._btnChecked(..,..) out side of the append call.
I incorporated your logic into another version that actually has another option called selectedItem this option allows you to do one of two things, pass in the selected item by value (ie A,B,C,D etc) or by its numerical value of (1,2,3,4,6) etc. Remebering that -1 is reserved for the All item.
Additionally I added the true toggle that if nothing is passed in the query string then All is selected. If this is not required simply comment out the line 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"> $(function () { $('#btnSet').buttonstrip({ onItemSelected: function (event, ui) { window.location.href = '?s=' + ui.attr('xchar'); //$('#clickResult').val('The item selected is: ' + ui.val() + ' Letter: ' + ui.attr('xchar')); not nessesary as the above line redirects the page }, selectedItem: getParameterByName('s') }); }); ; (function ($) { $.widget("ui.buttonstrip", { chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', options: { onItemSelected : null, selectedItem : null }, _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') .click(function(event) { self._handleClick(event, $(this))}) .attr('xchar','All') .val('-1'); initElem.append(aBtn); initElem.append(self._createLabel(aBtn,'All')); for (var i = 0; i < self.chars.length; i++) { var input = $('<input />') .attr('type','radio') .attr('id',initElem.attr('id') + '_Radio' + i) .attr('name',initElem.attr('id') + '_btnList') .click(function(event) { self._handleClick(event, $(this))}) .attr('xchar',self.chars[i]) .val(i); initElem.append(input); initElem.append(self._createLabel(input,self.chars[i])); } if(self.options.selectedItem == null) self.options.selectedItem = -1; self._setSelected(); initElem.buttonset(); }, _createLabel: function(forElem,text) { return $('<label />') .text(text) .attr('for',$(forElem).attr('id')); }, _handleClick:function(event, ui){ var self = this; if($.isFunction(self.options.onItemSelected)) { try{ self.options.onItemSelected(event, ui); }catch(e){ //error handle } } }, _setSelected: function() { //item is the index not the character if(!isNaN(parseInt(this.options.selectedItem))) { var v = parseInt(this.options.selectedItem); this.element.find('input[type=radio]').each(function() { if(parseInt($(this).val()) == v) { $(this).attr('checked','checked'); return; } }); } else //passed by text { var v = this.options.selectedItem.toLowerCase(); this.element.find('input[type=radio]').each(function() { if($(this).attr('xchar').toLowerCase() == v) { $(this).attr('checked','checked'); return; } }); } } }); })(jQuery); function getParameterByName( name ) { namename = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regexS = "[\\?&]"+name+"=([^&#]*)"; var regex = new RegExp( regexS ); var results = regex.exec( window.location.href ); if( results == null ) return ""; else return decodeURIComponent(results[1].replace(/\+/g, " ")); } </script> </head> <body> <div id="btnSet"></div> <input type="text" id="clickResult" /> </body> </html>My .Net Blog
My Links are shrunk by t-ny.co
milindsarasw...
Member
436 Points
545 Posts
Re: JQuery Toggle Button
Nov 29, 2010 05:35 AM|LINK
Hey you are fantastic. And appreciable that you gave your time to solve my problem. By looking this we can reuse this in many places in many manner. Hats off to you. I tested it and it is working great in IE, Firefox and Chrome.
From this I feel that I should also learn JQuery. I will ask you out of the topic question. What is the best way to learn JQuery may be you can suggest me some website or some good books for it.
Thank you very much for your kind support.
nvanhaaster@...
Star
9209 Points
1484 Posts
Re: JQuery Toggle Button
Nov 29, 2010 06:04 AM|LINK
To be honest the best way to learn how to use jQuery is to just look through their tutorials and examples on jQuery.com and jQueryUI.com thats how most people picked up the framework. Personally thats how I did it.
Once you understand the fundementals next would be review the jQuery Plugin development guide that will help you understand how and when to use functions, options, paramenters etc.
I have also published my first plugin for select boxes.. check out my tag line if you have some time one day..
My .Net Blog
My Links are shrunk by t-ny.co