diff --git a/dropdown.gif b/dropdown.gif new file mode 100755 index 0000000..5da2558 Binary files /dev/null and b/dropdown.gif differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..415c186 --- /dev/null +++ b/index.html @@ -0,0 +1,288 @@ + + + + jQuery Stylish Select 0.4.1 plugin examples + + + + + + + + + + + + + + +

Stylish Select 0.4.1

+

A cross-browser, accessible alternative to the standard form element which can be fully customised with CSS

+

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.

+

Stylish Select aims to have a minimal code footprint and weighs in at just over 3KB when minified.

+

Stylish Select blog post

+

Download source code (version 0.4.1)

+

Usage

+

First, include the stylesheet, jQuery and the stylish select .js file in your html head tag

+

The plugin can be used to replace any select with the following:

+ 
+$(document).ready(function(){
+	$('#my-dropdown').sSelect();
+});
+
+
+

Simplest example, option selected by default

+

You can use the alphabetical and arrow keys to navigate the list as you would a browser default select.

+ +
+
+

Change event

+

Stylish Select alters the original select on the page, so you can access it's change event:

+ 
+//change event
+$('#my-dropdownChange').sSelect().change(function(){alert('changed')});
+
+ +
+
+

Grouped options

+

Stylish Select supports optgroups.

+ +
+
+

Windows XP style

+

The Stylish Select can be styled with CSS in whatever way you like.

+ +
+
+

Getting/setting the value

+ 
+//set value
+$('#setVal').click(function(){
+	$('#my-dropdown5').getSetSSValue('Sit');
+});
+
+//get value
+$('#getVal').click(function(){
+	alert('The value is: '+$('#my-dropdown5').getSetSSValue());
+});
+
+

Set text to "Sit"

+

Get value

+ +
+
+

Add new options to Stylish Select

+ 
+//add options to select and update
+$('#addOptions').click(function(){
+	$('#my-dropdown6').append('').resetSS();
+});
+
+

If you add or remove options from the initial select element on the page, be sure to call the .resetSS() method on the select to update the Stylish Select replacement.

+ +

Add new options to select and update

+ +
+
+

Max-height for large lists

+ 
+$('#my-dropdown').sSelect({{ddMaxHeight: '300px'}});
+
+ +
+
+

Intelligent positioning

+

Stylish Select will always remain visible on the page.

