内容简介:Replaces native select elements with fully customizable dropdowns.Even though this replaces native select options, you can still use
BVSelect - Vanilla JS
Replaces native select elements with fully customizable dropdowns.
Even though this replaces native select options, you can still use Form Submit , Onchange Events and Attributes as you would with normal usage.
Demo:
https://bmsvieira.github.io/BVSelect-VanillaJS/
JQuery Version:
https://github.com/BMSVieira/BVSelect
Features:
-
:wrench: Fully Customizable -
:muscle: No Dependencies, built with VanillaJS -
:earth_americas: Tested in All Modern Browsers (IE11 not Included) -
:sunglasses: Images & FontIcons -
⌨️ Normal Usage (Multiple Selection included) -
:mag_right: Built-in Searchbox -
Prevented Viewport Overflow
Installation:
1 - Include JavaScript Source.
<script src="path/to/bvselect.js"></script>
2 - Include Styles.
<link rel="stylesheet" href="path/to/bvselect.css">
4 - Set HTML.
<select id="selectbox"> <option data-separator="true"> Select Option </option> <option value="1"> Option 1 </option> <option value="2"> Option 2 </option> <option value="3" disabled> Option 3 </option> <option value="4"> Option 4 </option> </select>
3 - Initilize.
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new BVSelect({
selector: "#selectbox",
searchbox: true,
offset: true
});
});
Methods:
Destroy:
demo1.Destroy();
Removes dropdown, unbinds all its events and brings back the original Select
Update:
demo1.Update();
Updates current dropdown based on changes to the original selectbox.
Get ID:
demo1.GetID();
Returns the ID that was generated to build dropdown, so you can add custom classes.
Settings:
| Name | Value | Default | Description |
|---|---|---|---|
width |
px or % |
100% |
Specify the width of the main element |
searchbox |
true or false |
false |
Add a search box to the list |
offset |
true or false |
true |
Fixes Viewport Offset |
Example:
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new BVSelect({
selector: "#selectbox",
searchbox: true,
offset: true
});
});
Attributes:
| Name | Value | Description |
|---|---|---|
data-separator |
true or false |
Highlights an option |
data-img |
Image Source |
Adds an Image to option |
data-icon |
fa fa-hashtag |
Adds an FontIcon to option, can be used any provider as long it is identical. Images will be prioritized over icons. |
disabled (native) |
disabled |
Disables an option |
To add FontIcons, you must include it's own sources
Example:
<select id="selectbox">
<option value="##" data-separator="true" selected>Select Option</option>
<option data-img="path/to/img.png" value="--">Cristiano Ronaldo</option>
<option data-icon="fa fa-hashtag" value="--" >Lionel Messi </option>
<option data-img="path/to/img.png" value="--" disabled>Neymar Jr. (Disabled)</option>
<option data-img="path/to/img.png" value="--">Ronaldinho</option>
<option data-img="path/to/img.png" value="--">Luis Figo</option>
</select>
All CSS styles are fully customizable in order to match your style
Frequently Asked Questions
Is there any themes?
It doesn't need themes since the CSS is fully customizable, you are able to change everything to match your style.
In addition to design, what changes?
Replaces the original SelectBox but you can use it as you would with a native one, OnChange Events, Attributes, Form Submit, Append/Remove Options, everything.
What about Browser Compatibility?
It was tested successfully in every modern browser (IE11 not Included)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C#图解教程
索利斯 (Daniel M.Solis) / 姚琪琳、苏林、朱晔 / 人民邮电出版社 / 2013-7-1 / CNY 89.00
本书是广受赞誉的C# 图解教程的最新版本。作者在本书中创造了一种全新的可视化叙述方式,以图文并茂的形式、朴实简洁的文字,并辅以大量表格和代码示例,全面、直观地阐述了C# 语言的各种特性。新版本除了精心修订旧版内容外,还全面涵盖了C# 5.0 的新增特性,比如异步编程、调用者信息、case 表达式、带参数的泛型构造函数、支持null 类型运算等。通过本书,读者能够快速、深入理解C#,为自己的编程生涯......一起来看看 《C#图解教程》 这本书的介绍吧!