mobiscroll實踐:移動端仿蘋果select效果的實現
最近在做一個微信服務號的開發,設計中日期選擇和週期選擇的輸入框需要使用蘋果的select下拉效果,在網上折騰了好久,最終的感慨就是這事基本上只有mobiscroll能搞定,然後專心死磕mobiscroll咯。
首先這個外掛是需要收費的,官網提供15天的試用期,但是需要填寫信用卡,隨便編了幾下結果沒通過稽核,只得作罷,在網上搜mobiscroll實踐的部落格,也是各種折騰各種坑。首先是大家用mobiscroll時都一定程度上的做了自己的封裝,沒有封裝的就是一堆的js和css引用,一開始為了實現這個採用的方案裡引入了將近十多個這個外掛的js和css,而且還只是日期選擇控制元件,還要做一個數字選擇的控制元件我就無從下手了,於是又開始了從頭的折騰,折騰久了發現mobiscroll還存在破解版,說到這,不得不佩服國內的破解事業啊。
發現有破解版後,便嘗試了網上各個版本的破解版,最終採用的破解版的地址是:
一開始接觸mobiscroll可能對網上別人寫的程式碼很不理解,但是隻要在官網都花點功夫,使用起來還是很簡單的,mobiscroll的官網文件特別的詳細,當然了這個外掛的功能也是特別的強大,我要用到的只是其中的一小部分而已。
使用mobiscroll最好是先到官網的demo頁去選擇自己需要的功能,然後就可以看到使用該功能的程式碼,自己copy下來,再去具體的功能引數頁面檢視引數,最後根據自己的需要通過審查元素等方式修改樣式。
DEMO頁
引數使用說明頁
破解版就只有一個js和一個css檔案了,因為具備了mobiscroll的所有功能,所以這兩檔案加起來有將近400kb。
還是貼一下demo的程式碼吧:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>mobiscroll</title>
<link rel="stylesheet" href="./css/mobiscroll.custom-3.0.0-beta2.min.css" >
<script src="./js/jquery.min.js"></script>
<script src="./js/mobiscroll.custom-3.0.0-beta2.min.js"></script>
<style type="text/css">
html,body{height:100%}
body{margin:0;padding:10px;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button{display:inline-block;text-decoration:none;padding:0.8em 2.6em;margin:20px 10px 0 0;outline:0;border:0;overflow:visible;cursor:pointer;color:#fff;background:#5185a8;font-family:Arial,sans-serif,verdana;font-size:14px;font-weight:100;-webkit-transition:background 0.3s ease-out;-moz-transition:background 0.3s ease-out;-o-transition:background 0.3s ease-out;transition:background 0.3s ease-out}
button:hover{background:#34566d}
input{width:100%;margin:0 0 10px 0;padding:10px;border:1px solid #ccc;border-radius:0;background:#fff;font-family:Arial,sans-serif,verdana;text-shadow:none;color:#000;font-size:15px;-webkit-appearance:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.demo-main-cont{height:100%}
.mbsc-sc-itm{text-align:center !important}
</style>
</head>
<body class="demo-main-cont demo-comp-number demo-display-bottom demo-theme-mobiscroll">
<input id="date" placeholder="Please Select ..." /> <!-- 選擇日期 -->
<input id="integer" placeholder="Please Select ..." /> <!-- 選擇數字 -->
<script type="text/javascript">
$(function () {
var now = new Date(),
min = new Date(now.getFullYear() - 4, now.getMonth(), now.getDate());
max = new Date(now.getFullYear() + 4, now.getMonth(), now.getDate());
var instance = mobiscroll.date('#date', {
lang: 'zh', //語言
display: 'bottom', //在頁面的什麼位置顯示
max: max, //可供選擇的最大日期
min: min, //可供選擇的最小日期
theme:'ios', //主題,外掛的面板效果,此處選擇ios,為了模仿ios的select效果
dateFormat:'yy-mm-dd' //日期格式
});
var instance2 = mobiscroll.number('#integer', {
lang: 'zh',
display: 'bottom',
layout: 'fixed',
step: 1, //前後數字差,可根據這個引數來設定2 4 6 8之類的數字選擇
min: 1, //最小數字
max: 50, //最大數字
width: 100,
defaultValue:28, //剛顯示出來時選擇的數字
theme:'ios' //主題
});
});
</script>
</body>
</html>
<!-- 更多date與Integer選擇引數請參見mobiscroll官網:
https://docs.mobiscroll.com/3-0-0_beta6/javascript/datetime
https://docs.mobiscroll.com/3-0-0_beta6/number
-->
為了實現這個效果花了一天多的時間,寫這篇部落格希望其他人少走彎路!