+ +
+ + \ No newline at end of file diff --git a/jquery.stylish-select.min.js b/jquery.stylish-select.min.js new file mode 100755 index 0000000..781702e --- /dev/null +++ b/jquery.stylish-select.min.js @@ -0,0 +1,12 @@ +/* +Stylish Select 0.4.1 - $ plugin to replace a select drop down box with a stylable unordered list +http://scottdarby.com/ + +Requires: jQuery 1.3 or newer + +Contributions from Justin Beasley: http://www.harvest.org/ & Anatoly Ressin: http://www.artazor.lv/ + +Dual licensed under the MIT and GPL licenses. + +*/ +(function(a){a("html").addClass("stylish-select");Array.prototype.indexOf=function(c,d){for(var b=(d||0);b'),r=a('
'),z=a(''),t=-1,d=-1,m=[],w=false,v=false,x;a(this).data("ssOpts",b);r.insertAfter(e);j.prependTo(r);z.appendTo(r);e.hide();if(e.children("optgroup").length==0){e.children().each(function(B){var C=a(this).text();var A=a(this).val();m.push(C.charAt(0).toLowerCase());if(a(this).attr("selected")==true){l.defaultText=C;d=B}z.append(a('
  • '+C+"
    • ").data("key",A))});x=z.children().children()}else{e.children("optgroup").each(function(){var A=a(this).attr("label"),C=a('
  • '+A+"
    • ");C.appendTo(z);var B=a("");B.appendTo(C);a(this).children().each(function(){++t;var E=a(this).text();var D=a(this).val();m.push(E.charAt(0).toLowerCase());if(a(this).attr("selected")==true){l.defaultText=E;d=t}B.append(a('
  • '+E+"
    • ").data("key",D))})});x=z.find("ul li a")}var o=z.height(),n=r.height(),y=x.length;if(d!=-1){h(d,true)}else{j.text(l.defaultText)}function p(){var B=r.offset().top,A=jQuery(window).height(),C=jQuery(window).scrollTop();if(o>parseInt(l.ddMaxHeight)){o=parseInt(l.ddMaxHeight)}B=B-C;if(B+o>=A){z.css({top:"-"+o+"px",height:o});e.onTop=true}else{z.css({top:n+"px",height:o});e.onTop=false}}p();a(window).resize(function(){p()});a(window).scroll(function(){p()});function s(){r.css("position","relative")}function c(){r.css("position","static")}j.click(function(A){A.stopPropagation();a(".newList").not(a(this).next()).hide().parent().removeClass("newListSelFocus");z.toggle();s();x.eq(d).focus()});x.click(function(B){var A=a(B.target);d=x.index(A);v=true;h(d);z.hide();r.css("position","static")});x.hover(function(B){var A=a(B.target);A.addClass("newListHover")},function(B){var A=a(B.target);A.removeClass("newListHover")});function h(A,D){x.removeClass("hiLite").eq(A).addClass("hiLite");if(z.is(":visible")){x.eq(A).focus()}var C=x.eq(A).text();var B=x.eq(A).parent().data("key");if(D==true){e.val(B);j.text(C);return false}e.val(B);e.change();j.text(C)}e.change(function(A){$targetInput=a(A.target);if(v==true){v=false;return false}$currentOpt=$targetInput.find(":selected");d=$targetInput.find("option").index($currentOpt);h(d,true)});function q(A){A.onkeydown=function(D){var C;if(D==null){C=event.keyCode}else{C=D.which}v=true;switch(C){case 40:case 39:u();return false;break;case 38:case 37:k();return false;break;case 33:case 36:g();return false;break;case 34:case 35:f();return false;break;case 13:case 27:z.hide();c();return false;break}keyPressed=String.fromCharCode(C).toLowerCase();var B=m.indexOf(keyPressed);if(typeof B!="undefined"){++d;d=m.indexOf(keyPressed,d);if(d==-1||d==null||w!=keyPressed){d=m.indexOf(keyPressed)}h(d);w=keyPressed;return false}}}function u(){if(d<(y-1)){++d;h(d)}}function k(){if(d>0){--d;h(d)}}function g(){d=0;h(d)}function f(){d=y-1;h(d)}r.click(function(){q(this)});r.focus(function(){a(this).addClass("newListSelFocus");q(this)});r.blur(function(){a(this).removeClass("newListSelFocus")});a("body").click(function(){r.removeClass("newListSelFocus");z.hide();c()});j.hover(function(B){var A=a(B.target);A.parent().addClass("newListSelHover")},function(B){var A=a(B.target);A.parent().removeClass("newListSelHover")});z.css("left","0").hide()})}})(jQuery); \ No newline at end of file diff --git a/select-bg.png b/select-bg.png new file mode 100755 index 0000000..151eda7 Binary files /dev/null and b/select-bg.png differ diff --git a/stylish-select.css b/stylish-select.css new file mode 100755 index 0000000..56eab32 --- /dev/null +++ b/stylish-select.css @@ -0,0 +1,52 @@ +/* +Stylish Select 0.4.1 - $ plugin to replace a select drop down box with a stylable unordered list +http://scottdarby.com/ + +Copyright (c) 2009 Scott Darby + +Requires: jQuery 1.3 or newer + +Dual licensed under the MIT and GPL licenses. + +*/ + + +/*================================== +Hide lists on page load +====================================*/ + +.stylish-select ul.newList {left:-9999px;} + +/*================================== +red curvy example +====================================*/ +ul.newList * {margin:0; padding:0;} +ul.newList a {color: #000; text-decoration:none; display:block;} +ul.newList {margin:0; padding:0; list-style:none; color:#000; width:290px; background:#fff; position:absolute; border:1px solid #ccc; top:22px; left:0; overflow:auto; z-index:9999;} +.newListSelected {width:285px; color:#000; height:19px; padding:3px 0 0 6px; float:left; background:url(select-bg.png) no-repeat;} +.newListSelected span {width:284px; display:block;} +ul.newList li a {padding:3px 8px; display: block;} +ul.newList li a:focus {-moz-outline-style: none;} +.selectedTxt {width:258px; overflow:hidden; height:16px; padding:0 23px 0 0;} +.hiLite {background:#650101!important; color:#fff!important;} +.hiLite a {background:#650101!important; color:#fff!important;} +.newListHover {background:#ccc!important; color:#000!important; cursor:default;} +.newListSelHover, .newListSelFocus {background-position:0 -22px; cursor:default;} +.newListOptionTitle {font-weight:bold;} +.newListOptionTitle ul {margin:3px 0 0;} +.newListOptionTitle li {font-weight:normal; border-left:1px solid #ccc;} + +/*====================================== +windows xp style - div that contains the +