- 先展示效果图
- 附上DEMO代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <title>jQuery美化Select下拉框插件DEMO</title> <link rel="stylesheet" type="text/css" href="css/selectFilter.css" /> <style type="text/css"> body { padding: 30px; } .item { width: 240px; height: 32px; margin: 30px auto; } </style> </head> <body> <div style="text-align:center;clear:both"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> <div class="item"> <!-- 这里开始 --> <div class="filter-box"> <div class="filter-text"> <input class="filter-title" type="text" readonly placeholder="pleace select" /> <i class="icon icon-filter-arrow"></i> </div> <select name="filter"> <option value="new" disabled>最新的</option> <option value="unaudited">未审核</option> <option value="nothrough" selected>未通过</option> <option value="audit">正在审核</option> <option value="audited">已审核</option> <option value="passed">已通过</option> <option value="1">111</option> <option value="2">222</option> <option value="3">333</option> <option value="4">444</option> <option value="5">555</option> <option value="6">666</option> </select> </div> <!-- 这里结束 --> </div> <!-- select -- name 可以接收选择的值【用于表单提交 名称自定义】 option -- 1. value 传给后台的参数 1. selected 设置默认选中 2. disabled 设置禁止选则 --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/selectFilter.js"></script> <script type="text/javascript"> //本小插件支持移动端哦 //这里是初始化 $('.filter-box').selectFilter({ callBack : function (val){ //返回选择的值 console.log(val+'-是返回的值') } }); </script> </body> </html>
- 插件DEMO下载资源包
原文地址:http://www.cnblogs.com/nszblogs/p/16806476.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性