selectordie演示11种美化下拉框select方法

selectordie演示11种美化下拉框select方法

Select-or-Die 就是一款基于 jQuery 的下拉框美化插件,你不用修改你原来的下拉框,它能够完全无缝的对你原来的下拉框进行美化,它甚至还支持添加前缀、HTML data 属性、键盘循环控制、设置高度、跳转到链接以及回调函数等等。除了默认的样式外,Select-or-Die 还另外提供了 3 套皮肤,相信有了 Select-or-Die,你的设计会更加统一、美观。

淘建站为您提供更多_表单代码_下拉框select_select_美化,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 94 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。

HTML

<div class="select">
    <select class="myselect">
        <option value="交互设计">交互设计</option>
        <option value="视觉设计">视觉设计</option>
        <optgroup label="开发">
            <option value="前端开发">前端开发</option>
            <option value="后端开发">后端开发</option>
        </optgroup>
        <option value="用户研究">用户研究</option>
        <option value="产品经理">产品经理</option>
    </select>
</div>

调用selectordie插件

<script type="text/javascript" src="jquery.js"></script> 
<script src="js/selectordie.min.js"></script>
<script>
$(function() {
    $('select').selectOrDie();
});
<script>

Select-or-Die 有如下 data 自定义属性:

  • data-custom-id – 绑定 id
  • data-custom-class – 绑定 class
  • data-placeholder – 占位符
  • data-prefix – 添加前缀
  • data-cycle – 键盘控制是否循环
  • data-links – 跳转到链接
  • data-size – 跳转到外部链接
  • data-tabindex – 设置 tabindex

参数 描述 默认值
customID 绑定 id 空
customClass 绑定 class 空
placeholder 占位符,同 HTML5 placeholder 属性 空
prefix 添加前缀 空
cycle 键盘控制是否循环 false
links 跳转到链接 false
linksExternal 跳转到外部链接 false
size 设置高度(个数),如果你有一个很长的下拉 0
tabIndex 设置 tabindex 0
onChange 下拉框改变之后的回调函数 空

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/229.html
selectordie演示11种美化下拉框select方法 希望对你有帮助,感谢您的支持!
  • jQuery select美化插件制作select样式美化代码

    jQuery select美化插件制作select样式美化代码

  • jquery select 选中值设置左右select选择互换v...

    jquery select 选中值设置左右select选择互换v...

  • jquery模拟竖向滚动条美化,支持鼠标键中轴滚动页面

    jquery模拟竖向滚动条美化,支持鼠标键中轴滚动页面

  • jquery双向选择器两侧select框列表文字左右选择器代码

    jquery双向选择器两侧select框列表文字左右选择器代码

  • 图片上传美化预览

    图片上传美化预览

  • jQuery分页弹出层类似下拉框选择

    jQuery分页弹出层类似下拉框选择

  • jQuery黑白两种响应式手机下拉框select

    jQuery黑白两种响应式手机下拉框select

  • jQuery手机下拉框select

    jQuery手机下拉框select

  • 纯css3勾选美化单选按钮样式

    纯css3勾选美化单选按钮样式

  • jQuery美化radio和checkbox

    jQuery美化radio和checkbox

  • jquery select下拉菜单美化搜索框样式代码

    jquery select下拉菜单美化搜索框样式代码

  • jQuery仿去哪儿出发城市筛选

    jQuery仿去哪儿出发城市筛选

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2