開題:得益於專案的上線,現在終於有時間來寫一點點的東西,雖然很淺顯,但是我感覺每經歷一次專案,我就學到了很多的東西,現在接著上次的文字輪播將本次專案中學到的其他東西分享出來。
這次分享的是乙個基於jquery/zepto的選擇器外掛程式
相信對於移動開發有過經驗的同學都對ui的不統一而感到頭疼,又不能為了乙個小小的選擇器去引入乙個完整ui框架,所以狠了狠心自己寫了乙個關於單項選擇、二級非聯動選擇、日期選擇的選擇器,並且經歷了兩次專案的考驗。
好了,廢話少說,我們先來看一下效果圖
我們在使用別人寫的外掛程式的時候無一不為沒有完整的api而頭疼不已,現在我具體的說明一下這個外掛程式的api以及demo,並且區分不同的場景下的應用
引數解釋
data
選擇器取值範圍,型別為陣列
evele
要繫結觸發事件元素的元素名稱,如:class、id、element...
title
選擇器名稱
defvalue
選擇器預設值 【可選,預設選擇器陣列的第乙個數】
beforeaction
執行成功前的動作 無引數
afteraction
執行成功後的動作 引數:選中的文字
// 體重範圍,20-100(整數),0-9(小數)
// 整數
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];
// 小數
var quweightfl = [0,1
,2,3
,4,5
,6,7
,8,9];
//體重
$.screvent2(
})
// 時長資料
// 小時
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(
})
screvent2:
引數解釋
data
選擇器1取值範圍,型別為陣列
data2
選擇器2取值範圍,型別為陣列
evele
要繫結觸發事件元素的元素名稱,如:class、id、element...
title
選擇器名稱
defvalue
選擇器1預設值【可選,預設選擇器陣列的第乙個數】
defvalue2
選擇器2預設值【可選,預設選擇器陣列的第乙個數】
elename
選擇器1後跟隨的單位 【可選】
elename2
選擇器2後跟隨的單位 【可選】
beforeaction
執行成功前的動作 無引數
afteraction
執行成功後的動作 引數1:選中的文字1 引數2:選中的文字2
// 年月日
$.dateselector(
});// 年月日 時分
$.dateselector(
});
dateselector:
引數解釋
evele
要繫結觸發事件元素的元素名稱,如:class、id、element...
title
選擇器名稱
year
預設顯示年【可選,預設當前年】
month
預設顯示月【可選,預設當前月】
day預設顯示日【可選,預設當前日】
timeboo
true:使用年月日+時間 false:使用年月日 【可選,預設為false】
hour
預設顯示小時【可選,預設當前小時】
minute
預設顯示分鐘【可選,預設當前分鐘】
startyear
顯示年的開始區間開始時間 【可選,預設為當前年份的前後10年】
endyear
顯示年的開始區間結束時間 【可選,預設為當前年份的前後10年】
type
觸發事件元素的觸發事件型別 【
beforeaction
執行成功前的動作 無引數 中的文字1-5
afteraction
執行成功後的動作 引數1-5:選可選,預設'click'】
對於移動端的適配問題讓我們頭疼不已,而去應用別人的外掛程式難免出現和自己的適配不統一的情況,對此我特意寫了rem版本和px版本,可以根據自己的真實情況作出選擇
由於設計不同我們還可能需要修改顏色 只需要修改.sel-box .btn和.sel-con .border中的色值就好
如果在專案中有用不到的功能可以直接移除此方法,節省空間
如果感到有用就給個star吧 ~(~ ̄▽ ̄)~
你還在為移動端選擇器而捉急嗎? 原創
開題 得益於專案的上線,現在終於有時間來寫一點點的東西,雖然很淺顯,但是我感覺每經歷一次專案,我就學到了很多的東西,現在接著上次的文字輪播將本次專案中學到的其他東西分享出來。這次分享的是乙個基於jquery zepto的選擇器外掛程式 相信對於移動開發有過經驗的同學都對ui的不統一而感到頭疼,又不能...
你還在為移動端選擇器picker外掛程式而捉急嗎?
開題 得益於專案的上線,現在終於有時間來寫一點點的東西,雖然很淺顯,但是我感覺每經歷一次專案,我就學到了很多的東西,現在接著上次的文字輪播將本次專案中學到的其他東西分享出來。這次分享的是乙個基於jquery zepto的選擇器外掛程式 相信對於移動開發有過經驗的同學都對ui的不統一而感到頭疼,又不能...
基於Layui位址選擇器(移動端)
在基於layui進行移動端定製開發的時候,有乙個收貨位址模組需要設計,參考眾多,選擇了京東的位址選擇器基於layui進行仿照。由於資料統一採用伺服器維護,所以資料這裡不詳細介紹。實現看下我們需要實現的效果 效果圖 結構圖看到這裡使用過layui的同學應該知道怎麼做了。下面那層可以採用layui渲染模...