@@ -25,197 +25,10 @@ Include **jQuery Selectric:**
25
25
<script src =" js/jquery.selectric.min.js" ></script >
26
26
```
27
27
28
- Put styles in your CSS and change it to your taste : D
29
-
30
- ``` css
31
- /* ======================================
32
- Selectric
33
- ======================================*/
34
- .selectricWrapper {
35
- position : relative ;
36
- cursor : pointer ;
37
- }
38
-
39
- .selectricResponsive {
40
- width : 100% ;
41
- }
42
-
43
- .selectric {
44
- border : 1px solid #DDD ;
45
- background : #F8F8F8 ;
46
- position : relative ;
47
- }
48
- .selectric .label {
49
- display : block ;
50
- white-space : nowrap ;
51
- overflow : hidden ;
52
- text-overflow : ellipsis ;
53
- margin : 0 38px 0 10px ;
54
- font-size : 12px ;
55
- line-height : 38px ;
56
- color : #444 ;
57
- height : 38px ;
58
- }
59
- .selectric .button {
60
- display : block ;
61
- position : absolute ;
62
- right : 0 ;
63
- top : 0 ;
64
- width : 38px ;
65
- height : 38px ;
66
- color : #BBB ;
67
- text-align : center ;
68
- font : 0 /0 a;
69
- *font : 20px /38px Lucida Sans Unicode, Arial Unicode MS, Arial ;
70
- }
71
- .selectric .button :after {
72
- content : " " ;
73
- position : absolute ;
74
- top : 0 ;
75
- right : 0 ;
76
- bottom : 0 ;
77
- left : 0 ;
78
- margin : auto ;
79
- width : 0 ;
80
- height : 0 ;
81
- border : 4px solid transparent ;
82
- border-top-color : #BBB ;
83
- border-bottom : none ;
84
- }
85
-
86
- .selectricHover .selectric {
87
- border-color : #C4C4C4 ;
88
- }
89
- .selectricHover .selectric .button {
90
- color : #A2A2A2 ;
91
- }
28
+ Include ** jQuery Selectric:** styles, and change it to your taste : D
92
29
93
- .selectricOpen {
94
- z-index : 9999 ;
95
- }
96
- .selectricOpen .selectric {
97
- border-color : #C4C4C4 ;
98
- }
99
- .selectricOpen .selectricItems {
100
- display : block ;
101
- }
102
-
103
- .selectricDisabled {
104
- filter : alpha (opacity=50 );
105
- opacity : 0.5 ;
106
- cursor : default ;
107
- -webkit-user-select : none ;
108
- -moz-user-select : none ;
109
- -ms-user-select : none ;
110
- user-select : none ;
111
- }
112
-
113
- .selectricHideSelect {
114
- position : relative ;
115
- overflow : hidden ;
116
- width : 0 ;
117
- height : 0 ;
118
- }
119
- .selectricHideSelect select {
120
- position : absolute ;
121
- left : -100% ;
122
- display : none ;
123
- }
124
-
125
- .selectricInput {
126
- position : absolute !important ;
127
- top : 0 !important ;
128
- left : 0 !important ;
129
- overflow : hidden !important ;
130
- clip : rect (0 , 0 , 0 , 0 ) !important ;
131
- margin : 0 !important ;
132
- padding : 0 !important ;
133
- width : 1px !important ;
134
- height : 1px !important ;
135
- outline : none !important ;
136
- border : none !important ;
137
- *font : 0 /0 a !important ;
138
- background : none !important ;
139
- }
140
-
141
- .selectricTempShow {
142
- position : absolute !important ;
143
- visibility : hidden !important ;
144
- display : block !important ;
145
- }
146
-
147
- /* Items box */
148
- .selectricItems {
149
- display : none ;
150
- position : absolute ;
151
- top : 100% ;
152
- left : 0 ;
153
- background : #F8F8F8 ;
154
- border : 1px solid #C4C4C4 ;
155
- z-index : -1 ;
156
- box-shadow : 0 0 10px -6px ;
157
- }
158
- .selectricItems .selectricScroll {
159
- height : 100% ;
160
- overflow : auto ;
161
- }
162
- .selectricAbove .selectricItems {
163
- top : auto ;
164
- bottom : 100% ;
165
- }
166
- .selectricItems ul , .selectricItems li {
167
- list-style : none ;
168
- padding : 0 ;
169
- margin : 0 ;
170
- font-size : 12px ;
171
- line-height : 20px ;
172
- min-height : 20px ;
173
- }
174
- .selectricItems li {
175
- display : block ;
176
- padding : 8px ;
177
- border-top : 1px solid #FFF ;
178
- border-bottom : 1px solid #EEE ;
179
- color : #666 ;
180
- cursor : pointer ;
181
- }
182
- .selectricItems li .selected {
183
- background : #EFEFEF ;
184
- color : #444 ;
185
- }
186
- .selectricItems li :hover {
187
- background : #F0F0F0 ;
188
- color : #444 ;
189
- }
190
- .selectricItems .disabled {
191
- filter : alpha (opacity=50 );
192
- opacity : 0.5 ;
193
- cursor : default !important ;
194
- background : none !important ;
195
- color : #666 !important ;
196
- -webkit-user-select : none ;
197
- -moz-user-select : none ;
198
- -ms-user-select : none ;
199
- user-select : none ;
200
- }
201
- .selectricItems .selectricGroup .selectricGroupLabel {
202
- font-weight : bold ;
203
- padding-left : 10px ;
204
- cursor : default ;
205
- -webkit-user-select : none ;
206
- -moz-user-select : none ;
207
- -ms-user-select : none ;
208
- user-select : none ;
209
- background : none ;
210
- color : #444 ;
211
- }
212
- .selectricItems .selectricGroup.disabled li {
213
- filter : alpha (opacity=100 );
214
- opacity : 1 ;
215
- }
216
- .selectricItems .selectricGroup li {
217
- padding-left : 25px ;
218
- }
30
+ ``` html
31
+ <link rel =" stylesheet" href =" selectric.css" >
219
32
```
220
33
221
34
Initialize ** jQuery Selectric:**
@@ -230,6 +43,13 @@ $(function(){
230
43
231
44
##Options:
232
45
46
+ You can pass an options object as the first parameter when you call the plugin. For example:
47
+ ``` js
48
+ $ (' select' ).selectric ({
49
+ maxHeight: 200
50
+ });
51
+ ```
52
+
233
53
``` js
234
54
{
235
55
/*
@@ -305,7 +125,7 @@ $(function(){
305
125
* Type: String [HTML]
306
126
* Description: Markup for open options button
307
127
*/
308
- arrowButtonMarkup: ' < b class=" button">& #x25be;</b> ' ,
128
+ arrowButtonMarkup: ' < b class=" button">& #x25be;</b> ' ,
309
129
310
130
/*
311
131
* Type: Boolean
@@ -353,7 +173,7 @@ $(function(){
353
173
354
174
/*
355
175
* Type: String or Function
356
- * Description: Define how each option should be rendered inside its <li> element.
176
+ * Description: Define how each option should be rendered inside its <li> element.
357
177
*
358
178
* If it's a string, all keys wrapped in brackets will be replaced by
359
179
* the respective values in itemData. Available keys are:
@@ -455,7 +275,6 @@ $.fn.selectric.hooks.add('callbackName', 'hookName', function(element, data) {})
455
275
$ .fn .selectric .hooks .remove (' callbackName' , ' hookName' );
456
276
```
457
277
458
-
459
278
##Public methods:
460
279
461
280
``` js
0 commit comments