]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a4240f7)
fixed: updated demo files
authorFelix Nagel <info@felixnagel.com>
Wed, 10 Nov 2010 18:57:34 +0000 (19:57 +0100)
committerFelix Nagel <info@felixnagel.com>
Wed, 10 Nov 2010 18:57:34 +0000 (19:57 +0100)
demos/selectmenu/background_image.html patch | blob | history
demos/selectmenu/default.html patch | blob | history

diff --git a/demos/selectmenu/background_image.html b/demos/selectmenu/background_image.html
index 84024e2974c521982e8a9c7c9b4ff66f1cb56cec..92a9e3909e95004f09571681e01eefba66ef52de 100644 (file)
--- 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 3330417d8aa6941baedc9dbcee7ea77eecb59aae..210bcb2d69d4edb8cc3a8bd8741e8c9905f45735 100644 (file)
--- 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>
The official jQuery user interface library: https://github.com/jquery/jquery-ui