Skip to content

Commit 245cebb

Browse files
brianreavisbrianreavis
committed
Added "dropdown_header" plugin.
1 parent 276877d commit 245cebb

File tree

7 files changed

+300
-10
lines changed

7 files changed

+300
-10
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
.DS_Store
1+
.DS_Store
2+
*.log

‎examples/images/[email protected]

6.03 KB
Loading

‎examples/plugins.html

+225
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,199 @@
1717
<script src="_jqueryui.js"></script>
1818
<script src="../selectize.js"></script>
1919
<script src="_demos.js"></script>
20+
<style type="text/css">
21+
/* common */
22+
.selectize-control.demo-code-language,
23+
.selectize-control.demo-code-language .selectize-input,
24+
.selectize-control.demo-code-language .selectize-dropdown,
25+
.selectize-control.demo-code-language input {
26+
font-family: arial, sans-serif !important;
27+
font-weight: bold !important;
28+
font-size: 13px !important;
29+
}
30+
.selectize-control.demo-code-language .selectize-input {
31+
color: #333 !important;
32+
-webkit-border-radius: 3px !important;
33+
-moz-border-radius: 3px !important;
34+
border-radius: 3px !important;
35+
}
36+
.selectize-control.demo-code-language .selectize-input [data-value]::before {
37+
content: 'Language: ';
38+
font-weight: normal;
39+
color: #808080;
40+
}
41+
.selectize-control.demo-code-language input::-webkit-input-placeholder { font-weight: normal; }
42+
.selectize-control.demo-code-language input:-moz-placeholder { font-weight: normal; }
43+
.selectize-control.demo-code-language input::-moz-placeholder { font-weight: normal; }
44+
.selectize-control.demo-code-language input:-ms-input-placeholder { font-weight: normal; }
45+
46+
.selectize-control.demo-code-language .selectize-dropdown {
47+
margin-top: 10px;
48+
-webkit-border-radius: 4px;
49+
-moz-border-radius: 4px;
50+
border-radius: 4px;
51+
border: 1px solid #c1c1c1;
52+
-webkit-box-shadow: 0 0 13px rgba(0,0,0,0.31);
53+
-moz-box-shadow: 0 0 13px rgba(0,0,0,0.31);
54+
box-shadow: 0 0 13px rgba(0,0,0,0.31);
55+
}
56+
.selectize-control.demo-code-language .selectize-dropdown [data-value] {
57+
border-bottom: 1px solid #eee;
58+
color: #666666;
59+
font-weight: normal;
60+
padding-left: 30px;
61+
position: relative;
62+
}
63+
.selectize-control.demo-code-language .selectize-dropdown [data-value].selected {
64+
color: #333;
65+
}
66+
.selectize-control.demo-code-language .selectize-dropdown [data-value].active {
67+
background: #3d84c4;
68+
color: #fff;
69+
}
70+
.selectize-control.demo-code-language .selectize-dropdown [data-value].selected::before,
71+
.selectize-control.demo-code-language .selectize-dropdown [data-value].active::before {
72+
content: ' ';
73+
display: block;
74+
position: absolute;
75+
top: 50%;
76+
left: 10px;
77+
width: 12px;
78+
height: 10px;
79+
margin: -5px 0 0 0;
80+
background: url(images/[email protected]) 0 0;
81+
background-size: 12px 20px;
82+
}
83+
.selectize-control.demo-code-language .selectize-dropdown [data-value].active::before,
84+
.selectize-control.demo-code-language .selectize-dropdown [data-value].selected.active::before {
85+
background-position: 0 -10px;
86+
}
87+
.selectize-control.demo-code-language .selectize-dropdown [data-value]:last-child {
88+
border-bottom: 0 none;
89+
}
90+
91+
/* multiple language select */
92+
.selectize-control.demo-code-language.multi .selectize-input [data-value] {
93+
color: #333;
94+
padding: 2px 7px;
95+
text-shadow: 0 1px 0 rgba(255,255,255,0.9);
96+
background-color: #FCFAF8;
97+
background-image: -moz-linear-gradient(#FCFAF8, #F3F0ED);
98+
background-image: -webkit-linear-gradient(#FCFAF8, #F3F0ED);
99+
background-image: linear-gradient(#FCFAF8, #F3F0ED);
100+
background-repeat: repeat-x;
101+
-webkit-border-radius: 3px !important;
102+
-moz-border-radius: 3px !important;
103+
border-radius: 3px !important;
104+
border: 1px solid #B8B7B5;
105+
border-bottom-color: #C4BFB2;
106+
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
107+
}
108+
.selectize-control.demo-code-language.multi .selectize-input [data-value].active {
109+
border-color: #3775ae;
110+
border-bottom-color: #316ca2;
111+
background-color: #3d84c4;
112+
background-image: -moz-linear-gradient(#4d98db, #3d84c4);
113+
background-image: -webkit-linear-gradient(#4d98db, #3d84c4);
114+
background-image: linear-gradient(#4d98db, #3d84c4);
115+
color: #fff;
116+
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
117+
}
118+
.selectize-control.demo-code-language.multi .selectize-input [data-value].active::before {
119+
color: #a1caf0;
120+
}
121+
.selectize-control.demo-code-language.multi .selectize-input {
122+
padding: 9px 8px 8px;
123+
}
124+
.selectize-control.demo-code-language.multi .selectize-input.has-items {
125+
padding-top: 6px !important;
126+
padding-bottom: 0px !important;
127+
padding-left: 5px !important;
128+
}
129+
130+
/* single language select */
131+
.selectize-control.demo-code-language.single {
132+
width: 180px;
133+
}
134+
.selectize-control.demo-code-language.single .selectize-dropdown {
135+
width: 400px !important;
136+
}
137+
.selectize-control.demo-code-language.single .selectize-input {
138+
padding: 4px 10px;
139+
text-shadow: 0 1px 0 rgba(255,255,255,0.9);
140+
white-space: nowrap;
141+
background-color: #FCFAF8;
142+
background-image: -moz-linear-gradient(#FCFAF8, #F3F0ED);
143+
background-image: -webkit-linear-gradient(#FCFAF8, #F3F0ED);
144+
background-image: linear-gradient(#FCFAF8, #F3F0ED);
145+
background-repeat: repeat-x;
146+
border: 1px solid #B8B7B5;
147+
border-bottom-color: #C4BFB2;
148+
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
149+
}
150+
.selectize-control.demo-code-language.single .selectize-input:hover {
151+
text-decoration: none;
152+
background-color: #F0ECE8;
153+
background-image: -moz-linear-gradient(#F0ECE8, #E7E4E0);
154+
background-image: -webkit-linear-gradient(#F0ECE8, #E7E4E0);
155+
background-image: linear-gradient(#F0ECE8, #E7E4E0);
156+
background-repeat: repeat-x;
157+
border-color: #C2BFBA #C2BFBA #AFADA7;
158+
}
159+
.selectize-control.demo-code-language.single .selectize-input::after {
160+
right: 8px;
161+
}
162+
.selectize-control.demo-code-language.single .selectize-input::before,
163+
.selectize-control.demo-code-language.single .selectize-input.dropdown-active::before {
164+
content: ' ';
165+
position: absolute;
166+
top: 0;
167+
bottom: 0;
168+
left: auto;
169+
width: 0;
170+
right: 25px;
171+
height: auto;
172+
border-right: 1px solid #c2c0bd;
173+
border-left: 1px solid rgba(255,255,255,0.7);
174+
}
175+
.selectize-control.demo-code-language.single .selectize-input.dropdown-active::before {
176+
border-right: 1px solid #b5b5b5 !important;
177+
border-left: 1px solid rgba(255,255,255,0.02) !important;
178+
}
179+
.selectize-control.demo-code-language.single .selectize-input.dropdown-active,
180+
.selectize-control.demo-code-language.single .selectize-input.dropdown-active:hover {
181+
background-color: #E2DFDB;
182+
background-image: none;
183+
border-color: #b5b5b5;
184+
box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
185+
}
186+
187+
.selectize-control.plugin-dropdown_header .selectize-dropdown-header {
188+
color: #666;
189+
padding: 8px 10px;
190+
background-color: #fefefe;
191+
background-image: -moz-linear-gradient(#fefefe, #eee);
192+
background-image: -webkit-linear-gradient(#fefefe, #eee);
193+
background-image: linear-gradient(#fefefe, #eee);
194+
background-repeat: repeat-x;
195+
border-bottom: 1px solid #ddd;
196+
}
197+
.selectize-control.plugin-dropdown_header .selectize-dropdown-header-label {
198+
font-weight: bold;
199+
font-size: 13px !important;
200+
color: #111;
201+
text-shadow: 1px 1px 0 #fff;
202+
}
203+
.selectize-control.plugin-dropdown_header .selectize-dropdown-header-close {
204+
float: right;
205+
font-size: 20px !important;
206+
color: #ccc;
207+
margin-top: 1px;
208+
}
209+
.selectize-control.plugin-dropdown_header .selectize-dropdown-header-close:hover {
210+
color: #aaa;
211+
}
212+
</style>
20213
</head>
21214
<body>
22215
<div id="wrapper">
@@ -87,6 +280,38 @@ <h2>Plugin: "drag_drop"</h2>
87280
});
88281
</script>
89282
</div>
283+
284+
<div class="demo">
285+
<h2>Plugin: "dropdown_header"</h2>
286+
<div class="control-group">
287+
<label for="select-code-language">Single:</label>
288+
<select id="select-code-language" class="demo-code-language" placeholder="Select a language...">
289+
<option value="txt">Text</option>
290+
<option value="md">Markdown</option>
291+
<option value="html">HTML</option>
292+
<option value="php">PHP</option>
293+
<option value="python">Python</option>
294+
<option value="java">Java</option>
295+
<option value="js" selected>JavaScript</option>
296+
<option value="c#">Ruby</option>
297+
<option value="c#">VHDL</option>
298+
<option value="c#">Verilog</option>
299+
<option value="c#">C#</option>
300+
<option value="c++">C/C++</option>
301+
</select>
302+
</div>
303+
<script>
304+
$('.demo-code-language').selectize({
305+
sortField: 'text',
306+
hideSelected: false,
307+
plugins: {
308+
'dropdown_header': {
309+
title: 'Language'
310+
}
311+
}
312+
})
313+
</script>
314+
</div>
90315
</div>
91316
</body>
92317
</html>

‎src/plugins/dropdown_header/plugin.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.selectize-dropdown-header {
2+
padding: 6px 9px;
3+
-moz-border-radius: 3px 3px 0 0;
4+
-webkit-border-radius: 3px 3px 0 0;
5+
border-radius: 3px 3px 0 0;
6+
}
7+
.selectize-dropdown-header-close {
8+
float: right;
9+
color: #ddd;
10+
font-size: 20px !important;
11+
}
12+
.selectize-dropdown-header-close:hover {
13+
color: #aaa;
14+
}

‎src/plugins/dropdown_header/plugin.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/**
2+
* Plugin: "dropdown_header" (selectize.js)
3+
* Copyright (c) 2013 Brian Reavis & contributors
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
6+
* file except in compliance with the License. You may obtain a copy of the License at:
7+
* http://www.apache.org/licenses/LICENSE-2.0
8+
*
9+
* Unless required by applicable law or agreed to in writing, software distributed under
10+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
11+
* ANY KIND, either express or implied. See the License for the specific language
12+
* governing permissions and limitations under the License.
13+
*
14+
* @author Brian Reavis <[email protected]>
15+
*/
16+
17+
Selectize.registerPlugin('dropdown_header', function(options) {
18+
var self = this;
19+
20+
options = $.extend({
21+
title : 'Untitled',
22+
headerClass : 'selectize-dropdown-header',
23+
titleRowClass : 'selectize-dropdown-header-title',
24+
labelClass : 'selectize-dropdown-header-label',
25+
closeClass : 'selectize-dropdown-header-close',
26+
27+
html: function(data) {
28+
return (
29+
'<div class="' + data.headerClass + '">' +
30+
'<div class="' + data.titleRowClass + '">' +
31+
'<span class="' + data.labelClass + '">' + data.title + '</span>' +
32+
'<a href="javascript:void(0)" class="' + data.closeClass + '">&times;</a>' +
33+
'</div>' +
34+
'</div>'
35+
);
36+
}
37+
}, options);
38+
39+
self.setup = (function() {
40+
var original = self.setup;
41+
return function() {
42+
original.apply(self, arguments);
43+
self.$dropdown_header = $(options.html(options));
44+
self.$dropdown.prepend(self.$dropdown_header);
45+
};
46+
})();
47+
48+
});

‎src/selectize.css

+6-4
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,6 @@
9797
border: 1px solid #d0d0d0;
9898
}
9999
.selectize-dropdown {
100-
max-height: 200px;
101-
overflow-y: auto;
102-
overflow-x: hidden;
103100
background: #fff;
104101
margin-top: -1px;
105102
border-top: 0 none;
@@ -110,6 +107,11 @@
110107
-moz-border-radius: 0 0 3px 3px;
111108
border-radius: 0 0 3px 3px;
112109
}
110+
.selectize-dropdown-content {
111+
max-height: 200px;
112+
overflow-y: auto !important;
113+
overflow-x: hidden !important;
114+
}
113115
.selectize-dropdown [data-selectable],
114116
.selectize-dropdown .optgroup-header {
115117
padding: 6px 9px;
@@ -245,7 +247,7 @@
245247
position: absolute;
246248
z-index: 2;
247249
}
248-
.selectize-dropdown > * {
250+
.selectize-dropdown [data-selectable] {
249251
cursor: pointer;
250252
overflow: hidden;
251253
}

‎src/selectize.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -654,17 +654,17 @@ $.extend(Selectize.prototype, {
654654

655655
if (scroll || !isset(scroll)) {
656656

657-
height_menu = self.$dropdown.height();
657+
height_menu = self.$dropdown_content.height();
658658
height_item = self.$activeOption.outerHeight(true);
659-
scroll = self.$dropdown.scrollTop() || 0;
660-
y = self.$activeOption.offset().top - self.$dropdown.offset().top + scroll;
659+
scroll = self.$dropdown_content.scrollTop() || 0;
660+
y = self.$activeOption.offset().top - self.$dropdown_content.offset().top + scroll;
661661
scroll_top = y;
662662
scroll_bottom = y - height_menu + height_item;
663663

664664
if (y + height_item > height_menu - scroll) {
665-
self.$dropdown.stop().animate({scrollTop: scroll_bottom}, animate ? self.settings.scrollDuration : 0);
665+
self.$dropdown_content.stop().animate({scrollTop: scroll_bottom}, animate ? self.settings.scrollDuration : 0);
666666
} else if (y < scroll) {
667-
self.$dropdown.stop().animate({scrollTop: scroll_top}, animate ? self.settings.scrollDuration : 0);
667+
self.$dropdown_content.stop().animate({scrollTop: scroll_top}, animate ? self.settings.scrollDuration : 0);
668668
}
669669

670670
}

0 commit comments

Comments
 (0)