forked from will-v-king/jQuery-Skinner
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
183 lines (173 loc) · 7.77 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Skinner</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; background: #ededed; margin:25px;}
.cl{float:none; clear:both;}
.fl{float:left;}
.fr{float:right;}
.example{ margin:25px auto; padding:15px; border:1px solid #fff;background:#f4f4f4; box-shadow:0 0 8px #666; -webkit-box-shadow:0 0 8px #666; -moz-box-shadow:0 0 8px #666;}
.code{ margin:25px auto; padding:15px; border:1px solid #333; background:#141414; box-shadow:0 0 8px #666; -webkit-box-shadow:0 0 8px #666; -moz-box-shadow:0 0 8px #666; color:#f8f8f8; font-size:11px;}
.code strong{ font-weight:normal; color:#f9ee98}
.code span{color:#8f9d6a;}
.code span.tag{color:#cda869}
.code span.bool{color:#b4431f}
p span{color :#666; font-size:10px;}
.release{ font-style: italic}
.release span{ color: #333;}
</style>
<!-- load style -->
<link href="css/jquery-skinner.css" rel="stylesheet" />
<!-- load script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery-scrollable.js" type="text/javascript"></script>
<script src="js/jquery-skinner.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.select1').skinner({'width':'200px','maxitem':'4'});
$('.select2').skinner({'type':'left','width':'150px','maxitem':false});
$('.select3').skinner({'type':'right','width':'100px'});
$('.select4').skinner({'type':'left','width':'50px','textwrap':true});
$('.select5').skinner({'type':'right'});
$('.select6').each(function(){
var $this = $(this);
$this.skinner({'type':$this.css("float"),'maxitem':'20'
,'minWidth':($this.css('min-width')||"40px")
,'mode': ($this.hasClass('pureText')?'pureText':'select')
,'valueNullable': ($this.hasClass('valueNullable')?true:false)
,'placeHolder':'請選擇' // please select
});
});
});
</script>
</head>
<body>
<h1><a href="http://plugins.jquery.com/project/skinner" title="jQuery Skinner 1.1">Skinner</a></h1>
<h2>A Plugin for jQuery to customize your combo box. (<select>)</h2>
<h3>jquery-skinner.js</h3>
<p>If you find any bug, report it by direct message on twitter. <a href="http://twitter.com/#!/anbi">@anbi</a></p>
<br />
<div class="example">
<select class="select1">
<option>Banana</option>
<option>Cucumber</option>
<option>Strawberry</option>
<option>Hedge apple</option>
<option>Boysenberry</option>
<option>Apple</option>
<option>Pomegranate tree</option>
</select>
<div class="cl"></div>
<br />
<br />
<br />
<select class="select2">
<option>Banana</option>
<option>Cucumber</option>
<option>Strawberry</option>
<option>Hedge apple</option>
<option>Boysenberry</option>
<option>Apple</option>
<option>Pomegranate tree</option>
</select>
<select class="select3">
<option>Banana</option>
<option>Cucumber</option>
<option>Strawberry</option>
<option>Hedge apple</option>
<option>Boysenberry</option>
<option>Apple</option>
<option>Pomegranate tree</option>
</select>
<div class="cl"></div>
<br />
<br />
<br />
<select class="select4">
<option>Banana</option>
<option>Cucumber</option>
<option>Strawberry</option>
<option>Hedge apple</option>
<option>Boysenberry</option>
<option>Apple</option>
<option>Pomegranate tree</option>
</select>
<select class="select5">
<option>Banana</option>
<option>Cucumber</option>
<option>Strawberry</option>
<option>Hedge apple</option>
<option>Boysenberry</option>
<option>Apple</option>
<option>Pomegranate tree</option>
</select>
<div class="cl"></div>
<br />
<br />
<br />
<select class="select6 valueNullable pureText" style="min-width:80px;">
<option>Banana</option>
<option>Cucumber</option>
<option>Strawberry</option>
<option>Hedge apple</option>
<option>Boysenberry</option>
<option>Apple</option>
<option>Pomegranate tree</option>
</select>
<div class="cl"></div>
</div>
<div class="code">
<pre>
<span class="tag"><script src=<span>"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span> type=<span>"text/javascript"</span>></script>
<script src=<span>"js/jquery-skinner.js"</span> type=<span>"text/javascript"</span>></script>
<script type=<span>"text/javascript"</span>></span>
$(<strong>function</strong>(){
$(<span>'.select1'</span>).skinner({<span>'width'</span>:<span>'200px'</span>,<span>'maxitem'</span>:<span>'4'</span>});
$(<span>'.select2'</span>).skinner({<span>'type'</span>:<span>'left'</span>,<span>'width'</span>:<span>'150px'</span>,<span>'maxitem'</span>:<span class="bool">false</span>});
$(<span>'.select3'</span>).skinner({<span>'type'</span>:<span>'right'</span>,<span>'width'</span>:<span>'100px'</span>});
$(<span>'.select4'</span>).skinner({<span>'type'</span>:<span>'left'</span>,<span>'width'</span>:<span>'50px'</span>,<span>'textwrap'</span>:<span class="bool">true</span>});
$(<span>'.select5'</span>).skinner({<span>'type'</span>:<span>'right'</span>});
$(<span>'.select6'</span>).each(function(){
var $this = $(this);
$this.skinner({<span>'type'</span>:$this.css("float"),<span>'maxitem'</span>:<span>'20'</span>
,<span>'minWidth'</span>:($this.css(<span>'min-width'</span>)||<span>'40px'</span>)
,<span>'mode'</span>: ($this.hasClass(<span>'pureText'</span>)?<span>'pureText'</span>:<span>'select'</span>)
,<span>'valueNullable'</span>: ($this.hasClass(<span>'valueNullable'</span>)?'true'</span>:<span>'false'</span>)
,<span>'placeHolder'</span>:<span>'請選擇'</span> // please select
});
});
});
<span class="tag"></script></span>
</pre>
</div>
<h2>Changelog:</h2>
<ul class="release">
<li><strong>v 1.3.5</strong> improve the drop down container's drop behaviour logical;
aded disabled option;
added events:beforeClickItem/whenClickItem/afterClickItem</li>
<li><strong></strong>v 1.3.1</strong> speed up the rendering process.
update the perfermance and the logic about the dropdown direction.
change only trigger when value changed.
support select's unchange event.
</li>
<li><strong>v 1.3.0</strong> added placeHolder; added valueNullable; Fixed Variable Scope Bug;
Improved the function usage (_li_click,_apply_max_item is added
, checkSelect has been changed to _init_li);
added dorpdownlist auto hide logic;</li>
<li><strong>v 1.2.2</strong> add a ' pure text ' visual mode</li>
<li><strong>v 1.2.1</strong> add supports for setting the min-width attribute of the text of the select and its dropdown-list</li>
<li><strong>v 1.2</strong> added max item to show option</li>
<li><strong>v 1.1</strong> added text wrap option</li>
<li><strong>v 1.0</strong> first relase</li>
</ul>
<br />
<h2>Credits:</h2>
<ul class="release">
<li><span>Author</span>: Andrea (anbi) Bianchin</li>
<li><span>Twitter</span>: <a href="http://twitter.com/#!/anbi">@anbi</a></li>
<li><span>Homesite</span>: <a href="http://www.andreabianchin.it#projects" title="Andrea (anbi) Bianchin's homesite">www.andreabianchin.it</a></li>
</ul>
</body>
</html>