实用select下拉框美化jquery插件

当前位置:主页 > jQuery库 > 表单 > 实用select下拉框美化jquery插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
实用select下拉框美化jquery插件
分享:

    插件介绍

    这是一款实用的select下拉框美化jquery插件。该select下拉框的原理是将select标签隐藏,并按照select标签用div和list绘制一个控件,将用户对div的操作映射到select上。css文件可以根据不同需求修改。

    浏览器兼容性

    浏览器兼容性
    时间:2017-02-28
    阅读:
简要教程

这是一款实用的select下拉框美化jquery插件。该select下拉框的原理是将select标签隐藏,并按照select标签用div和list绘制一个控件,将用户对div的操作映射到select上。css文件可以根据不同需求修改。

使用方法

在页面中引入htools.select.skin.css和jquery、jquery.htools.select.js文件。

<link rel="stylesheet" type="text/css" href="path/to/css/htools.select.skin.css">
<script src="path/to/js/jquery.min.js"></script>
<script src="path/to/js/jquery.htools.select.js"></script>
                
HTML结构

使用普通的select元素作为下拉框的HTML结构即可:

<select id="myselect">
    <option value="1">插件效果</option>
    <option value="2">项目1</option>
    <option value="3">项目2</option>
    <option value="4">项目3</option>
    <option value="5">项目4</option>
</select>
                
初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该下拉框美化插件。

var $myselect = $("#myselect");
/**
 * 初始化插件
 */
$myselect.goSelectInput({
    height: 30,
    width: 250
});             
                

本select下拉框美化jquery插件由阿海提供,如有需要可以通过719348277@qq.com和他联系。

网友评论