一、简介
MobileSelect 是一款移动端的滚动选择插件。你可以简单轻松地集成到你的WEB应用程序中，支持单列和多列选择。
MobileSelect 带有多种主题，可以自由定制，支持数据异步加载或本地存储。
二、使用方法
使用 MobileSelect 非常简单。以下是一个基本示例，创建一个单列选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MobileSelect BasicExample</title>
<link rel="stylesheet" href="mobileSelect.css">
</head>
<body>
<script src="mobileSelect.js"></script>
<script>
var mobileselect = new MobileSelect({
trigger: 'input#single',
title: 'Single-level menu',
wheels: [
{
data: ['Option1', 'Option2', 'Option3']
}
],
position: [0], //初始化定位 打开时默认选中的哪个 如果不填默认为0
callback:function(indexArr, data){
console.log(data);
}
});
</script>
<input id="single" placeholder="Please Select">
</body>
</html>
三、基本参数
1、trigger（触发元素）
MobileSelect 提供了多种方式打开选择器。
最常见的方式是用input元素触发选择器。
在创建选择器的时候，通过设置 trigger 参数来指定触发元素:
trigger: '#inputBox' // trigger 可以是一个css选择器
2、title（标题）
选择器顶部可以显示一个标题。通过设置 title 参数，我们可以设置选择器的标题。
title:'选择器标题' // title支持HTML
3、wheels（轮子）
选择器的核心部分是轮子。轮子由一个或多个数据列（选择器）组成。
每个轮子都需要指定一个数据列，这个数据列必须是一个JavaScript数组。
数据列可以是静态的或动态的。一个静态的列就是一个JavaScript数组，而一个动态的列可以是一个函数这个函数需要返回一个JavaScript数组作为数据列。
以下是一个两列选择器示例：
var mobileselect = new MobileSelect({
trigger:'#double',
title:'Two-level menu',
wheels:[
{ data:['Option1', 'Option2', 'Option3'] },
{
data:[
{ id:'0', value:'Sub Option1' },
{ id:'1', value:'Sub Option2' },
{ id:'2', value:'Sub Option3' }
]
}
],
position:[0, 1], //初始化定位 第一列选中第一项，第二列选中第二项
callback:function(indexArr, data){
console.log(data);
}
});
四、高级功能
1、theme（主题）
选择器主题可以通过创建不同的 .css 文件进行自定义。通过设置 theme 参数，可以选择不同的主题样式。
theme: 'ios' //有'default'和'ios'两个主题，不填写默认使用'default'
2、rows（显示行数）
通过设置 rows 参数，可以指定选择器在打开时显示的行数。
rows: 4
3、position（初始化定位）
调用函数的时候可以通过设置 position 来设置选择器打开时默认选中的位置。
position:[1, 2, 3] //选中第二个选项卡的第三个选项
4、transitionEnd（过渡完成）
当选择器关闭时，会触发 transitionEnd 事件。可以添加回调函数来处理关闭事件。
transitionEnd:function(indexArr, data){
console.log(data);
}
5、ensureBtnText 和 cancelBtnText
通过 ensureBtnText 和 cancelBtnText 来设置按钮的文本。
ensureBtnText: 'Ensure', //确定按钮文本 cancelBtnText: 'Cancel' //取消按钮文本
五、总结
以上是 MobileSelect 的基础操作和高级功能。MobileSelect 是一款功能强大的选择器插件。
它支持单列和多列选择，支持不同主题、不同行数的设定，而且使用简单，轻松集成到你的WEB应用中。
如果你想进一步了解 MobileSelect ，请访问它的官方文档。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/255186.html
微信扫一扫 
支付宝扫一扫 