MobileSelect–移動端滾動選擇插件

一、簡介

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/zh-hk/n/255186.html