-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
304 lines (272 loc) · 13.6 KB
/
index.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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!DOCTYPE html>
<html class="wp-toolbar" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dropdown Submenu Plugin for jQuery</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="dropdown-submenu-dist.css">
<link rel="stylesheet" href="demo_stuff/demo.css">
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
</head>
<body>
<main>
<h1>Turn the native HTML select <br>into a fancy Dropdown Submenu</h1>
<h2>Customise the native HTML select turning it into <br>a Dropdown Combo-box widh Floating Submenus:</h2>
<div class="demo1_wrap gray_section">
<p class="like_h2">The live demo</p>
<p>You can see the native HTML select on left (forced to keep visible) and the Dropdown Submenu combo-box on right side:</p>
<select id="select_1">
<option value="">Choose your OS:</option>
<optgroup label="PC">
<option value="mx-linux">MX Linux</option>
<option value="manjaro">Manjaro</option>
<option value="linux-mint">Linux Mint</option>
<option value="ubuntu" selected>Ubuntu</option>
<option value="w11">Windows 11</option>
<option value="w10">Windows 10</option>
<option value="w8">Windows 8</option>
<option value="w7">Windows 7</option>
<option value="ms-dos">MS-DOS</option>
</optgroup>
<optgroup label="Mac (icon)" data-icon="demo_stuff/mac.png">
<option value="big-sur">Big Sur</option>
<option value="catalina" class="css_tune_1">Catalina (CSS class)</option>
<option value="mojave">Mojave</option>
<option value="high-sierra" data-html-option="High%20%3Cstrong%3ESierra%3C%2Fstrong%3E%20%28HTML%29">High Sierra (HTML)</option>
<option value="sierra">Sierra</option>
<option value="el-capitan">El Capitan</option>
<option value="yosemite" data-icon="demo_stuff/mac.png">Yosemite (icon)</option>
</optgroup>
<option value="other">Other</option>
</select>
<h3>Actions on the native HTML select:</h3>
<p>This actions will be applied on the tuned select (synced):</p>
<p><button id="bt_hide">Hidden attr</button> <button id="bt_disable">Disabled attr</button> <button id="bt_change_sel">Change selection</button></p>
<p><button id="bt_load_content">Load new options (i.e. AJAX)</button> <button id="bt_simulate_validation">Error classname</button></p>
<h3>Actions on the dropdown submenu:</h3>
<p><button id="bt_destroy">Destroy</button> <button id="bt_set">Tune again</button></p>
</div>
<h2>Dropdown Submenu Combo-box Features:</h2>
<ul>
<li>Every group of options become a floating submenu</li>
<li>Hide the native HTML select & creates a new tuned one out of the box</li>
<li>Fully compatible with your current scripts / other libraries</li>
<li>Full synchronization between the native and the tuned selects: Catch programmatically changes on native select and refresh the tuned one.</li>
<li>Easy style customisation.</li>
</ul>
<div class="gray_section">
<h2>Usage</h2>
<p><strong>1.</strong> You can simply add the minfied distribution CSS file, which includes engine + skin CSS:</p>
<code>
<link rel="stylesheet" type="text/css" href="dropdown-submenu-dist.css"/>
</code>
<p>...or you can add only engine CSS, and your own version of skin CSS:</p>
<code>
<link rel="stylesheet" type="text/css" href="dropdown-submenu-engine.css"/>
<span class="comment"><!--<link rel="stylesheet" type="text/css" href="dropdown-submenu-skin.css"/>--></span>
<link rel="stylesheet" type="text/css" href="my-customized-dropdown-submenu-skin.css"/>
</code>
<p><strong>2.</strong> Add jQuery and the script file, just before close body tag:</p>
<code>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="dropdown-submenu.js"></script>
</code>
<p><strong>3.</strong> Tune your selects with me!</p>
<code>
$(document).ready(function() {
$( "select" ).dropdownSubmenu();
}
</code>
</div>
<h2>HTML Attributes</h2>
<div class="documentation">
<p class="like_h4">data-html-option</p>
<p>Native HTML select doesn't support HTML into option tag, but you can set it, in this way:</p>
<code>
<option value="high-sierra" data-html-option="High%20%3Cstrong%3ESierra%3C%2Fstrong%3E%20%28HTML%29">High Sierra (HTML)</option>
</code>
<p><strong>You must URL encode the HTML inside the attribute.</strong></p>
<p>- On <strong>PHP</strong> you can use the <span class="code">urlencode()</span> function.</p>
<p>- On <strong>ASP.net</strong> you can use the <span class="code">HttpUtility.UrlEncode()</span> function.</p>
<p>- On <strong>JavaScript</strong> you can use the <span class="code">encodeURI()</span> function.</p>
<p>- There is a few online tools to encode it easily</p>
<p class="like_h4" style="margin-top: 3em">data-icon</p>
<p>set a relative or absolute path to an image (better PNG), using this attribute:</p>
<code>
<option value="yosemite" data-icon="demo_stuff/mac.png">Yosemite (icon)</option>
</code>
<p>...but you can set it also using a class and your own CSS styles (see next section) or through <span class="code">data-html-option</span> attribute (see previous one).</p>
</div>
<div class="gray_section">
<h2>Customise options through custom CSS class</h2>
<div class="documentation">
<p>Native HTML select support classes into option tag and optgroup tag, and Dropdown Submenu copies it to tuned select (see the <span class="code">copyOptionClasses</span> setting).</p>
<p>In our example:</p>
<code>
<option value="catalina" class="css_tune_1">Catalina (CSS class)</option>
</code>
<p>Use the <strong>accent-hover</strong> class to set the rollover / selected style:</p>
<code>
.demo1 .css_tune_1 {
color: #00ac1c;
background: #eaf2eb;
}
.demo1 .css_tune_1.accent-hover {
color: #fff;
background: #1e90ff;
}
</code>
</div>
</div>
<h2>Syncing settings</h2>
<div class="documentation">
<p>Here the way to set the settings:</p>
<code>
$( ".demo1_wrap select" ).dropdownSubmenu({
watchChangeVal: true,
customClass : 'demo1',
minScreenWidth: 0
});
</code>
<p class="like_h4">watchDisabled</p>
<p><strong>Type</strong>: boolean</p>
<p><strong>Default</strong>: true</p>
<p>The "disabled" attribute on the native HTML select will be synced on the tuned select.</p>
<p class="like_h4">watchHidden</p>
<p><strong>Type</strong>: boolean</p>
<p><strong>Default</strong>: true</p>
<p>The "hidden" attribute on the native HTML select will be synced on the tuned select (this script hides the select wrapping into layer), keeping it "visble".</p>
<p class="like_h4">watchChangeVal</p>
<p><strong>Type</strong>: boolean</p>
<p><strong>Default</strong>: false</p>
<p>Programmatically changes on the selected option of the native HTML select doesn't trigger jQuery change event.</p>
<p>So if you need to listen this kind of change, set this option to true (will get a bit of performance)</p>
<p class="like_h4">watchSelectClasses</p>
<p><strong>Type</strong>: boolean</p>
<p><strong>Default</strong>: true</p>
<p>The CSS classes on the native HTML select will be synced on the tuned select. Useful on form validations (error class will be applied).</p>
</div>
<h2>Other settings</h2>
<div class="documentation">
<p class="like_h4">minScreenWidth</p>
<p><strong>Type</strong>: integer</p>
<p><strong>Default</strong>: 500</p>
<p>Acts as CSS breakpoint: When screen width is below this value, the native HTML select will remain visible and not tuned.</p>
<p>Most mobile devices manage by itself the native selects, and maybe the floating submenus goes out of screen.</p>
<p>On each window resize the selects will be updated.</p>
<p><strong>This feature can be de-activated setting it to 0.</strong></p>
<p class="like_h4">copyOptionClasses</p>
<p><strong>Type</strong>: boolean</p>
<p><strong>Default</strong>: true</p>
<p>Copy classes of the options (OPTION and OPTGROUP tag) to the tuned select (LI tags). Useful for CSS customisation.</p>
<p class="like_h4">tuneClass</p>
<p><strong>Type</strong>: string</p>
<p><strong>Default</strong>: dropdown-submenu-skin</p>
<p>Skin CSS will be applied through this class. Change it to set full customisation of look & feel, without need to override any CSS skin class.</p>
<p class="like_h4">customClass</p>
<p><strong>Type</strong>: string</p>
<p><strong>Default</strong>: (empty)</p>
<p>Will add a custom class. Useful to customise the tuned selects, without writting/versionate all the skin classes. Useful also to keep distinct select styles, giving a distinct classname to each.</p>
<p class="like_h4">wrapClass</p>
<p><strong>Type</strong>: string</p>
<p><strong>Default</strong>: dropdown-submenu-wrapper</p>
<p>Wrap for everything, engine CSS will be applied through this class. You only should change it if you want to transverse deeply the CSS engine styles and you know what you're doing.</p>
</div>
<div class="gray_section">
<h2>Actions</h2>
<div class="documentation">
<p>Here the way to call the actions, on previously tuned select:</p>
<code>
$( ".demo1_wrap select" ).dropdownSubmenu('destroy');
</code>
<p class="like_h4">refresh</p>
<p>Will restart/refresh the tuned select, based on the native HTML select. Unnecesary if you keep the synced settings.</p>
<p class="like_h4">refresh-width</p>
<p>Will set again the width of the tuned select, based on the native HTML select width.</p>
<p class="like_h4">destroy</p>
<p>Remove the tuned select, keeping the original HTML select untouched and visible.</p>
<p>After that, you can set it again in the same way: <span class="code">$("select").dropdownSubmenu();</span>.</p>
</div>
</div>
<h2>How to... Ajax</h2>
<div class="documentation">
<p>Simply replace the options on the native HTML select, and this script will do the rest :)</p>
<p class="like_h4">What about if my script delete the native select and create a new one?</p>
<p>In this case, you must set it again, in the same way: <span class="code">$("select").dropdownSubmenu();</span>.</p>
</div>
<h2>Check if Dropdown Submenu script is loaded</h2>
<div class="documentation">
<p>As any other jQuery plugin:</p>
<code>
$(document).ready(function() {
if ( $.fn.dropdownSubmenu ) {
console.log('loaded!');
} else {
console.log('not loaded!');
}
});
</code>
</div>
<div class="gray_section">
<h2>Customise: CSS override</h2>
<div class="documentation">
<p>If you want to override the CSS for all the tuned selects, use the class <span class="code">.dropdown-submenu-skin</span></p>
<p>But if you want to override only some of the tuned selects, use the setting <span class="code">customClass</span> to set your own class as scope.</p>
<code>
.dropdown-submenu-skin {
font-family: times, serif;
}
.dropdown-submenu-skin .dropdown-field-watch {
border-color: green;
}
.dropdown-submenu-skin .dropdown-main-list {
border-color: red;
}
.dropdown-submenu-skin .dropdown-submenu {
border-color: blue;
}
.dropdown-submenu-skin .accent-hover {
background: green;
}
</code>
</div>
</div>
<h2>Full skin replacement</h2>
<div class="documentation">
<p><strong>Please, read first the upper "Usage" section.</strong></p>
<p>You can copy the file <span class="code">dropdown-submenu-skin.less</span> into your project folder, and change the upper variables, or whatever:</p>
<code>
@color: #2c3338;
@bgColor: #fff;
@accentColor: #fff;
@accentBgColor: #1e90ff;
@accentBgColorRemember: lighten(@accentBgColor, 40%);
@fatherBgColor: #eee;
@fontFamily: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
@fontSize: 14px;
.dropdown-submenu-skin {
</code>
<p>If you want to load also the default skin, change the scope class in your skin file: <span class="code">.dropdown-submenu-skin</span> for any other, and then set this new class in the <span class="code">customClass</span> setting (read about in settings section).</p>
</div>
<div class="gray_section">
<h2>About Dropdown Submenu Plugin</h2>
<div class="documentation">
<p>As the <a href="https://www.wp-centrics.com/" target="_blank">Fish and Ships shipping plugin for WooCommerce</a> grew in options, the interface started to become messy.</p>
<p>We sorted the selection options into groups, but the combo-box was still too long. I couldn't find any jQuery-based option that solved this problem, so I decided to write my own code.</p>
<p>After that, I decided to release it as a jQuery plugin... enjoy! ;)</p>
</div>
</div>
</main>
<footer class="demo_absolute">
<div class="dropdown_buttons">
<a href="https://github.com/CarlesRever/dropdown-submenu-jquery/archive/refs/heads/main.zip">Download</a>
<a href="https://github.com/CarlesRever/dropdown-submenu-jquery/" target="_blank">GitHub</a>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="dropdown-submenu.min.js"></script>
<script src="demo_stuff/demo.js"></script>
</body>
</html>