素材牛VIP会员

基于swiper仿手机移动端下拉框

 所属分类:网页特效-输入/选择框/联动,移动端/响应式

 浏览:881次-  下载:4次-  评论:0次-  更新时间:2018-11-21
基于swiper仿手机移动端下拉框兼容IE10
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多说明»
素材描述:基于swiper框架二次开发的移动端下拉选择框

详细介绍

使用方法

1、引入对应css,js文件

<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="swiper/css/swiper.min.css">
<script src="http://www.sucainiu.com/themes/cdn/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(); // 打开选择框
});

文件目录结构

  • css
    • ┝ public.css
  • ┝ index.html
  • js
    • ┝ dySelect.js
    • ┝ index.js
    • ┝ jquery3.3.1.min.js
  • swiper
    • css
      • ┝ swiper.min.css
    • js
      • ┝ swiper.min.js

相关素材 - 输入/选择框/联动,移动端/响应式

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:4
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)