基于swiper模拟移动端下拉框

所属分类:输入-选择框

 37256  361  查看评论 (12)
分享到微信朋友圈
X
基于swiper模拟移动端下拉框 ie兼容12

使用方法

1.引入对应css,js文件

<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="swiper/css/swiper.min.css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="swiper/js/swiper.min.js"></script>
<script src="js/dySelect.js"></script>

2.在html中创建块级标签,类名为:select_box,如:

<div ></div>

3.在html中创建激活下拉框元素,如:

<button >打开下拉1</button>

4.实例化对象

var hgS1 = new selectSwiper({
       el:'.select_box1',
       // mustSelect:true, // 是否必选,默认false
       // activeIndex: 0,//默认激活项下标,默认值:-1
       data: ['吃饭', '睡觉', '打豆豆'],//选项数据
       init:function(index){//插件加载完成执行
           if(index !== -1){
               $('.btn1').html(this.data[index]);
           }
       },
       okFunUndefind: function () {//选择空执行
           alert('必须选择一项');
           return false;
       },
       okFun: function (index) {//确认按钮执行
           console.log(index);
           $('.btn1').html(this.data[index]);
       },
       closeFun: function () {//取消按钮执行
           console.log('取消');
       },
});
$('.btn1').on('click', function () {//对激活选择框绑定事件
       hgS1.openSelectSwiper(); // 打开选择框
});
相关插件-选择框

城市选择手机端(原创)

类似手机通讯录,选择城市,去除省份。
  选择框
 40838  418

仿招聘网站选择地区、选择行业、选择职位效果

仿招聘网站选择地区、选择行业、选择职位效果
  选择框
 54783  404

jquery弹出职业等多选框

招聘网上的职业地点弹框源码
  选择框
 39095  380

bootstrap下拉列表插件

bootstrap插件一款基于jquery bootstrap的下拉列表插件 ,有很多样式的下拉框
  选择框
 63724  498

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    包子太郎??? 0
    2023/3/24 18:45:36
    怎么清空重置?? 回复
    A(Z打字等简直¥r百可询 0
    2019/12/9 11:39:03
    能不能3个同时选啊, 3级联动的 就和时间一样
        还差的远0
        2021/3/3 14:36:07
        那改动很大,有那种专门插件
    回复
    0
    2019/10/21 9:59:46
    因为swiper的版本不一样,作者能不能做一个兼容swiper5的 回复
    王笑笑 0
    2019/7/10 14:49:51
    你好,我本地模拟了下, 为什么data里边写的死数据不显示在下拉框里面呢?
        吴芷瑶-嘉诺展览0
        2019/8/20 11:33:46
        我也不行。。。
    回复
    扭扣 0
    2019/1/1 19:50:37
    赵不悔 0
    2018/12/14 10:54:13
    挺好,可惜兼容性咳咳
        ╊来自秋天的彤话の0
        2018/12/17 10:43:30
        因为这个UI界面是根据手机来设计的 , 就没有去兼容IE 了 。
        gzh19980
        2019/1/9 16:05:02
        手机要什么兼容性
    回复
    右边?13?13??1o? 0
    2018/12/12 11:08:37
    选中之后怎么往后台传值啊 传0 1 2 3....
        ╊来自秋天的彤话の0
        2018/12/17 10:42:59
        这个只能单选哦。
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复