r2722 - added support for icons. "icons" option allows for a hash of selector/iconClass propertie...
Author: scottjehl
Date: Fri Jun 12 08:54:57 2009
New Revision: 2722
Modified:
branches/labs/selectmenu/index.html
branches/labs/selectmenu/ui.selectmenu.css
branches/labs/selectmenu/ui.selectmenu.js
Log:
added support for icons. "icons" option allows for a hash of
selector/iconClass properties, to add icons to selectmenu items.
Modified: branches/labs/selectmenu/index.html
==============================================================================
--- branches/labs/selectmenu/index.html (original)
+++ branches/labs/selectmenu/index.html Fri Jun 12 08:54:57 2009
@@ -34,14 +34,14 @@
menuWidth: 400,
format: addressFormatting
});
- /*
- $('<a href="#">Destroy Menus</a>
')
- .appendTo('body')
- .click(function(){
- $('select').selectmenu('destroy');
- });
- */
+ $('select#files').selectmenu({
+ icons: [
+ {el: '.script', icon: 'ui-icon-script'},
+ {el: '.image', icon: 'ui-icon-image'}
+ ]
+ });
+
});
//format options
var addressFormatting = [
@@ -103,6 +103,18 @@
<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 icon options</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>
Modified: branches/labs/selectmenu/ui.selectmenu.css
==============================================================================
--- branches/labs/selectmenu/ui.selectmenu.css (original)
+++ branches/labs/selectmenu/ui.selectmenu.css Fri Jun 12 08:54:57 2009
@@ -14,8 +14,11 @@
.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 { 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 { }
Modified: branches/labs/selectmenu/ui.selectmenu.js
==============================================================================
--- branches/labs/selectmenu/ui.selectmenu.js (original)
+++ branches/labs/selectmenu/ui.selectmenu.js Fri Jun 12 08:54:57 2009
@@ -100,9 +100,11 @@
var activeClass = (self.options.style == "popup") ? "
ui-state-active" : "";
//write li's
for(var i in s_options){
+
var thisLi = $('<li><a href="#" tabindex="-1" role="option"
aria-selected="false">'+ s_options[i].text +'</a></li>')
.data('index',i)
.addClass(s_options[i].classes)
+ .data('optionClasses', s_options[i].classes)
.mouseup(function(){
self.value($(this).data('index'));
})
@@ -116,6 +118,20 @@
$(this).removeClass('ui-selectmenu-item-focus ui-state-hover');
})
.appendTo(this.list);
+
+ //append icon if option is specified
+ if(o.icons){
+ for(var j in o.icons){
+ if(thisLi.is(o.icons[j].el)){
+ thisLi
+ .data('optionClasses', s_options[i].classes + '
ui-selectmenu-hasIcon')
+ .addClass('ui-selectmenu-hasIcon')
+ .find('a:eq(0)')
+ .prepend('<span class="ui-icon '+o.icons[j].icon + '"></span>');
+ }
+ }
+ }
+
}
//add corners to top and bottom menu items
@@ -309,11 +325,13 @@
//toggle any class brought in from option
var currentOptionClasses = this.newelement.data('optionClasses') ?
this.newelement.data('optionClasses') : "";
var newOptionClasses =
this.list.find('li.ui-selectmenu-item-selected').data('optionClasses') ?
this.list.find('li.ui-selectmenu-item-selected').data('optionClasses') : "";
+
this.newelement
.removeClass(currentOptionClasses)
.data('optionClasses', newOptionClasses)
.addClass( newOptionClasses )
- .find('.ui-selectmenu-status').html(
this.list.find('li').eq(this._selectedIndex()).find('a').html() );
+ .find('.ui-selectmenu-status')
+ .html( this.list.find('li').eq(this._selectedIndex()).find('a').html() );
},
_refreshPosition: function(offsetTop, offsetLeft){
@@ -356,6 +374,7 @@
width: null, //defaults to select width
menuWidth: null, //sets menu body separately. number value or 'widest'
handleWidth: 26, //width self the icon arrow block will hang off the
edge in a 'popup' style menu
+ icons: null, //array of object with "el" and "icon" properties. "el" is
a jQuery selector, "icon" is a jQuery UI framework icon class
("ui-icon-script")
format: null //array of objects with find and rep properties. Each will
run in order and perform find/replace formatting.
//for example: format: [{find:/^([a-zA-Z0-9 ]+)\-/g, rep: '<span
class="header">$1</span>'}
}