diff options
author | Felix Nagel <info@felixnagel.com> | 2010-08-07 01:35:18 +0200 |
---|---|---|
committer | Felix Nagel <info@felixnagel.com> | 2010-08-07 01:35:18 +0200 |
commit | 316b15cd57a2f6fc0f05ae5fac520c5d4569b6ca (patch) | |
tree | c221ac93aee5d42406e58f4e77adb92e231eb777 | |
parent | 3be11051735106b99fdde69878bb7aeb372efeb8 (diff) | |
download | jquery-ui-316b15cd57a2f6fc0f05ae5fac520c5d4569b6ca.tar.gz jquery-ui-316b15cd57a2f6fc0f05ae5fac520c5d4569b6ca.zip |
init: fork of latest jQuery UI with selectmenu from http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/
added: *.db to gitignore (Im using Windows)
added: readme for gitHub
-rw-r--r-- | .gitignore | 1 | ||||
-rw-r--r-- | demos/index.html | 1 | ||||
-rw-r--r-- | demos/selectmenu/default.html | 201 | ||||
-rw-r--r-- | demos/selectmenu/images/24-podcast-square.png | bin | 0 -> 681 bytes | |||
-rw-r--r-- | demos/selectmenu/images/24-rss-square.png | bin | 0 -> 594 bytes | |||
-rw-r--r-- | demos/selectmenu/images/24-video-square.png | bin | 0 -> 649 bytes | |||
-rw-r--r-- | demos/selectmenu/index.html | 18 | ||||
-rw-r--r-- | readme | 7 | ||||
-rw-r--r-- | themes/base/jquery.ui.selectmenu.css | 24 | ||||
-rw-r--r-- | ui/jquery.ui.selectmenu.js | 524 |
10 files changed, 776 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore index e39040f5b..489070e3f 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ docs *.diff *.patch .DS_Store +*.db diff --git a/demos/index.html b/demos/index.html index db3e2bf83..bf5ac5a1f 100644 --- a/demos/index.html +++ b/demos/index.html @@ -268,6 +268,7 @@ <dd><a href="progressbar/index.html">Progressbar</a></dd> <dd><a href="slider/index.html">Slider</a></dd> <dd><a href="tabs/index.html">Tabs</a></dd> + <dd><a href="selectmenu/index.html">Selectmenu</a></dd> <dt>Effects</dt> <dd><a href="animate/index.html">Color Animation</a></dd> <dd><a href="toggleClass/index.html">Toggle Class</a></dd> diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html new file mode 100644 index 000000000..574c2f003 --- /dev/null +++ b/demos/selectmenu/default.html @@ -0,0 +1,201 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>Demo Page for jQuery UI selectmenu</title> + + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> + + <script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script> + + <style type="text/css"> + /*demo styles*/ + body {font-size: 62.5%; font-family:"Verdana",sans-serif; margin: 70px 10px;} + fieldset { border:0; margin-bottom: 40px;} + label,select,.ui-select-menu { float: left; margin-right: 10px; } + select { width: 200px; } + + /*select with custom icons*/ + body a.customicons { height: 2.8em;} + body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; } + body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; } + body .video .ui-selectmenu-item-icon { background: url(images/24-video-square.png) 0 0 no-repeat; } + body .podcast .ui-selectmenu-item-icon { background: url(images/24-podcast-square.png) 0 0 no-repeat; } + body .rss .ui-selectmenu-item-icon { background: url(images/24-rss-square.png) 0 0 no-repeat; } + + + </style> + <script type="text/javascript"> + $(function(){ + $('select#speedA').selectmenu(); + + $('select#speedAa').selectmenu({maxHeight: 150}); + + $('select#speedB').selectmenu({ + width: 300, + format: addressFormatting + }); + + $('select#speedC').selectmenu({style:'dropdown'}); + + $('select#speedD').selectmenu({ + style:'dropdown', + menuWidth: 400, + format: addressFormatting + }); + + $('select#files, select#filesC').selectmenu({ + icons: [ + {find: '.script', icon: 'ui-icon-script'}, + {find: '.image', icon: 'ui-icon-image'} + ] + }); + + $('select#filesB').selectmenu({ + icons: [ + {find: '.video'}, + {find: '.podcast'}, + {find: '.rss'} + ] + }); + }); + + //a custom format option callback + var addressFormatting = function(text){ + var newText = text; + //array of find replaces + var findreps = [ + {find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'}, + {find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'}, + {find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'}, + {find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'}, + {find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'} + ]; + + for(var i in findreps){ + newText = newText.replace(findreps[i].find, findreps[i].rep); + } + return newText; + } + </script> + <script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script> + <script type="text/javascript"> $(function(){ $('<div style="position: absolute; top: 20px; right: 10px;" />').appendTo('body').themeswitcher(); }); </script> +</head> +<body> + <form action="#"> + <h2>Default: "popup" Style</h2> + <fieldset> + <label for="speedA">Select a Speed:</label> + <select name="speedA" id="speedA"> + <option value="Slower">Slower</option> + <option value="Slow">Slow</option> + <option value="Medium" selected="selected">Medium</option> + <option value="Fast">Fast</option> + <option value="Faster">Faster</option> + </select> + </fieldset> + + <h2>Default: "popup" Style with maxHeight set </h2> + <fieldset> + <label for="speedAa">Select a Speed:</label> + <select name="speedAa" id="speedAa"> + <option value="Slower">Slower</option> + <option value="Slow">Slow</option> + <option value="Medium" selected="selected">Medium</option> + <option value="Fast">Fast</option> + <option value="Faster">Faster</option> + <option value="Slower">Slower</option> + <option value="Slow">Slow</option> + <option value="Medium" selected="selected">Medium</option> + <option value="Fast">Fast</option> + <option value="Faster">Faster</option> + <option value="Slower">Slower</option> + <option value="Slow">Slow</option> + <option value="Medium" selected="selected">Medium</option> + <option value="Fast">Fast</option> + <option value="Faster">Faster</option> + </select> + </fieldset> + + <h2>Same with option text formatting</h2> + <fieldset> + <label for="speedB">Select an Address:</label> + <select name="speedB" id="speedB"> + <option>John Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option> + <option selected="selected">Jane Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option> + <option>Joseph Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option> + <option>Mad Doe Kiiid - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option> + </select> + </fieldset> + + <h2>"dropdown" Style</h2> + <fieldset> + <label for="speedC">Select a Speed:</label> + <select name="speedC" id="speedC"> + <option value="Slower" class="whoo">Slower</option> + <option value="Slow">Slow</option> + <option value="Medium" selected="selected">Medium</option> + <option value="Fast">Fast</option> + <option value="Faster">Faster</option> + </select> + </fieldset> + + <h2>"dropdown" Style with menuWidth wider than menu and text formatting</h2> + <fieldset> + <label for="speedD">Select an Address:</label> + <select name="speedD" id="speedD"> + <option>John Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option> + <option>Jane Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option> + <option selected="selected">Joseph Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option> + <option>Mad Doe Kiiid - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option> + </select> + </fieldset> + + <h2>Default: "popup" Style with framework icons</h2> + <fieldset> + <label for="files">Select a File:</label> + <select name="files" id="files"> + <option value="jquery" class="script">jQuery.js</option> + <option value="jquerylogo" class="image">jQuery Logo</option> + <option value="jqueryui" class="script">ui.jQuery.js</option> + <option value="jqueryuilogo" selected="selected" class="image">jQuery UI Logo</option> + <option value="somefile">Some unknown file</option> + </select> + </fieldset> + + <h2>Default: "popup" Style with custom icon images</h2> + <fieldset> + <label for="filesB">Select a File:</label> + <select name="filesB" id="filesB" class="customicons"> + <option value="mypodcast" class="podcast">John Resig Podcast</option> + <option value="myvideo" class="video">Scott Gonzales Video</option> + <option value="myrss" class="rss">jQuery RSS XML</option> + </select> + </fieldset> + + <h2>Demo with optgroups</h2> + <fieldset> + <label for="filesC">Select a File:</label> + <select name="filesC" id="filesC"> + <optgroup label="images"> + <option value="jquerylogo" class="image">jQuery Logo</option> + <option value="jqueryuilogo" selected="selected" class="image">jQuery UI Logo</option> + </optgroup> + <optgroup label="scripts"> + <option value="jquery" class="script">jQuery.js</option> + <option value="jqueryui" class="script">ui.jQuery.js</option> + </optgroup> + <optgroup label="other"> + <option value="somefile">Some unknown file</option> + <option value="someotherfile">Some other unknown file</option> + </optgroup> + </select> + </fieldset> + </form> +</body> +</html>
\ No newline at end of file diff --git a/demos/selectmenu/images/24-podcast-square.png b/demos/selectmenu/images/24-podcast-square.png Binary files differnew file mode 100644 index 000000000..3c3e38f3f --- /dev/null +++ b/demos/selectmenu/images/24-podcast-square.png diff --git a/demos/selectmenu/images/24-rss-square.png b/demos/selectmenu/images/24-rss-square.png Binary files differnew file mode 100644 index 000000000..f59b69ed3 --- /dev/null +++ b/demos/selectmenu/images/24-rss-square.png diff --git a/demos/selectmenu/images/24-video-square.png b/demos/selectmenu/images/24-video-square.png Binary files differnew file mode 100644 index 000000000..ce50ccfde --- /dev/null +++ b/demos/selectmenu/images/24-video-square.png diff --git a/demos/selectmenu/index.html b/demos/selectmenu/index.html new file mode 100644 index 000000000..ddd789ac9 --- /dev/null +++ b/demos/selectmenu/index.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Selectmenu Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> +</head> +<body> + +<div class="demos-nav"> + <h4>Examples</h4> + <ul> + <li class="demo-config-on"><a href="default.html">Default functionality</a></li> + </ul> +</div> + +</body> +</html> @@ -0,0 +1,7 @@ +This is a fork of jQuery UI to push futher development of the following plugins: + +- selectmenu + + +Please use GitHub for bug tracking and take a look at the jQuery UI Wiki at: +http://wiki.jqueryui.com/Selectmenu
\ No newline at end of file diff --git a/themes/base/jquery.ui.selectmenu.css b/themes/base/jquery.ui.selectmenu.css new file mode 100644 index 000000000..087e25911 --- /dev/null +++ b/themes/base/jquery.ui.selectmenu.css @@ -0,0 +1,24 @@ +/* Selectmenu +----------------------------------*/ +.ui-selectmenu { display: block; position:relative; height:2em; text-decoration: none; overflow:hidden;} +.ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top: 50%; } +.ui-selectmenu-menu { padding:0; margin:0; list-style:none; position:absolute; top: 0; visibility: hidden; overflow: auto; } +.ui-selectmenu-open { visibility: visible; } +.ui-selectmenu-menu-popup { margin-top: -1px; } +.ui-selectmenu-menu-dropdown { } +.ui-selectmenu-menu li { padding:0; margin:0; display: block; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; border-right-width: 0 !important; border-left-width: 0 !important; font-weight: normal !important; } +.ui-selectmenu-menu li a,.ui-selectmenu-status {line-height: 1.4em; display:block; padding:.3em 1em; outline:none; text-decoration:none; } +.ui-selectmenu-menu li.ui-selectmenu-hasIcon a, +.ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 20px; position: relative; margin-left: 5px; } +.ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; } +.ui-selectmenu-status { line-height: 1.4em; } +.ui-selectmenu-open li.ui-selectmenu-item-focus a { } +.ui-selectmenu-open li.ui-selectmenu-item-selected { } +.ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; } +.ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; } +.ui-selectmenu-menu li .ui-selectmenu-item-content { } +.ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; } +/*for optgroups*/ +.ui-selectmenu-menu .ui-selectmenu-group { font-size: 1em; } +.ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label { line-height: 1.4em; display:block; padding:.6em .5em 0; font-weight: bold; } +.ui-selectmenu-menu .ui-selectmenu-group ul { margin: 0; padding: 0; }
\ No newline at end of file diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js new file mode 100644 index 000000000..8b989b2a8 --- /dev/null +++ b/ui/jquery.ui.selectmenu.js @@ -0,0 +1,524 @@ + /* + * jQuery UI selectmenu + * + * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT (MIT-LICENSE.txt) + * and GPL (GPL-LICENSE.txt) licenses. + * + * http://docs.jquery.com/UI + */ + +(function($) { + +$.widget("ui.selectmenu", { + _init: function() { + var self = this, o = this.options; + + //quick array of button and menu id's + this.ids = [this.element.attr('id') + '-' + 'button', this.element.attr('id') + '-' + 'menu']; + + //define safe mouseup for future toggling + this._safemouseup = true; + + //create menu button wrapper + this.newelement = $('<a class="'+ this.widgetBaseClass +' ui-widget ui-state-default ui-corner-all" id="'+this.ids[0]+'" role="button" href="#" aria-haspopup="true" aria-owns="'+this.ids[1]+'"></a>') + .insertAfter(this.element); + + //transfer tabindex + var tabindex = this.element.attr('tabindex'); + if(tabindex){ this.newelement.attr('tabindex', tabindex); } + + //save reference to select in data for ease in calling methods + this.newelement.data('selectelement', this.element); + + //menu icon + this.selectmenuIcon = $('<span class="'+ this.widgetBaseClass +'-icon ui-icon"></span>') + .prependTo(this.newelement) + .addClass( (o.style == "popup")? 'ui-icon-triangle-2-n-s' : 'ui-icon-triangle-1-s' ); + + + //make associated form label trigger focus + $('label[for='+this.element.attr('id')+']') + .attr('for', this.ids[0]) + .bind('click', function(){ + self.newelement[0].focus(); + return false; + }); + + //click toggle for menu visibility + this.newelement + .bind('mousedown', function(event){ + self._toggle(event); + //make sure a click won't open/close instantly + if(o.style == "popup"){ + self._safemouseup = false; + setTimeout(function(){self._safemouseup = true;}, 300); + } + return false; + }) + .bind('click',function(){ + return false; + }) + .keydown(function(event){ + var ret = true; + switch (event.keyCode) { + case $.ui.keyCode.ENTER: + ret = true; + break; + case $.ui.keyCode.SPACE: + ret = false; + self._toggle(event); + break; + case $.ui.keyCode.UP: + case $.ui.keyCode.LEFT: + ret = false; + self._moveSelection(-1); + break; + case $.ui.keyCode.DOWN: + case $.ui.keyCode.RIGHT: + ret = false; + self._moveSelection(1); + break; + case $.ui.keyCode.TAB: + ret = true; + break; + default: + ret = false; + self._typeAhead(event.keyCode, 'mouseup'); + break; + } + return ret; + }) + .bind('mouseover focus', function(){ + $(this).addClass(self.widgetBaseClass+'-focus ui-state-hover'); + }) + .bind('mouseout blur', function(){ + $(this).removeClass(self.widgetBaseClass+'-focus ui-state-hover'); + }); + + //document click closes menu + $(document) + .mousedown(function(event){ + self.close(event); + }); + + //change event on original selectmenu + this.element + .click(function(){ this._refreshValue(); }) + .focus(function(){ this.newelement[0].focus(); }); + + //create menu portion, append to body + var cornerClass = (o.style == "dropdown")? " ui-corner-bottom" : " ui-corner-all" + this.list = $('<ul class="' + self.widgetBaseClass + '-menu ui-widget ui-widget-content'+cornerClass+'" aria-hidden="true" role="listbox" aria-labelledby="'+this.ids[0]+'" id="'+this.ids[1]+'"></ul>').appendTo('body'); + + //serialize selectmenu element options + var selectOptionData = []; + this.element + .find('option') + .each(function(){ + selectOptionData.push({ + value: $(this).attr('value'), + text: self._formatText(jQuery(this).text()), + selected: $(this).attr('selected'), + classes: $(this).attr('class'), + parentOptGroup: $(this).parent('optgroup').attr('label') + }); + }); + + //active state class is only used in popup style + var activeClass = (self.options.style == "popup") ? " ui-state-active" : ""; + + //write li's + for(var i in selectOptionData){ + var thisLi = $('<li role="presentation"><a href="#" tabindex="-1" role="option" aria-selected="false">'+ selectOptionData[i].text +'</a></li>') + .data('index',i) + .addClass(selectOptionData[i].classes) + .data('optionClasses', selectOptionData[i].classes|| '') + .mouseup(function(event){ + if(self._safemouseup){ + var changed = $(this).data('index') != self._selectedIndex(); + self.value($(this).data('index')); + self.select(event); + if(changed){ self.change(event); } + self.close(event,true); + } + return false; + }) + .click(function(){ + return false; + }) + .bind('mouseover focus', function(){ + self._selectedOptionLi().addClass(activeClass); + self._focusedOptionLi().removeClass(self.widgetBaseClass+'-item-focus ui-state-hover'); + $(this).removeClass('ui-state-active').addClass(self.widgetBaseClass + '-item-focus ui-state-hover'); + }) + .bind('mouseout blur', function(){ + if($(this).is( self._selectedOptionLi() )){ $(this).addClass(activeClass); } + $(this).removeClass(self.widgetBaseClass + '-item-focus ui-state-hover'); + }); + + //optgroup or not... + if(selectOptionData[i].parentOptGroup){ + var optGroupName = self.widgetBaseClass + '-group-' + selectOptionData[i].parentOptGroup; + if(this.list.find('li.' + optGroupName).size()){ + this.list.find('li.' + optGroupName + ':last ul').append(thisLi); + } + else{ + $('<li role="presentation" class="'+self.widgetBaseClass+'-group '+optGroupName+'"><span class="'+self.widgetBaseClass+'-group-label">'+selectOptionData[i].parentOptGroup+'</span><ul></ul></li>') + .appendTo(this.list) + .find('ul') + .append(thisLi); + } + } + else{ + thisLi.appendTo(this.list); + } + + //this allows for using the scrollbar in an overflowed list + this.list.bind('mousedown mouseup', function(){return false;}); + + //append icon if option is specified + if(o.icons){ + for(var j in o.icons){ + if(thisLi.is(o.icons[j].find)){ + thisLi + .data('optionClasses', selectOptionData[i].classes + ' ' + self.widgetBaseClass + '-hasIcon') + .addClass(self.widgetBaseClass + '-hasIcon'); + var iconClass = o.icons[j].icon || ""; + + thisLi + .find('a:eq(0)') + .prepend('<span class="'+self.widgetBaseClass+'-item-icon ui-icon '+iconClass + '"></span>'); + } + } + } + } + + //add corners to top and bottom menu items + this.list.find('li:last').addClass("ui-corner-bottom"); + if(o.style == 'popup'){ this.list.find('li:first').addClass("ui-corner-top"); } + + //transfer classes to selectmenu and list + if(o.transferClasses){ + var transferClasses = this.element.attr('class') || ''; + this.newelement.add(this.list).addClass(transferClasses); + } + + //original selectmenu width + var selectWidth = this.element.width(); + + //set menu button width + this.newelement.width( (o.width) ? o.width : selectWidth); + + //set menu width to either menuWidth option value, width option value, or select width + if(o.style == 'dropdown'){ this.list.width( (o.menuWidth) ? o.menuWidth : ((o.width) ? o.width : selectWidth)); } + else { this.list.width( (o.menuWidth) ? o.menuWidth : ((o.width) ? o.width - o.handleWidth : selectWidth - o.handleWidth)); } + + //set max height from option + if(o.maxHeight && o.maxHeight < this.list.height()){ this.list.height(o.maxHeight); } + + //save reference to actionable li's (not group label li's) + this._optionLis = this.list.find('li:not(.'+ self.widgetBaseClass +'-group)'); + + //transfer menu click to menu button + this.list + .keydown(function(event){ + var ret = true; + switch (event.keyCode) { + case $.ui.keyCode.UP: + case $.ui.keyCode.LEFT: + ret = false; + self._moveFocus(-1); + break; + case $.ui.keyCode.DOWN: + case $.ui.keyCode.RIGHT: + ret = false; + self._moveFocus(1); + break; + case $.ui.keyCode.HOME: + ret = false; + self._moveFocus(':first'); + break; + case $.ui.keyCode.PAGE_UP: + ret = false; + self._scrollPage('up'); + break; + case $.ui.keyCode.PAGE_DOWN: + ret = false; + self._scrollPage('down'); + break; + case $.ui.keyCode.END: + ret = false; + self._moveFocus(':last'); + break; + case $.ui.keyCode.ENTER: + case $.ui.keyCode.SPACE: + ret = false; + self.close(event,true); + $(event.target).parents('li:eq(0)').trigger('mouseup'); + break; + case $.ui.keyCode.TAB: + ret = true; + self.close(event,true); + break; + case $.ui.keyCode.ESCAPE: + ret = false; + self.close(event,true); + break; + default: + ret = false; + self._typeAhead(event.keyCode,'focus'); + break; + } + return ret; + }); + + //selectmenu style + if(o.style == 'dropdown'){ + this.newelement + .addClass(self.widgetBaseClass+"-dropdown"); + this.list + .addClass(self.widgetBaseClass+"-menu-dropdown"); + } + else { + this.newelement + .addClass(self.widgetBaseClass+"-popup"); + this.list + .addClass(self.widgetBaseClass+"-menu-popup"); + } + + //append status span to button + this.newelement.prepend('<span class="'+self.widgetBaseClass+'-status">'+ selectOptionData[this._selectedIndex()].text +'</span>'); + + //hide original selectmenu element + this.element.hide(); + + //transfer disabled state + if(this.element.attr('disabled') == true){ this.disable(); } + + //update value + this.value(this._selectedIndex()); + }, + destroy: function() { + this.element.removeData(this.widgetName) + .removeClass(this.widgetBaseClass + '-disabled' + ' ' + this.namespace + '-state-disabled') + .removeAttr('aria-disabled'); + + //unbind click on label, reset its for attr + $('label[for='+this.newelement.attr('id')+']') + .attr('for',this.element.attr('id')) + .unbind('click'); + this.newelement.remove(); + this.list.remove(); + this.element.show(); + }, + _typeAhead: function(code, eventType){ + var self = this; + //define self._prevChar if needed + if(!self._prevChar){ self._prevChar = ['',0]; } + var C = String.fromCharCode(code); + c = C.toLowerCase(); + var focusFound = false; + function focusOpt(elem, ind){ + focusFound = true; + $(elem).trigger(eventType); + self._prevChar[1] = ind; + }; + this.list.find('li a').each(function(i){ + if(!focusFound){ + var thisText = $(this).text(); + if( thisText.indexOf(C) == 0 || thisText.indexOf(c) == 0){ + if(self._prevChar[0] == C){ + if(self._prevChar[1] < i){ focusOpt(this,i); } + } + else{ focusOpt(this,i); } + } + } + }); + this._prevChar[0] = C; + }, + _uiHash: function(){ + return { + value: this.value() + }; + }, + open: function(event){ + var self = this; + var disabledStatus = this.newelement.attr("aria-disabled"); + if(disabledStatus != 'true'){ + this._refreshPosition(); + this._closeOthers(event); + this.newelement + .addClass('ui-state-active'); + + this.list + .appendTo('body') + .addClass(self.widgetBaseClass + '-open') + .attr('aria-hidden', false) + .find('li:not(.'+ self.widgetBaseClass +'-group):eq('+ this._selectedIndex() +') a')[0].focus(); + if(this.options.style == "dropdown"){ this.newelement.removeClass('ui-corner-all').addClass('ui-corner-top'); } + this._refreshPosition(); + this._trigger("open", event, this._uiHash()); + } + }, + close: function(event, retainFocus){ + if(this.newelement.is('.ui-state-active')){ + this.newelement + .removeClass('ui-state-active'); + this.list + .attr('aria-hidden', true) + .removeClass(this.widgetBaseClass+'-open'); + if(this.options.style == "dropdown"){ this.newelement.removeClass('ui-corner-top').addClass('ui-corner-all'); } + if(retainFocus){this.newelement[0].focus();} + this._trigger("close", event, this._uiHash()); + } + }, + change: function(event) { + this.element.trigger('change'); + this._trigger("change", event, this._uiHash()); + }, + select: function(event) { + this._trigger("select", event, this._uiHash()); + }, + _closeOthers: function(event){ + $('.'+ this.widgetBaseClass +'.ui-state-active').not(this.newelement).each(function(){ + $(this).data('selectelement').selectmenu('close',event); + }); + $('.'+ this.widgetBaseClass +'.ui-state-hover').trigger('mouseout'); + }, + _toggle: function(event,retainFocus){ + if(this.list.is('.'+ this.widgetBaseClass +'-open')){ this.close(event,retainFocus); } + else { this.open(event); } + }, + _formatText: function(text){ + return this.options.format ? this.options.format(text) : text; + }, + _selectedIndex: function(){ + return this.element[0].selectedIndex; + }, + _selectedOptionLi: function(){ + return this._optionLis.eq(this._selectedIndex()); + }, + _focusedOptionLi: function(){ + return this.list.find('.'+ this.widgetBaseClass +'-item-focus'); + }, + _moveSelection: function(amt){ + var currIndex = parseInt(this._selectedOptionLi().data('index'), 10); + var newIndex = currIndex + amt; + return this._optionLis.eq(newIndex).trigger('mouseup'); + }, + _moveFocus: function(amt){ + if(!isNaN(amt)){ + var currIndex = parseInt(this._focusedOptionLi().data('index'), 10); + var newIndex = currIndex + amt; + } + else { var newIndex = parseInt(this._optionLis.filter(amt).data('index'), 10); } + + if(newIndex < 0){ newIndex = 0; } + if(newIndex > this._optionLis.size()-1){ + newIndex = this._optionLis.size()-1; + } + var activeID = this.widgetBaseClass + '-item-' + Math.round(Math.random() * 1000); + + this._focusedOptionLi().find('a:eq(0)').attr('id',''); + this._optionLis.eq(newIndex).find('a:eq(0)').attr('id',activeID)[0].focus(); + this.list.attr('aria-activedescendant', activeID); + }, + _scrollPage: function(direction){ + var numPerPage = Math.floor(this.list.outerHeight() / this.list.find('li:first').outerHeight()); + numPerPage = (direction == 'up') ? -numPerPage : numPerPage; + this._moveFocus(numPerPage); + }, + _setData: function(key, value) { + this.options[key] = value; + if (key == 'disabled') { + this.close(); + this.element + .add(this.newelement) + .add(this.list) + [value ? 'addClass' : 'removeClass']( + this.widgetBaseClass + '-disabled' + ' ' + + this.namespace + '-state-disabled') + .attr("aria-disabled", value); + } + }, + value: function(newValue) { + if (arguments.length) { + this.element[0].selectedIndex = newValue; + this._refreshValue(); + this._refreshPosition(); + } + return this.element[0].selectedIndex; + }, + _refreshValue: function() { + var activeClass = (this.options.style == "popup") ? " ui-state-active" : ""; + var activeID = this.widgetBaseClass + '-item-' + Math.round(Math.random() * 1000); + //deselect previous + this.list + .find('.'+ this.widgetBaseClass +'-item-selected') + .removeClass(this.widgetBaseClass + "-item-selected" + activeClass) + .find('a') + .attr('aria-selected', 'false') + .attr('id', ''); + //select new + this._selectedOptionLi() + .addClass(this.widgetBaseClass + "-item-selected"+activeClass) + .find('a') + .attr('aria-selected', 'true') + .attr('id', activeID); + + //toggle any class brought in from option + var currentOptionClasses = this.newelement.data('optionClasses') ? this.newelement.data('optionClasses') : ""; + var newOptionClasses = this._selectedOptionLi().data('optionClasses') ? this._selectedOptionLi().data('optionClasses') : ""; + this.newelement + .removeClass(currentOptionClasses) + .data('optionClasses', newOptionClasses) + .addClass( newOptionClasses ) + .find('.'+this.widgetBaseClass+'-status') + .html( + this._selectedOptionLi() + .find('a:eq(0)') + .html() + ); + + this.list.attr('aria-activedescendant', activeID) + }, + _refreshPosition: function(){ + //set left value + this.list.css('left', this.newelement.offset().left); + + //set top value + var menuTop = this.newelement.offset().top; + var scrolledAmt = this.list[0].scrollTop; + this.list.find('li:lt('+this._selectedIndex()+')').each(function(){ + scrolledAmt -= $(this).outerHeight(); + }); + + if(this.newelement.is('.'+this.widgetBaseClass+'-popup')){ + menuTop+=scrolledAmt; + this.list.css('top', menuTop); + } + else { + menuTop += this.newelement.height(); + this.list.css('top', menuTop); + } + } +}); + +$.extend($.ui.selectmenu, { + getter: "value", + version: "@VERSION", + eventPrefix: "selectmenu", + defaults: { + transferClasses: true, + style: 'popup', + width: null, + menuWidth: null, + handleWidth: 26, + maxHeight: null, + icons: null, + format: null + } +}); + +})(jQuery);
\ No newline at end of file |