From 0d0ce0aa5a1de254a69e7ac0e285fb206300089d Mon Sep 17 00:00:00 2001 From: Doga Bendasan Date: Sat, 2 Mar 2013 03:17:46 +0000 Subject: [PATCH] Multi-Column sprites and MultiState toggle button Added the ability to work against a multiple column sprite Background image can now be derived from css,no need to assign in javascript or data. multi-state toggle button added --- examples.html | 66 +++++++++++++++---------- images/Multi-column-sprite.jpg | Bin 0 -> 12390 bytes js/jquery.screwdefaultbuttonsV2.js | 77 ++++++++++++++++++++++------- 3 files changed, 99 insertions(+), 44 deletions(-) create mode 100644 images/Multi-column-sprite.jpg diff --git a/examples.html b/examples.html index de4f7bb..ce9413f 100644 --- a/examples.html +++ b/examples.html @@ -7,31 +7,6 @@ - - - - - - - + + + + + + + +

ScrewDefaultButtons - Examples

@@ -192,7 +201,12 @@

Data Attribute for different image

- +
+

Multi state button with data-attribute

+ + + +
diff --git a/images/Multi-column-sprite.jpg b/images/Multi-column-sprite.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9c0e9f4a82dabbbf3c4bbde7dc927ac0551b9335 GIT binary patch literal 12390 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 literal 0 HcmV?d00001 diff --git a/js/jquery.screwdefaultbuttonsV2.js b/js/jquery.screwdefaultbuttonsV2.js index 6f73a4e..09a9aca 100644 --- a/js/jquery.screwdefaultbuttonsV2.js +++ b/js/jquery.screwdefaultbuttonsV2.js @@ -17,16 +17,24 @@ var defaults = $.extend( { image: null, width: 50, - height: 50, + height: 50, + col:1, disabled: false }, options); return this.each(function(){ + var leftPos = -1 * (defaults.col - 1) * defaults.width; + var uncheckedPos = 0; + var checkedPos = -(defaults.height); + var $this = $(this); - var $thisImage = defaults.image; - var dataImage = $this.data('sdb-image'); + var $thisImage = $this.css('background-image'); + if (defaults.image) { + $thisImage = defaults.image; + } + var dataImage = $this.data('sdb-image'); if (dataImage){ $thisImage = dataImage; } @@ -44,15 +52,13 @@ $thisParent.addClass(buttonClass); $thisParent.attr('onclick',buttonClick ); - $thisParent.css({ - 'background-image': $thisImage, - width: defaults.width, - height: defaults.height, - cursor: 'pointer' - }); + $thisParent.css({ + 'background-image': $thisImage, + width: defaults.width, + height: defaults.height, + cursor: 'pointer' + }).css({ backgroundPosition: leftPos + 'px 0' }); - var uncheckedPos = 0; - var checkedPos = -(defaults.height); if ($this.is(':disabled')){ uncheckedPos = -(defaults.height * 2); checkedPos = -(defaults.height * 3); @@ -75,12 +81,12 @@ $this.on('resetBackground', function(){ if ($this.is(':checked')){ $thisParent.css({ - backgroundPosition: '0 ' + checkedPos + "px" + backgroundPosition: leftPos + 'px ' + checkedPos + "px" }); } else { $thisParent.css({ - backgroundPosition: '0 ' + uncheckedPos + "px" + backgroundPosition: leftPos + 'px ' + uncheckedPos + "px" }); } }); @@ -101,13 +107,13 @@ if ($this.prop('checked')){ $this.prop("checked", false); $thisParent.css({ - backgroundPosition: '0 ' + uncheckedPos + "px" + backgroundPosition: leftPos + 'px ' + uncheckedPos + "px" }); } else { $this.prop("checked", true); $thisParent.css({ - backgroundPosition: '0 ' + checkedPos + "px" + backgroundPosition: leftPos + 'px ' + checkedPos + "px" }); } }); @@ -130,13 +136,13 @@ if ($this.prop('checked')){ $this.prop("checked", false); $thisParent.css({ - backgroundPosition: '0 ' + uncheckedPos + "px" + backgroundPosition: leftPos + 'px ' + uncheckedPos + "px" }); } else { $this.prop("checked", true); $thisParent.css({ - backgroundPosition: '0 ' + checkedPos + "px" + backgroundPosition: leftPos + 'px ' + checkedPos + "px" }); var otherRadioBtns = $('input[name="'+ $thisName +'"]').not($this); @@ -146,7 +152,7 @@ $this.on('radioSwitch', function(){ $thisParent.css({ - backgroundPosition: '0 ' + uncheckedPos + "px" + backgroundPosition: leftPos + 'px ' + uncheckedPos + "px" }); }); @@ -156,6 +162,41 @@ $thisLabel.on('click', function(){ $thisParent.trigger('click'); }); + } else if ($this.is(':button')) { + var states = $this.data("states").split(';'); + var curState = jQuery.inArray($this.val(), states); + if (curState < 0) { + curState = 0; + $this.val(states[curState]); + } + var curPosition = -1 * curState * defaults.height; + $thisParent.css({ + backgroundPosition: leftPos + 'px ' + curPosition + "px" + }); + + $thisParent.addClass('styledButton'); + + $thisParent.on('click', function () { + if (!($this.is(':disabled'))) { + $this.change(); + } + }); + + + $this.on('change', function () { + + curState++;// = curState++ % states.length; + curState = curState % states.length; + $this.val(states[curState]); + + curPosition = -1 * curState * defaults.height; + $thisParent.css({ + backgroundPosition: leftPos + 'px ' + curPosition + "px" + }); + + + }); + } if(!$.support.leadingWhitespace){