r2730 - added demo with custom icons
Author: scottjehl
Date: Fri Jun 12 10:19:06 2009
New Revision: 2730
Added:
branches/labs/selectmenu/sample_icons/
branches/labs/selectmenu/sample_icons/24-podcast-square.png (contents,
props changed)
branches/labs/selectmenu/sample_icons/24-rss-square.png (contents,
props changed)
branches/labs/selectmenu/sample_icons/24-video-square.png (contents,
props changed)
Modified:
branches/labs/selectmenu/index.html
Log:
added demo with custom icons
Modified: branches/labs/selectmenu/index.html
==============================================================================
--- branches/labs/selectmenu/index.html (original)
+++ branches/labs/selectmenu/index.html Fri Jun 12 10:19:06 2009
@@ -14,6 +14,15 @@
fieldset { border:0; margin-bottom: 40px;}
label,select,.ui-select-menu { float: left; margin-right: 10px; }
select { width: 200px; }
+
+ /*select with custom icons*/
+ .video, .podcast, .rss { line-height: 3em; }
+
.video .ui-selectmenu-item-icon, .podcast .ui-selectmenu-item-icon, .rss .ui-selectmenu-item-icon
{ height: 24px; width: 24px; }
+ .video .ui-selectmenu-item-icon { background:
url(sample_icons/24-video-square.png) 0 0 no-repeat; }
+ .podcast .ui-selectmenu-item-icon { background:
url(sample_icons/24-podcast-square.png) 0 0 no-repeat; }
+ .rss .ui-selectmenu-item-icon { background:
url(sample_icons/24-rss-square.png) 0 0 no-repeat; }
+
+
</style>
<script type="text/javascript">
@@ -37,8 +46,16 @@
$('select#files').selectmenu({
icons: [
- {el: '.script', icon: 'ui-icon-script'},
- {el: '.image', icon: 'ui-icon-image'}
+ {find: '.script', icon: 'ui-icon-script'},
+ {find: '.image', icon: 'ui-icon-image'}
+ ]
+ });
+
+ $('select#filesB').selectmenu({
+ icons: [
+ {find: '.video'},
+ {find: '.podcast'},
+ {find: '.rss'}
]
});
@@ -106,7 +123,7 @@
</select>
</fieldset>
- <h2>Default: "popup" Style with icon options</h2>
+ <h2>Default: "popup" Style with framework icons</h2>
<fieldset>
<label for="files">Select a File:</label>
<select name="files" id="files">
@@ -115,6 +132,16 @@
<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>
Added: branches/labs/selectmenu/sample_icons/24-podcast-square.png
==============================================================================
Binary file. No diff available.
Added: branches/labs/selectmenu/sample_icons/24-rss-square.png
==============================================================================
Binary file. No diff available.
Added: branches/labs/selectmenu/sample_icons/24-video-square.png
==============================================================================
Binary file. No diff available.