素材8网-专注前端素材！
来源：https://www.sucai8.cn/29922.html

jQuery下拉多选CheckBox表单美化特效代码

  • 765
  • 0
  • 0

数据格式：
  1. var data = [
  2.             {
  3.                 "name": "常用",
  4.                 "city": [
  5.                     {"cityName": "南京", "cityNumber": "001", "selected": true},
  6.                     {"cityName": "上海", "cityNumber": "002"},
  7.                     {"cityName": "苏州", "cityNumber": "003", "selected": true}
  8.                 ]
  9.             },
  10.             {
  11.                 "name": "全部",
  12.                 "city": [
  13.                     {"cityName": "南京", "cityNumber": "001"},
  14.                     {"cityName": "杭州", "cityNumber": "004"},
  15.                     {"cityName": "无锡", "cityNumber": "005"},
  16.                     {"cityName": "上海", "cityNumber": "002"},
  17.                     {"cityName": "苏州", "cityNumber": "003"}
  18.                 ]
  19.             }
  20.         ];
  21.         var data2 = [
  22.             {"cityName": "南京", "cityNumber": "001", "selected": true},
  23.             {"cityName": "杭州", "cityNumber": "004"},
  24.             {"cityName": "无锡", "cityNumber": "005", "selected": true},
  25.             {"cityName": "上海", "cityNumber": "002"},
  26.             {"cityName": "苏州", "cityNumber": "003"}
  27.         ]
  28.         var data3 = [
  29.             {
  30.                 "name": "江苏",
  31.                 "city": [
  32.                     {"cityName": "南京", "cityNumber": "001", "selected": true},
  33.                     {"cityName": "无锡", "cityNumber": "002", "selected": true},
  34.                     {"cityName": "苏州", "cityNumber": "003", "selected": true}
  35.                 ]
  36.             },
  37.             {
  38.                 "name": "湖北",
  39.                 "city": [
  40.                     {"cityName": "武汉", "cityNumber": "004", "selected": true},
  41.                     {"cityName": "襄阳", "cityNumber": "005"},
  42.                     {"cityName": "荆州", "cityNumber": "006", "selected": true}
  43.                 ]
  44.             },
  45.             {
  46.                 "name": "安徽",
  47.                 "city": [
  48.                     {"cityName": "合肥", "cityNumber": "007", "selected": true},
  49.                     {"cityName": "六安", "cityNumber": "008"},
  50.                     {"cityName": "马鞍山", "cityNumber": "009", "selected": true}
  51.                 ]
  52.             },
  53.         ];
复制代码
传入参数：
  1. var slidownSelectOptionse1 = {
  2.     el: 'aaaaaa',//容器名称
  3.     type: 'double',//插件类型
  4.     width: '70px',//宽度
  5.     height: '40px',//高度
  6.     background: '#ffffff',//默认背景色
  7.     color: '#000000',//默认字体颜色
  8.     selectBackground: '#006666',//选中背景色
  9.     selectColor: '#ffffff',//选中字体颜色
  10.     show: 'false',//是否展开
  11.     content: '...请选择...',//默认要显示的内容
  12.     data: data//数据
  13. }
  14. var slidownSelectOptionse2 = {
  15.             el: 'bbbbbb',//容器名称
  16.             type: 'single',//插件类型
  17.             width: '70px',//宽度
  18.             height: '40px',//高度
  19.             background: '#ffffff',//默认背景色
  20.             color: '#000000',//默认字体颜色
  21.             selectBackground: '#6699CC',//选中背景色
  22.             selectColor: '#ffffff',//选中字体颜色
  23.             show: 'true',//是否展开
  24.             content: '...请选择...',//要显示的内容
  25.             data: data2//数据
  26.         }
  27.         var slidownSelectOptionse3 = {
  28.             el: 'cccccc',//容器名称
  29.             type: 'more',//插件类型
  30.             width: '70px',//宽度
  31.             height: '40px',//高度
  32.             background: '#ffffff',//默认背景色
  33.             color: '#000000',//默认字体颜色
  34.             selectBackground: '#66CC99',//选中背景色
  35.             selectColor: '#ffffff',//选中字体颜色
  36.             show: 'true',//是否展开
  37.             content: '...请选择...',//要显示的内容
  38.             data: data3//数据
  39.         }
  40.         var slidownSelectOptionse4 = {
  41.             el: 'dddddd',//容器名称
  42.             type: 'more',//插件类型
  43.             width: '70px',//内容显示宽度
  44.             height: '40px',//内容显示高度
  45.             background: '#ffffff',//默认背景色
  46.             color: '#000000',//默认字体颜色
  47.             selectBackground: '#FF6633',//选中背景色
  48.             selectColor: '#ffffff',//选中字体颜色
  49.             show: 'false',//是否展开
  50.             content: '...请选择...',//要显示的内容
  51.             data: data3//数据
  52.         }
复制代码

调用方法：
  1. $(document).ready(function () {
  2.    rltTools.slidownSelect(slidownSelectOptionse1)
  3.    rltTools.slidownSelect(slidownSelectOptionse2)
  4.    rltTools.slidownSelect(slidownSelectOptionse3)
  5.    rltTools.slidownSelect(slidownSelectOptionse4)
  6. })
复制代码

其中type有三种：single,double,more，

single的数据格式对应data2，double的数据格式对应data,more的数据格式对应data3。参数名字可以在代码里自己修改。
相关素材
jQuery下拉多选CheckBox表单美化特效代码
  • T180 刚刚下载了一个素材
  • 生如夏花 刚刚下载了一个素材
  • 市区 刚刚下载了一个素材
  • 火美人 刚刚下载了一个素材
  • 方人也 刚刚下载了一个素材
  • 盏盏 刚刚下载了一个素材
  • 生活也许曾经鲜活 刚刚下载了一个素材
  • qq礼aya 刚刚下载了一个素材
  • GTM冠军 刚刚下载了一个素材
  • 郭永新领新网络 刚刚下载了一个素材
  • qq清欢Bu0 刚刚下载了一个素材
  • 静眸 刚刚下载了一个素材
  • 青城 刚刚下载了一个素材
  • A帅 刚刚下载了一个素材
  • 叶陈帆 刚刚下载了一个素材
分享者：
分享者头像
小编
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题