你還在為移動端選擇器而捉急嗎? 原創

2021-07-26 20:30:12 字數 4400 閱讀 3842

開題:得益於專案的上線,現在終於有時間來寫一點點的東西,雖然很淺顯,但是我感覺每經歷一次專案,我就學到了很多的東西,現在接著上次的文字輪播將本次專案中學到的其他東西分享出來。

這次分享的是乙個基於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渲染模...