summaryrefslogtreecommitdiffstats
path: root/demos/selectmenu
diff options
context:
space:
mode:
authorFelix Nagel <info@felixnagel.com>2010-11-10 19:57:34 +0100
committerFelix Nagel <info@felixnagel.com>2010-11-10 19:57:34 +0100
commit226b659c4012d7f145f12da0568d8a2c8cc24412 (patch)
treeb41ba0baf8ef6051d6ac0c45373cd86b3beb5db5 /demos/selectmenu
parenta4240f751ceaf36441667f2d9da55cdce7952cef (diff)
downloadjquery-ui-226b659c4012d7f145f12da0568d8a2c8cc24412.tar.gz
jquery-ui-226b659c4012d7f145f12da0568d8a2c8cc24412.zip
fixed: updated demo files
Diffstat (limited to 'demos/selectmenu')
-rw-r--r--demos/selectmenu/background_image.html51
-rw-r--r--demos/selectmenu/default.html79
2 files changed, 53 insertions, 77 deletions
diff --git a/demos/selectmenu/background_image.html b/demos/selectmenu/background_image.html
index 84024e297..92a9e3909 100644
--- a/demos/selectmenu/background_image.html
+++ b/demos/selectmenu/background_image.html
@@ -14,22 +14,45 @@
<script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>
<style type="text/css">
- /*demo styles*/
+ /* demo styles */
body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
fieldset { border:0; }
label,select,.ui-select-menu { float: left; margin-right: 10px; }
select { width: 200px; }
- /*select with CSS avatar icons*/
+ /* 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; }
+
+ /* select with CSS avatar icons */
option.css-avatar { background-repeat: no-repeat !important; padding-left: 20px;}
- /*select with big avatar icons*/
+ /* select with big avatar icons */
a.avatar-big { height: 5em; }
.avatar-big .ui-selectmenu-item-icon { height: 50px; width: 50px; }
.ui-selectmenu-menu li.avatar-big a, a.avatar-big span.ui-selectmenu-status { padding-left: 5em !important; height: 50px; }
</style>
<script type="text/javascript">
$(function(){
+ $('select#files').selectmenu({
+ icons: [
+ {find: '.script', icon: 'ui-icon-script'},
+ {find: '.image', icon: 'ui-icon-image'}
+ ]
+ });
+
+ $('select#filesB').selectmenu({
+ icons: [
+ {find: '.video'},
+ {find: '.podcast'},
+ {find: '.rss'}
+ ]
+ });
+
$('select#peopleA').selectmenu({
style:'dropdown',
icons: [
@@ -82,6 +105,28 @@
</head>
<body>
<form action="#">
+ <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>"dropdown" Style with custom avatar 16x16 images</h2>
<fieldset>
<label for="peopleA">Select a Person:</label>
diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html
index 3330417d8..210bcb2d6 100644
--- a/demos/selectmenu/default.html
+++ b/demos/selectmenu/default.html
@@ -14,28 +14,16 @@
<script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>
<style type="text/css">
- /*demo styles*/
+ /* demo styles */
body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
fieldset { border:0; }
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; }
-
-
+ select { width: 200px; }
</style>
<script type="text/javascript">
$(function(){
$('select#speedA').selectmenu();
- $('#withoutID select').selectmenu();
-
$('select#speedAa').selectmenu({maxHeight: 150});
$('select#speedB').selectmenu({
@@ -51,20 +39,7 @@
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'}
- ]
- });
+ $('select#filesC').selectmenu();
});
//a custom format option callback
@@ -102,24 +77,6 @@
</select>
</fieldset>
- <h2>Default: without ID</h2>
- <fieldset id="withoutID">
- <select>
- <option value="Slower" selected="selected">Slower</option>
- <option value="Slow">Slow</option>
- <option value="Medium">Medium</option>
- <option value="Fast">Fast</option>
- <option value="Faster">Faster</option>
- </select>
- <select>
- <option value="Slower" selected="selected">Slower</option>
- <option value="Slow">Slow</option>
- <option value="Medium">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>
@@ -176,39 +133,13 @@
</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>
+ <option value="jquery">jQuery.js</option>
+ <option value="jqueryui">ui.jQuery.js</option>
</optgroup>
<optgroup label="Label with space">
<option value="somefile">Some unknown file</option>
generated by cgit v1.2.3 (git 2.39.1) at 2025-02-09 11:04:29 +0000