BVSelect - Jquery Plugin for SelectBoxes

栏目: IT技术 · 发布时间: 5年前

内容简介:This plugin replaces native select elements with fully customizable dropdowns.Even though this replaces native select options, you can still use

BVSelect - Jquery Plugin

BVSelect - Jquery Plugin for SelectBoxes

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

腾讯方法

腾讯方法

潘东燕、王晓明 / 机械工业出版社 / 2014-12-11 / 39.00

这是国内第一本深度讲述腾讯产品研发与团队转型的书。本书介绍了腾讯三个不同生命周期的产品的开发过程,包括如何踏足新领域开发新产品;如何救活一个即将半路夭折的产品;如何让一个老产品持续盈利。本书呈现了互联网产品开发时会遇到普遍问题和解决方法,涉及大企业如何内部创业,并迅速组建新的项目团队;如何实现跨部门的合作;在面临新团队和紧急开发任务时如何提高团队沟通效率;在产品研发方面,如何定位产品、如何敏捷开发......一起来看看 《腾讯方法》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码