内容简介:This plugin replaces native select elements with fully customizable dropdowns.Even though this replaces native select options, you can still use
BVSelect - Jquery Plugin
This plugin 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/
Features:
-
:wrench: Fully Customizable -
:muscle: Lightweight Plugin (5KB Zip) -
:earth_americas: Tested in All Modern Browsers (IE11 Included) -
:sunglasses: Images & FontIcons -
⌨️ Normal Usage (Multiple Selection included) -
:mag_right: Built-in Searchbox -
Prevented Viewport Overflow
Installation:
1 - Include jQuery Plugin.
<script src="path/to/jquery.js"></script> <script src="path/to/bvselect.js"></script>
2 - Include Plugin 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 Plugin.
$(document).ready(function() {
$('#selectbox').BVSelect();
});
Methods:
Destroy:
$('#selectbox').BVSelect("destroy");
Removes dropdown, unbinds all its events and brings back the original Select
Update:
$('#selectbox').BVSelect("update");
Updates current dropdown based on changes to the original selectbox.
Get ID:
$('#selectbox').BVSelect("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).ready(function() {
$('#selectbox').BVSelect({
width: "33%",
searchbox: false,
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="selectbox3">
<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?
This plugin 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 as well as IE 11
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入理解LINUX网络技术内幕
Christian Benvenuti / 夏安、闫江毓、黄景昌 / 中国电力出版社 / 2009-6 / 128.00元
Linux如此的流行正是得益于它的特性丰富及有效的网络协议栈。如果你曾经惊叹于Linux能够实现如此复杂的工作,或者你只是想通过现实中的例子学习现代网络,《深入理解Linux网络内幕》将会给你指导。同其他O'Reilly的流行书籍一样,《深入理解Linux网络内幕》清楚地阐述了网络的基本概念,并指导你如何用C语言实现。虽然早先的 TCP/IP经验是有用的,但初学者通过《深入理解Linux网络内幕》......一起来看看 《深入理解LINUX网络技术内幕》 这本书的介绍吧!