33 < head >
44 < meta http-equiv ="content-type " content ="text/html; charset=utf-8 " />
55 < title > Demo Page for jQuery UI selectmenu</ title >
6-
6+
77 < link type ="text/css " href ="../../themes/base/jquery.ui.core.css " rel ="stylesheet " />
88 < link type ="text/css " href ="../../themes/base/jquery.ui.theme.css " rel ="stylesheet " />
99 < link type ="text/css " href ="../../themes/base/jquery.ui.selectmenu.css " rel ="stylesheet " />
1010 < script type ="text/javascript " src ="../../jquery-1.8.3.js "> </ script >
1111 < script type ="text/javascript " src ="../../ui/jquery.ui.core.js "> </ script >
1212 < script type ="text/javascript " src ="../../ui/jquery.ui.widget.js "> </ script >
1313 < script type ="text/javascript " src ="../../ui/jquery.ui.position.js "> </ script >
14-
14+
1515 < script type ="text/javascript " src ="../../ui/jquery.ui.selectmenu.js "> </ script >
1616
1717 < style type ="text/css ">
1818 /* demo styles */
1919 body {font-size : 62.5% ; font-family : "Verdana" , sans-serif; }
20- fieldset { border : 0 ; }
20+ fieldset { border : 0 ; }
2121 label , select , .ui-select-menu { float : left; margin-right : 10px ; }
2222 select { width : 250px ; }
2323 .ui-selectmenu-menu li a , .ui-selectmenu-status { padding : 0.3em 2em ; }
24-
25- .avatar-big .ui-selectmenu-item-icon , .css-avatar .ui-selectmenu-item-icon , .avatar .ui-selectmenu-item-icon { background-position : 0 0 ; }
26-
24+
25+ .avatar-big .ui-selectmenu-item-icon , .css-avatar .ui-selectmenu-item-icon , .avatar .ui-selectmenu-item-icon { background-position : 0 0 ; }
26+
2727 /* select with custom icons */
2828 body a .customicons { height : 2.8em ;}
2929 body .customicons li a , body a .customicons span .ui-selectmenu-status { line-height : 2em ; padding-left : 30px !important ; }
30- body .video .ui-selectmenu-item-icon , body .podcast .ui-selectmenu-item-icon , body .rss .ui-selectmenu-item-icon { height : 24px ; width : 24px ; }
30+ body .video .ui-selectmenu-item-icon , body .podcast .ui-selectmenu-item-icon , body .rss .ui-selectmenu-item-icon { height : 24px ; width : 24px ; }
3131 body a .video { height : 2.7em ; }
3232 body li .video .ui-selectmenu-hasIcon a , body li .podcast .ui-selectmenu-hasIcon a , body li .rss .ui-selectmenu-hasIcon a , body .video .ui-selectmenu-status { padding : 7px 0 7px 30px ; }
3333 body .video .ui-selectmenu-item-icon { background : url (images/24-video-square.png) 0 0 no-repeat; }
3434 body .podcast .ui-selectmenu-item-icon { background : url (images/24-podcast-square.png) 0 0 no-repeat; }
3535 body .rss .ui-selectmenu-item-icon { background : url (images/24-rss-square.png) 0 0 no-repeat; }
36-
36+
3737 /* select with CSS avatar icons */
3838 option .css-avatar { background-repeat : no-repeat !important ; padding-left : 20px ; }
39-
39+
4040 /* select with big avatar icons */
4141 a .avatar-big { height : 5em ; }
42- .avatar-big .ui-selectmenu-item-icon { height : 50px ; width : 50px ; }
42+ .avatar-big .ui-selectmenu-item-icon { height : 50px ; width : 50px ; }
4343 .ui-selectmenu-menu li .avatar-big a , a .avatar-big span .ui-selectmenu-status { padding-left : 5em !important ; height : 50px ; }
4444 </ style >
45- < script type ="text/javascript ">
45+ < script type ="text/javascript ">
4646 $ ( function ( ) {
4747 $ ( 'select#files' ) . selectmenu ( {
48- style :'popup' ,
48+ style :'popup' ,
4949 icons : [
5050 { find : '.script' , icon : 'ui-icon-script' } ,
5151 { find : '.image' , icon : 'ui-icon-image' }
5252 ]
53- } ) ;
54-
53+ } ) ;
54+
5555 $ ( 'select#filesB' ) . selectmenu ( {
56- style :'popup' ,
56+ style :'popup' ,
5757 icons : [
5858 { find : '.video' } ,
5959 { find : '.podcast' } ,
6060 { find : '.rss' }
6161 ]
62- } ) ;
63-
62+ } ) ;
63+
6464 $ ( 'select#peopleA' ) . selectmenu ( {
6565 icons : [
6666 { find : '.avatar' }
8989 menuWidth : "300px"
9090 } ) ;
9191 } ) ;
92-
92+
9393 //a custom format option callback
9494 var addressFormatting = function ( text ) {
9595 var newText = text ;
101101 { find :/ ( [ ^ \| > < \( \) ] + ) $ / g, rep : '<span class="ui-selectmenu-item-content">$1</span>' } ,
102102 { find :/ ( \( [ ^ \| > < ] + \) ) $ / g, rep : '<span class="ui-selectmenu-item-footer">$1</span>' }
103103 ] ;
104-
104+
105105 for ( var i in findreps ) {
106106 newText = newText . replace ( findreps [ i ] . find , findreps [ i ] . rep ) ;
107107 }
108108 return newText ;
109- }
109+ }
110110 </ script >
111111</ head >
112112< body >
@@ -130,8 +130,8 @@ <h2>Default: "popup" Style with custom icon images</h2>
130130 < option value ="myvideo " class ="video "> Scott Gonzales Video</ option >
131131 < option value ="myrss " class ="rss "> jQuery RSS XML</ option >
132132 </ select >
133- </ fieldset >
134-
133+ </ fieldset >
134+
135135 < h2 > "dropdown" Style with custom avatar 16x16 images</ h2 >
136136 < fieldset >
137137 < label for ="peopleA "> Select a Person:</ label >
@@ -141,7 +141,7 @@ <h2>"dropdown" Style with custom avatar 16x16 images</h2>
141141 < option value ="3 " class ="avatar " title ="http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=16 "> Jane Doe</ option >
142142 </ select >
143143 </ fieldset >
144-
144+
145145 < h2 > "dropdown" Style with custom avatar 16x16 images as CSS background</ h2 >
146146 < fieldset >
147147 < label for ="peopleB "> Select a Person:</ label >
@@ -151,7 +151,7 @@ <h2>"dropdown" Style with custom avatar 16x16 images as CSS background</h2>
151151 < option value ="3 " class ="css-avatar " style ="background-image: url(http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=16); "> Jane Doe</ option >
152152 </ select >
153153 </ fieldset >
154-
154+
155155 < h2 > "dropdown" Style with custom avatar 50x50 images</ h2 >
156156 < fieldset >
157157 < label for ="peopleC "> Select an Address:</ label >
0 commit comments