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

jQuery模拟select下拉框插件SelectBox

  • 1598
  • 1
  • 0


使用方法

1. 引入jquery和此SelectBox.min.js

2. 准备一个盒子，假定class名为checkbox

3. 一行代码建立筛选框  var select=new SelectBox($('checkbox'));

4.。over 。。具体参数看下边。想让你的框边什么样就什么样。

  1. var select = new SelectBox(obj, data, fn, opts); //建立 select框对象
  2. 参数说明 obj: jquery对象
  3. data: 下拉框里的数据(数据)， 数组里可以是值， 也可以是json， 如果是json有对应的dataName和dataId
  4. fn: 回掉函数 参数为 {
  5.     name: name,
  6.     id: id
  7. } //name是输入框内容  id是隐藏value
  8. opts: {}, 设置参数
  9. dataName: 'name', //option的html
  10.     dataId: 'id', //option的value
  11.     fontSize: '14', //字体大小
  12.     optionFontSize: '14', //下拉框字体大小
  13.     textIndent: 4, //字体缩进
  14.     color: '#000', //输入框字体颜色
  15.     optionColor: '#000', //下拉框字体颜色
  16.     arrowColor: 'green', //箭头颜色
  17.     backgroundColor: '#ccc', //背景色颜色
  18.     borderColor: 'green', //边线颜色
  19.     hoverColor: 'green', //下拉框HOVER颜色
  20.     borderWidth: 1, //边线宽度
  21.     arrowBorderWidth: 0, //箭头左侧分割线宽度。如果为0则不显示
  22.     borderRadius: 5, //边线圆角
  23.     placeholder: '请输入文字', //默认提示
  24.     defalut: 'firstData', //默认显示内容。如果是'firstData',则默认显示第一个
  25.     allowInput: true, //是否允许输入
  26.     width: 130, //宽
  27.     height: 26, //高
  28.     optionMaxHeight: 500 //下拉框最大高度
复制代码
方法  
  • changeList(data) 改变数据
  • changeFnBack(fn)  改变回掉函数
  • getResult() 获取当前选择项

本素材被以下收藏专辑推荐:

  • 00000|素材: 17, 订阅: 0
相关素材
jQuery模拟select下拉框插件SelectBox
  • 不染123456 刚刚下载了一个素材
  • Hugo戴先生 刚刚下载了一个素材
  • zat 刚刚下载了一个素材
  • 爱已过期 刚刚下载了一个素材
  • 龙博 刚刚下载了一个素材
  • Jhoan 刚刚下载了一个素材
  • qq叶子kCP 刚刚下载了一个素材
  • qqh1u 刚刚下载了一个素材
  • qqX3i 刚刚下载了一个素材
  • 羙婯亾泩 刚刚下载了一个素材
  • qqJes 刚刚下载了一个素材
  • pringun 刚刚下载了一个素材
  • 你来自哪颗星星 刚刚下载了一个素材
  • qq开心就好Wn3 刚刚下载了一个素材
  • XLB789 刚刚下载了一个素材
分享者：
分享者头像
小编
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题