基于swiper模拟移动端下拉框

基于swiper模拟移动端下拉框

需要jquery,基于swiper框架二次开发的移动端下拉选择框。

使用方法
引入对应css样式文件

1
2
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="swiper/css/swiper.min.css">

JS代码

1
2
3
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="swiper/js/swiper.min.js"></script>
<script src="js/dySelect.js"></script>

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

1
<div ></div>

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

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

实例化对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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(); // 打开选择框
});
当前内容只有登录了才能查看,如果您已经注册,请登录
4

发表评论