Skip to content
Browse files

revised disabled attribute behaviour updated version number

  • Loading branch information...
1 parent 4398af6 commit fc3130e78347d8723248000bf823ec6b62d8cc0a @scottdarby committed Feb 22, 2012
Showing with 28 additions and 15 deletions.
  1. +14 −4 index.html
  2. +8 −7 jquery.stylish-select.js
  3. +2 −2 jquery.stylish-select.min.js
  4. +4 −2 stylish-select.css
View
18 index.html
@@ -2,19 +2,19 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
- <title>jQuery Stylish Select 0.4.6 plugin examples</title>
+ <title>jQuery Stylish Select 0.4.7 plugin examples</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="stylish-select.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
- <script src="jquery.stylish-select.js" type="text/javascript"></script>
+ <script src="jquery.stylish-select.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
- $('#my-dropdown, #my-dropdown2, #my-dropdown3, #my-dropdown4, #my-dropdown5, #my-dropdown6').sSelect();
+ $('#my-dropdown, #my-dropdown2, #my-dropdown3, #my-dropdown4, #my-dropdown5, #my-dropdown6, #my-dropdown7, #my-dropdown8').sSelect();
//set max height
$('#my-dropdownCountries').sSelect({ddMaxHeight: '300px'});
@@ -49,7 +49,7 @@
</head>
<body>
<form action="" method="post">
- <h1>Stylish Select 0.4.6</h1>
+ <h1>Stylish Select 0.4.7</h1>
<h2>A cross-browser, accessible alternative to the standard form element which can be fully customised with CSS</h2>
<p>Stylish Select attempts to replicate the functionality of the browser default select box as closely as possible with support for keyboard navigation, and intelligent positioning.</p>
<p>Stylish Select aims to have a minimal code footprint and weighs in at just over 3KB when minified.</p>
@@ -273,6 +273,16 @@
</optgroup>
</select>
</div>
+ <div class="selCont">
+ <h2>Disabled Attribute</h2>
+ <select disabled="disabled" id="my-dropdown7" name="my-dropdown">
+ <option value="1">Opiate</option>
+ <option value="2">Undertow</option>
+ <option value="3">Aenima</option>
+ <option value="4">Lateralus</option>
+ <option value="9">The Love Movement</option>
+ </select>
+ </div>
</form>
</body>
</html>
View
15 jquery.stylish-select.js
@@ -1,5 +1,5 @@
/**
-* Stylish Select 0.4.6 - jQuery plugin to replace a select drop down box with a stylable unordered list
+* Stylish Select 0.4.7 - jQuery plugin to replace a select drop down box with a stylable unordered list
* http://github.com/scottdarby/Stylish-Select
*
* Requires: jQuery 1.3 or newer
@@ -81,7 +81,7 @@
var opts = $.extend(defaults, options),
$input = $(this),
$containerDivText = $('<div class="selectedTxt"></div>'),
- $containerDiv = $('<div class="newListSelected ' + opts.containerClass + '"></div>'),
+ $containerDiv = $('<div class="newListSelected ' + opts.containerClass + ($input.is(':disabled') ? 'newListDisabled' : '')+ '"></div>'),
$containerDivWrapper = $('<div class="SSContainerDivWrapper" style="visibility:hidden;"></div>'),
$newUl = $('<ul class="newList"></ul>'),
itemIndex = -1,
@@ -103,6 +103,10 @@
$newUl.wrap($containerDivWrapper);
$containerDivWrapper = $newUl.parent();
$input.hide();
+
+ if($input.is(':disabled')){
+ return;
+ }
//added by Justin Beasley (used for lists initialized while hidden)
$containerDivText.data('ssReRender',!$containerDivText.is(':visible'));
@@ -119,9 +123,7 @@
opts.defaultText = option;
currentIndex = prevIndex = i;
}
- $newUl.append($('<li><a href="JavaScript:void(0);"'+($(this).is(':disabled') ? ' class="newListDisabled"' : '')+'>'+option+'</a></li>').data('key', key));
-
-
+ $newUl.append($('<li><a href="JavaScript:void(0);">'+option+'</a></li>').data('key', key));
});
//cache list items object
$newLi = $newUl.children().children().not('.newListDisabled');
@@ -146,8 +148,7 @@
opts.defaultText = option;
currentIndex = prevIndex = itemIndex;
}
- $optGroupList.append($('<li><a href="JavaScript:void(0);"'+($(this).is(':disabled') ? ' class="newListDisabled"' : '')+'>'+option+'</a></li>').data('key',key));
-
+ $optGroupList.append($('<li><a href="JavaScript:void(0);">'+option+'</a></li>').data('key',key));
})
});
//cache list items object
View
4 jquery.stylish-select.min.js
@@ -1,5 +1,5 @@
/**
-* Stylish Select 0.4.6 - jQuery plugin to replace a select drop down box with a stylable unordered list
+* Stylish Select 0.4.7 - jQuery plugin to replace a select drop down box with a stylable unordered list
* http://github.com/scottdarby/Stylish-Select
*
* Requires: jQuery 1.3 or newer
@@ -8,4 +8,4 @@
*
* Dual licensed under the MIT and GPL licenses.
*/
-(function(a){a("html").addClass("stylish-select");if(!Array.prototype.indexOf)Array.prototype.indexOf=function(a){if(this===void 0||this===null)throw new TypeError;var n=Object(this),j=n.length>>>0;if(j===0)return-1;var b=0;arguments.length>0&&(b=Number(arguments[1]),b!==b?b=0:b!==0&&b!==1/0&&b!==-(1/0)&&(b=(b>0||-1)*Math.floor(Math.abs(b))));if(b>=j)return-1;for(b=b>=0?b:Math.max(j-Math.abs(b),0);b<j;b++)if(b in n&&n[b]===a)return b;return-1};a.fn.extend({getSetSSValue:function(m){return m?(a(this).val(m).change(),this):a(this).find(":selected").val()},resetSS:function(){var m=a(this).data("ssOpts");$this=a(this);$this.next().remove();$this.unbind(".sSelect").sSelect(m)}});a.fn.sSelect=function(m){return this.each(function(){function n(){var h=d.offset().top,c=a(window).height(),b=a(window).scrollTop();k>parseInt(o.ddMaxHeight)&&(k=parseInt(o.ddMaxHeight));h-=b;h+k>=c?(f.css({height:k}),i.css({top:"-"+k+"px",height:k}),e.onTop=!0):(f.css({height:k}),i.css({top:s+"px",height:k}),e.onTop=!1)}function j(a,x){a==!0&&(p=c,e.change());x==!0&&(c=p,b(c));i.hide();d.css({position:"static"})}function b(a,c){if(a==-1)l.text(o.defaultText),g.removeClass("hiLite");else{g.removeClass("hiLite").eq(a).addClass("hiLite");var b=g.eq(a).text(),d=g.eq(a).parent().data("key");try{e.val(d)}catch(f){e[0].selectedIndex=a}l.text(b);c==!0&&(p=a,e.change());i.is(":visible")&&g.eq(a).focus()}}function t(h){a(h).unbind("keydown.sSelect").bind("keydown.sSelect",function(a){a=a.which;r=!0;switch(a){case 40:case 39:return c<u-1&&(++c,b(c)),!1;case 38:case 37:return c>0&&(--c,b(c)),!1;case 33:case 36:return c=0,b(c),!1;case 34:case 35:return c=u-1,b(c),!1;case 13:case 27:return j(!0),!1}keyPressed=String.fromCharCode(a).toLowerCase();if(typeof q.indexOf(keyPressed)!="undefined"){++c;c=q.indexOf(keyPressed,c);if(c==-1||c==null||v!=keyPressed)c=q.indexOf(keyPressed);b(c);v=keyPressed;return!1}})}var o=a.extend({defaultText:"Please select",animationSpeed:0,ddMaxHeight:"",containerClass:""},m),e=a(this),l=a('<div class="selectedTxt"></div>'),d=a('<div class="newListSelected '+o.containerClass+'"></div>'),i=a('<div class="SSContainerDivWrapper" style="visibility:hidden;"></div>'),f=a('<ul class="newList"></ul>'),w=-1,c=-1,p=-1,q=[],v=!1,r=!1,g;a(this).data("ssOpts",m);d.insertAfter(e);d.attr("tabindex",e.attr("tabindex")||"0");l.prependTo(d);f.appendTo(d);f.wrap(i);i=f.parent();e.hide();l.data("ssReRender",!l.is(":visible"));e.children("optgroup").length==0?(e.children().each(function(b){var d=a(this).text(),e=a(this).val();q.push(d.charAt(0).toLowerCase());if(a(this).attr("selected")=="selected"||a(this).attr("selected")==!0)o.defaultText=d,c=p=b;f.append(a('<li><a href="JavaScript:void(0);">'+d+"</a></li>").data("key",e))}),g=f.children().children()):(e.children("optgroup").each(function(){var b=a(this).attr("label"),b=a('<li class="newListOptionTitle">'+b+"</li>"),d=a("<ul></ul>");b.appendTo(f);d.appendTo(b);a(this).children().each(function(){++w;var b=a(this).text(),h=a(this).val();q.push(b.charAt(0).toLowerCase());if(a(this).attr("selected")=="selected"||a(this).attr("selected")==!0)o.defaultText=b,c=p=w;d.append(a('<li><a href="JavaScript:void(0);">'+b+"</a></li>").data("key",h))})}),g=f.find("ul li a"));var k=f.height(),s=d.height(),u=g.length;c!=-1?b(c):l.text(o.defaultText);n();a(window).bind("resize.sSelect scroll.sSelect",n);l.bind("click.sSelect",function(b){b.stopPropagation();a(this).data("ssReRender")&&(k=f.height("").height(),i.height(""),s=d.height(),a(this).data("ssReRender",!1),n());a(".SSContainerDivWrapper").not(a(this).next()).hide().parent().css("position","static").removeClass("newListSelFocus");i.toggle();d.css("position","relative");c==-1&&(c=0);g.eq(c).focus()});g.bind("click.sSelect",function(h){h=a(h.target);c=g.index(h);r=!0;b(c,!0);j()});g.bind("mouseenter.sSelect",function(b){a(b.target).addClass("newListHover")}).bind("mouseleave.sSelect",function(b){a(b.target).removeClass("newListHover")});e.bind("change.sSelect",function(d){d=a(d.target);if(r==!0)return r=!1;var e=d.find(":selected");c=d.find("option").index(e);b(c)});d.bind("click.sSelect",function(a){a.stopPropagation();t(this)});d.bind("focus.sSelect",function(){a(this).addClass("newListSelFocus");t(this)});d.bind("blur.sSelect",function(){a(this).removeClass("newListSelFocus")});a(document).bind("click.sSelect",function(){d.removeClass("newListSelFocus");i.is(":visible")?j(!1,!0):j(!1)});l.bind("mouseenter.sSelect",function(b){a(b.target).parent().addClass("newListSelHover")}).bind("mouseleave.sSelect",function(b){a(b.target).parent().removeClass("newListSelHover")});i.css({left:"0",display:"none",visibility:"visible"})})}})(jQuery);
+(function($){$('html').addClass('stylish-select');if(!Array.prototype.indexOf){Array.prototype.indexOf=function(searchElement){if(this===void 0||this===null)throw new TypeError();var t=Object(this),len=t.length>>>0;if(len===0)return-1;var n=0;if(arguments.length>0){n=Number(arguments[1]);if(n!==n)n=0;else if(n!==0&&n!==(1/0)&&n!==-(1/0))n=(n>0||-1)*Math.floor(Math.abs(n))}if(n>=len)return-1;var k=n>=0?n:Math.max(len-Math.abs(n),0);for(;k<len;k++){if(k in t&&t[k]===searchElement)return k}return-1}}$.fn.extend({getSetSSValue:function(value){if(value){$(this).val(value).change();return this}else{return $(this).find(':selected').val()}},resetSS:function(){var oldOpts=$(this).data('ssOpts');$this=$(this);$this.next().remove();$this.unbind('.sSelect').sSelect(oldOpts)}});$.fn.sSelect=function(options){return this.each(function(){var defaults={defaultText:'Please select',animationSpeed:0,ddMaxHeight:'',containerClass:''};var opts=$.extend(defaults,options),$input=$(this),$containerDivText=$('<div class="selectedTxt"></div>'),$containerDiv=$('<div class="newListSelected '+opts.containerClass+($input.is(':disabled')?'newListDisabled':'')+'"></div>'),$containerDivWrapper=$('<div class="SSContainerDivWrapper" style="visibility:hidden;"></div>'),$newUl=$('<ul class="newList"></ul>'),itemIndex=-1,currentIndex=-1,prevIndex=-1,keys=[],prevKey=false,prevented=false,$newLi;$(this).data('ssOpts',options);$containerDiv.insertAfter($input);$containerDiv.attr("tabindex",$input.attr("tabindex")||"0");$containerDivText.prependTo($containerDiv);$newUl.appendTo($containerDiv);$newUl.wrap($containerDivWrapper);$containerDivWrapper=$newUl.parent();$input.hide();if($input.is(':disabled')){return}$containerDivText.data('ssReRender',!$containerDivText.is(':visible'));if($input.children('optgroup').length==0){$input.children().each(function(i){var option=$(this).text(),key=$(this).val();keys.push(option.charAt(0).toLowerCase());if($(this).attr('selected')=='selected'||$(this).attr('selected')==true){opts.defaultText=option;currentIndex=prevIndex=i}$newUl.append($('<li><a href="JavaScript:void(0);">'+option+'</a></li>').data('key',key))});$newLi=$newUl.children().children().not('.newListDisabled')}else{$input.children('optgroup').each(function(){var optionTitle=$(this).attr('label'),$optGroup=$('<li class="newListOptionTitle">'+optionTitle+'</li>'),$optGroupList=$('<ul></ul>');$optGroup.appendTo($newUl);$optGroupList.appendTo($optGroup);$(this).children().each(function(){++itemIndex;var option=$(this).text(),key=$(this).val();keys.push(option.charAt(0).toLowerCase());if($(this).attr('selected')=='selected'||$(this).attr('selected')==true){opts.defaultText=option;currentIndex=prevIndex=itemIndex}$optGroupList.append($('<li><a href="JavaScript:void(0);">'+option+'</a></li>').data('key',key))})});$newLi=$newUl.find('ul li a:not(.newListDisabled)')}var newUlHeight=$newUl.height(),containerHeight=$containerDiv.height(),newLiLength=$newLi.length;if(currentIndex!=-1){navigateList(currentIndex)}else{$containerDivText.text(opts.defaultText)}function newUlPos(){var containerPosY=$containerDiv.offset().top,docHeight=$(window).height(),scrollTop=$(window).scrollTop();if(newUlHeight>parseInt(opts.ddMaxHeight)){newUlHeight=parseInt(opts.ddMaxHeight)}containerPosY=containerPosY-scrollTop;if(containerPosY+newUlHeight>=docHeight){$newUl.css({height:newUlHeight});$containerDivWrapper.css({top:'-'+newUlHeight+'px',height:newUlHeight});$input.onTop=true}else{$newUl.css({height:newUlHeight});$containerDivWrapper.css({top:containerHeight+'px',height:newUlHeight});$input.onTop=false}}newUlPos();$(window).bind('resize.sSelect scroll.sSelect',newUlPos);function positionFix(){$containerDiv.css('position','relative')}function positionHideFix(){$containerDiv.css({position:'static'})}$containerDivText.bind('click.sSelect',function(event){event.stopPropagation();if($(this).data('ssReRender')){newUlHeight=$newUl.height('').height();$containerDivWrapper.height('');containerHeight=$containerDiv.height();$(this).data('ssReRender',false);newUlPos()}$('.SSContainerDivWrapper').not($(this).next()).hide().parent().css('position','static').removeClass('newListSelFocus');$containerDivWrapper.toggle();positionFix();if(currentIndex==-1)currentIndex=0;try{$newLi.eq(currentIndex).focus()}catch(ex){}});function closeDropDown(fireChange,resetText){if(fireChange==true){prevIndex=currentIndex;$input.change()}if(resetText==true){currentIndex=prevIndex;navigateList(currentIndex)}$containerDivWrapper.hide();positionHideFix()}$newLi.bind('click.sSelect',function(e){var $clickedLi=$(e.target);currentIndex=$newLi.index($clickedLi);prevented=true;navigateList(currentIndex,true);closeDropDown()});$newLi.bind('mouseenter.sSelect',function(e){var $hoveredLi=$(e.target);$hoveredLi.addClass('newListHover')}).bind('mouseleave.sSelect',function(e){var $hoveredLi=$(e.target);$hoveredLi.removeClass('newListHover')});function navigateList(currentIndex,fireChange){if(currentIndex==-1){$containerDivText.text(opts.defaultText);$newLi.removeClass('hiLite')}else{$newLi.removeClass('hiLite').eq(currentIndex).addClass('hiLite');var text=$newLi.eq(currentIndex).text(),val=$newLi.eq(currentIndex).parent().data('key');try{$input.val(val)}catch(ex){$input[0].selectedIndex=currentIndex}$containerDivText.text(text);if(fireChange==true){prevIndex=currentIndex;$input.change()}if($containerDivWrapper.is(':visible')){try{$newLi.eq(currentIndex).focus()}catch(ex){}}}}$input.bind('change.sSelect',function(event){var $targetInput=$(event.target);if(prevented==true){prevented=false;return false}var $currentOpt=$targetInput.find(':selected');currentIndex=$targetInput.find('option').index($currentOpt);navigateList(currentIndex)});function keyPress(element){$(element).unbind('keydown.sSelect').bind('keydown.sSelect',function(e){var keycode=e.which;prevented=true;switch(keycode){case 40:case 39:incrementList();return false;break;case 38:case 37:decrementList();return false;break;case 33:case 36:gotoFirst();return false;break;case 34:case 35:gotoLast();return false;break;case 13:case 27:closeDropDown(true);return false;break;case 9:closeDropDown(true);nextFormElement();return false;break}keyPressed=String.fromCharCode(keycode).toLowerCase();var currentKeyIndex=keys.indexOf(keyPressed);if(typeof currentKeyIndex!='undefined'){++currentIndex;currentIndex=keys.indexOf(keyPressed,currentIndex);if(currentIndex==-1||currentIndex==null||prevKey!=keyPressed){currentIndex=keys.indexOf(keyPressed)}navigateList(currentIndex);prevKey=keyPressed;return false}})}function incrementList(){if(currentIndex<(newLiLength-1)){++currentIndex;navigateList(currentIndex)}}function decrementList(){if(currentIndex>0){--currentIndex;navigateList(currentIndex)}}function gotoFirst(){currentIndex=0;navigateList(currentIndex)}function gotoLast(){currentIndex=newLiLength-1;navigateList(currentIndex)}$containerDiv.bind('click.sSelect',function(e){e.stopPropagation();keyPress(this)});$containerDiv.bind('focus.sSelect',function(){$(this).addClass('newListSelFocus');keyPress(this)});$containerDiv.bind('blur.sSelect',function(){$(this).removeClass('newListSelFocus')});$(document).bind('click.sSelect',function(){$containerDiv.removeClass('newListSelFocus');if($containerDivWrapper.is(':visible')){closeDropDown(false,true)}else{closeDropDown(false)}});function nextFormElement(){var fields=$('body').find('button,input,textarea,select'),index=fields.index($input);if(index>-1&&(index+1)<fields.length){fields.eq(index+1).focus()}return false}$input.focus(function(){$input.next().focus()});$containerDivText.bind('mouseenter.sSelect',function(e){var $hoveredTxt=$(e.target);$hoveredTxt.parent().addClass('newListSelHover')}).bind('mouseleave.sSelect',function(e){var $hoveredTxt=$(e.target);$hoveredTxt.parent().removeClass('newListSelHover')});$containerDivWrapper.css({left:'0',display:'none',visibility:'visible'})})}})(jQuery);
View
6 stylish-select.css
@@ -1,5 +1,5 @@
/**
-* Stylish Select 0.4.6 - $ plugin to replace a select drop down box with a stylable unordered list
+* Stylish Select 0.4.7 - $ plugin to replace a select drop down box with a stylable unordered list
* http://github.com/scottdarby/Stylish-Select/
*
* Copyright (c) 2009 Scott Darby
@@ -85,7 +85,9 @@
}
.stylish-select .newListDisabled {
- color: #D7D7D7!important;
+ opacity: 0.6;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+ filter: alpha(opacity=60);
}
.stylish-select .newListSelHover,

3 comments on commit fc3130e

@Craigy-

So, and what about ? I think exactly that's needed not a full disabled selector...

@Craigy-

Sorry, parser crop html :(

So, and what about <option disabled="disabled"> ?

@scottdarby
Owner

good point, it now supports both disabled select and disabled options

Please sign in to comment.
Something went wrong with that request. Please try again.