r2776 - partial implementation of optgroups. Functional, but many methods will need tweaking to w...
Author: scottjehl
Date: Mon Jun 15 15:50:08 2009
New Revision: 2776
Modified:
branches/labs/selectmenu/index.html
branches/labs/selectmenu/ui.selectmenu.css
branches/labs/selectmenu/ui.selectmenu.js
Log:
partial implementation of optgroups. Functional, but many methods will need
tweaking to work in regular and embedded ul's
Modified: branches/labs/selectmenu/index.html
==============================================================================
--- branches/labs/selectmenu/index.html (original)
+++ branches/labs/selectmenu/index.html Mon Jun 15 15:50:08 2009
@@ -47,7 +47,7 @@
format: addressFormatting
});
- $('select#files').selectmenu({
+ $('select#files, select#filesC').selectmenu({
icons: [
{find: '.script', icon: 'ui-icon-script'},
{find: '.image', icon: 'ui-icon-image'}
@@ -167,6 +167,26 @@
<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>
Modified: branches/labs/selectmenu/ui.selectmenu.css
==============================================================================
--- branches/labs/selectmenu/ui.selectmenu.css (original)
+++ branches/labs/selectmenu/ui.selectmenu.css Mon Jun 15 15:50:08 2009
@@ -25,4 +25,8 @@
.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; }
\ No newline at end of file
+.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
Modified: branches/labs/selectmenu/ui.selectmenu.js
==============================================================================
--- branches/labs/selectmenu/ui.selectmenu.js (original)
+++ branches/labs/selectmenu/ui.selectmenu.js Mon Jun 15 15:50:08 2009
@@ -136,8 +136,24 @@
.bind('mouseout blur', function(){
if($(this).is('.ui-selectmenu-item-selected')){
$(this).addClass(activeClass); }
$(this).removeClass('ui-selectmenu-item-focus ui-state-hover');
- })
- .appendTo(this.list);
+ });
+
+ //optgroup or not...
+ if(s_options[i].parentOptGroup){
+ var optGroupName = 'ui-selectmenu-group-' +
s_options[i].parentOptGroup;
+ if(this.list.find('li.'+optGroupName).size()){
+ this.list.find('li.'+optGroupName + ':last ul').append(thisLi);
+ }
+ else{
+ var newOptGroup = $('<li
class="ui-selectmenu-group '+optGroupName+'"><span
class="ui-selectmenu-group-label">'+s_options[i].parentOptGroup+'</span><ul></ul></li>')
+ .appendTo(this.list)
+ .find('ul')
+ .append(thisLi);
+ }
+ }
+ else{
+ thisLi.appendTo(this.list);
+ }
this.list.bind('mousedown mouseup', function(){return false;});
@@ -159,6 +175,9 @@
}
+
+
+
//add corners to top and bottom menu items
this.list.find('li:last').addClass("ui-corner-bottom");
if(o.style == 'popup'){
@@ -323,12 +342,13 @@
},
open: function(){
+ this._refreshPosition();
this._closeOthers();
this.newelement.addClass('ui-state-active');
this.list
.appendTo('body')
.addClass('ui-selectmenu-open')
- .find('li:eq('+ this._selectedIndex() +') a').focus();
+ .find('li:not(.ui-selectmenu-group):eq('+ this._selectedIndex() +')
a').focus();
if(this.options.style == "dropdown"){
this.newelement.removeClass('ui-corner-all').addClass('ui-corner-top'); }
this._refreshPosition();
@@ -382,12 +402,13 @@
value: jQuery(this).attr('value'),
text: self._formatText(jQuery(this).text()),
selected: (i == self._selectedIndex()),
- classes: jQuery(this).attr('class')
+ classes: jQuery(this).attr('class'),
+ parentOptGroup: $(this).parent('optgroup').attr('label')
});
});
return opts;
},
-
+
_change: function(event, index) {
var uiHash = {
value: this.value()
@@ -421,7 +442,7 @@
_refreshValue: function() {
var activeClass = (this.options.style == "popup") ? "
ui-state-active" : "";
this.list.find('.ui-selectmenu-item-selected').removeClass("ui-selectmenu-item-selected"+activeClass).find('a').attr('aria-selected', 'false');
-
this.list.find('li').eq(this._selectedIndex()).addClass("ui-selectmenu-item-selected"+activeClass).find('a').attr('aria-selected', 'true');
+
this.list.find('li').not('li.ui-selectmenu-group').eq(this._selectedIndex()).addClass("ui-selectmenu-item-selected"+activeClass).find('a').attr('aria-selected', 'true');
//toggle any class brought in from option
var currentOptionClasses = this.newelement.data('optionClasses') ?
this.newelement.data('optionClasses') : "";
@@ -432,7 +453,7 @@
.data('optionClasses', newOptionClasses)
.addClass( newOptionClasses )
.find('.ui-selectmenu-status')
- .html( this.list.find('li').eq(this._selectedIndex()).find('a').html() );
+ .html(
this.list.find('li').not('li.ui-selectmenu-group').eq(this._selectedIndex()).find('a').html()
);
},
_refreshPosition: function(){
@@ -475,6 +496,4 @@
}
});
-})(jQuery);
-
-
+})(jQuery);
\ No newline at end of file