3
3
< head >
4
4
< meta http-equiv ="content-type " content ="text/html; charset=utf-8 " />
5
5
< title > Demo Page for jQuery UI selectmenu</ title >
6
-
6
+
7
7
< link type ="text/css " href ="../../themes/base/jquery.ui.core.css " rel ="stylesheet " />
8
8
< link type ="text/css " href ="../../themes/base/jquery.ui.theme.css " rel ="stylesheet " />
9
9
< link type ="text/css " href ="../../themes/base/jquery.ui.selectmenu.css " rel ="stylesheet " />
10
10
< script type ="text/javascript " src ="../../jquery-1.8.3.js "> </ script >
11
11
< script type ="text/javascript " src ="../../ui/jquery.ui.core.js "> </ script >
12
12
< script type ="text/javascript " src ="../../ui/jquery.ui.widget.js "> </ script >
13
13
< script type ="text/javascript " src ="../../ui/jquery.ui.position.js "> </ script >
14
-
14
+
15
15
< script type ="text/javascript " src ="../../ui/jquery.ui.selectmenu.js "> </ script >
16
16
17
17
< style type ="text/css ">
18
18
/* demo styles */
19
19
body {font-size : 62.5% ; font-family : "Verdana" , sans-serif; }
20
- fieldset { border : 0 ; }
20
+ fieldset { border : 0 ; }
21
21
label , select , .ui-select-menu { float : left; margin-right : 10px ; }
22
22
select { width : 250px ; }
23
23
.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
+
27
27
/* select with custom icons */
28
28
body a .customicons { height : 2.8em ;}
29
29
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 ; }
31
31
body a .video { height : 2.7em ; }
32
32
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 ; }
33
33
body .video .ui-selectmenu-item-icon { background : url (images/24-video-square.png) 0 0 no-repeat; }
34
34
body .podcast .ui-selectmenu-item-icon { background : url (images/24-podcast-square.png) 0 0 no-repeat; }
35
35
body .rss .ui-selectmenu-item-icon { background : url (images/24-rss-square.png) 0 0 no-repeat; }
36
-
36
+
37
37
/* select with CSS avatar icons */
38
38
option .css-avatar { background-repeat : no-repeat !important ; padding-left : 20px ; }
39
-
39
+
40
40
/* select with big avatar icons */
41
41
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 ; }
43
43
.ui-selectmenu-menu li .avatar-big a , a .avatar-big span .ui-selectmenu-status { padding-left : 5em !important ; height : 50px ; }
44
44
</ style >
45
- < script type ="text/javascript ">
45
+ < script type ="text/javascript ">
46
46
$ ( function ( ) {
47
47
$ ( 'select#files' ) . selectmenu ( {
48
- style :'popup' ,
48
+ style :'popup' ,
49
49
icons : [
50
50
{ find : '.script' , icon : 'ui-icon-script' } ,
51
51
{ find : '.image' , icon : 'ui-icon-image' }
52
52
]
53
- } ) ;
54
-
53
+ } ) ;
54
+
55
55
$ ( 'select#filesB' ) . selectmenu ( {
56
- style :'popup' ,
56
+ style :'popup' ,
57
57
icons : [
58
58
{ find : '.video' } ,
59
59
{ find : '.podcast' } ,
60
60
{ find : '.rss' }
61
61
]
62
- } ) ;
63
-
62
+ } ) ;
63
+
64
64
$ ( 'select#peopleA' ) . selectmenu ( {
65
65
icons : [
66
66
{ find : '.avatar' }
89
89
menuWidth : "300px"
90
90
} ) ;
91
91
} ) ;
92
-
92
+
93
93
//a custom format option callback
94
94
var addressFormatting = function ( text ) {
95
95
var newText = text ;
101
101
{ find :/ ( [ ^ \| > < \( \) ] + ) $ / g, rep : '<span class="ui-selectmenu-item-content">$1</span>' } ,
102
102
{ find :/ ( \( [ ^ \| > < ] + \) ) $ / g, rep : '<span class="ui-selectmenu-item-footer">$1</span>' }
103
103
] ;
104
-
104
+
105
105
for ( var i in findreps ) {
106
106
newText = newText . replace ( findreps [ i ] . find , findreps [ i ] . rep ) ;
107
107
}
108
108
return newText ;
109
- }
109
+ }
110
110
</ script >
111
111
</ head >
112
112
< body >
@@ -130,8 +130,8 @@ <h2>Default: "popup" Style with custom icon images</h2>
130
130
< option value ="myvideo " class ="video "> Scott Gonzales Video</ option >
131
131
< option value ="myrss " class ="rss "> jQuery RSS XML</ option >
132
132
</ select >
133
- </ fieldset >
134
-
133
+ </ fieldset >
134
+
135
135
< h2 > "dropdown" Style with custom avatar 16x16 images</ h2 >
136
136
< fieldset >
137
137
< label for ="peopleA "> Select a Person:</ label >
@@ -141,7 +141,7 @@ <h2>"dropdown" Style with custom avatar 16x16 images</h2>
141
141
< option value ="3 " class ="avatar " title ="http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=16 "> Jane Doe</ option >
142
142
</ select >
143
143
</ fieldset >
144
-
144
+
145
145
< h2 > "dropdown" Style with custom avatar 16x16 images as CSS background</ h2 >
146
146
< fieldset >
147
147
< label for ="peopleB "> Select a Person:</ label >
@@ -151,7 +151,7 @@ <h2>"dropdown" Style with custom avatar 16x16 images as CSS background</h2>
151
151
< 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 >
152
152
</ select >
153
153
</ fieldset >
154
-
154
+
155
155
< h2 > "dropdown" Style with custom avatar 50x50 images</ h2 >
156
156
< fieldset >
157
157
< label for ="peopleC "> Select an Address:</ label >
0 commit comments