開題：得益于項目的上線，現(xiàn)在終于有時間來寫一點點的東西，雖然很淺顯，但是我感覺每經歷一次項目，我就學到了很多的東西，現(xiàn)在接著上次的文字輪播將本次項目中學到的其他東西分享出來。
這次分享的是一個基于jquery/zepto的選擇器插件
github地址:https://github.com/jinghaoo/mobile-selector
相信對于移動開發(fā)有過經驗的同學都對UI的不統(tǒng)一而感到頭疼，又不能為了一個小小的選擇器去引入一個完整UI框架，所以狠了狠心自己寫了一個關于單項選擇、二級非聯(lián)動選擇、日期選擇的選擇器，并且經歷了兩次項目的考驗。
好了，廢話少說，我們先來看一下效果圖
我們在使用別人寫的插件的時候無一不為沒有完整的api而頭疼不已，現(xiàn)在我具體的說明一下這個插件的api以及demo,并且區(qū)分不同的場景下的應用
單項選擇
$.scrEvent({
data: ['全國', '上海', '蘇州', '杭州', '南京', '武漢', '深圳', '北京'], //數(shù)據
evEle: '.qu-year', //選擇器
title: '切換城市', // 標題
defValue: '全國', // 默認值
afterAction: function (data) { // 點擊確定按鈕后,執(zhí)行的動作
$(".qu-year").val(data);
}
});相關API如下：
scrEvent：
| 參數(shù) | 解釋 |
|---|---|
| data | 選擇器取值范圍，類型為數(shù)組 |
| evEle | 要綁定觸發(fā)事件元素的元素名稱，如：class、id、element... |
| title | 選擇器名稱 |
| defValue | 選擇器默認值 【可選,默認選擇器數(shù)組的第一個數(shù)】 |
| beforeAction | 執(zhí)行成功前的動作 無參數(shù) |
| afterAction | 執(zhí)行成功后的動作 參數(shù)：選中的文字 |
二級非聯(lián)動選擇
// 體重范圍，20-100(整數(shù))，0-9(小數(shù))
// 整數(shù)
var quWeightInt = [20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50,
51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85,
86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100];
// 小數(shù)
var quWeightFl = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
//體重
$.scrEvent2({
data: quWeightInt,
data2: quWeightFl,
evEle: '.qu-weight',
title: '體重/kg',
defValue: 60,
defValue2: 0,
afterAction: function (data1, data2) {
$('.qu-weight').val(data1 + '.' + data2);
}
})
// 時長數(shù)據
// 小時
var spoHour = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20",
"21", "22", "23"];
// 分鐘
var spoMinute = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20",
"21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44",
"45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
//睡眠
$.scrEvent2({
data: spoHour,
data2: spoMinute,
evEle: '.qu-time',
title: '睡眠時長',
defValue: 6,
defValue2: 0,
eleName: '小時',
eleName2: '分鐘',
afterAction: function (data1, data2) {
$('.qu-time').val(data1 + '小時' + data2 + '分鐘');
}
})scrEvent2：
| 參數(shù) | 解釋 |
|---|---|
| data | 選擇器1取值范圍，類型為數(shù)組 |
| data2 | 選擇器2取值范圍，類型為數(shù)組 |
| evEle | 要綁定觸發(fā)事件元素的元素名稱，如：class、id、element... |
| title | 選擇器名稱 |
| defValue | 選擇器1默認值【可選,默認選擇器數(shù)組的第一個數(shù)】 |
| defValue2 | 選擇器2默認值【可選,默認選擇器數(shù)組的第一個數(shù)】 |
| eleName | 選擇器1后跟隨的單位 【可選】 |
| eleName2 | 選擇器2后跟隨的單位 【可選】 |
| beforeAction | 執(zhí)行成功前的動作 無參數(shù) |
| afterAction | 執(zhí)行成功后的動作 參數(shù)1：選中的文字1 參數(shù)2：選中的文字2 |
日期時間選擇
// 年月日
$.dateSelector({
evEle: '.sp-time',
startYear: '2017',
endYear: '2017',
timeBoo: false,
afterAction: function (d1, d2, d3) {
$('.sp-time').val(d1 + '-' + d2 + '-' + d3);
}
});
// 年月日 時分
$.dateSelector({
evEle: '.sp-date',
year: 1990,
month: 12,
day: 08,
startYear: '1990',
endYear: '2017',
timeBoo: true,
afterAction: function (d1, d2, d3, d4, d5) {
$('.sp-date').val(d1 + '-' + d2 + '-' + d3 + ' ' + d4 + ':' + d5);
}
});dateSelector：
| 參數(shù) | 解釋 |
|---|---|
| evEle | 要綁定觸發(fā)事件元素的元素名稱，如：class、id、element... |
| title | 選擇器名稱 |
| year | 默認顯示年【可選,默認當前年】 |
| month | 默認顯示月【可選,默認當前月】 |
| day | 默認顯示日【可選,默認當前日】 |
| timeBoo | true:使用年月日+時間 false:使用年月日 【可選,默認為false】 |
| hour | 默認顯示小時【可選,默認當前小時】 |
| minute | 默認顯示分鐘【可選,默認當前分鐘】 |
| startYear | 顯示年的開始區(qū)間開始時間 【可選,默認為當前年份的前后10年】 |
| endYear | 顯示年的開始區(qū)間結束時間 【可選,默認為當前年份的前后10年】 |
| type | 觸發(fā)事件元素的觸發(fā)事件類型 【 |
| beforeAction | 執(zhí)行成功前的動作 無參數(shù) 中的文字1-5 |
| afterAction | 執(zhí)行成功后的動作 參數(shù)1-5：選可選,默認'click'】 |
對于移動端的適配問題讓我們頭疼不已，而去應用別人的插件難免出現(xiàn)和自己的適配不統(tǒng)一的情況，對此我特意寫了rem版本和px版本，可以根據自己的真實情況作出選擇
由于設計不同我們還可能需要修改顏色 只需要修改.sel-box .btn和.sel-con .border中的色值就好
如果在項目中有用不到的功能可以直接移除此方法，節(jié)省空間
我也是努力將其寫成拿來即用的插件，如果大家在使用中還有什么疑問可以通過E-mail和我聯(lián)系 E-mail： jingh1024@163.com
如果感到有用就給個star吧 ~(～￣▽￣)～
http://www.cnblogs.com/jingh/p/6381079.html
延伸閱讀
- 來萬碼學習，是我最正確的選擇 2022-09-07
- 謝謝當初的選擇 2020-06-11
- 選擇要趁早 2020-06-11
- 很幸運選擇了萬碼——穆*杰 2019-10-28
- 做好了選擇，就要勇往直前 2019-07-11
- 一個選擇，一段新的征程——崔*浩 2019-05-09
- 選擇比努力更重要 2018-12-05
- 程序員不是碼農那么簡單 2019-05-13
- 選擇比努力更加重要——富*天隆 2017-08-28
- 阿里移動安全 [無線安全]玩轉無線電——不安全的藍牙鎖 2017-07-26
來萬碼學習，是我最正確的選擇