webapp通用選擇器:iosselect

1,這個組件解決什麼問題

在IOS系統中,safari瀏覽器的select標籤默認展現樣式和iOS-UIPickerView展現方式一致,形以下圖:css

這個選擇器操做方便,樣式優美。可是在安卓系統中展現的樣式就截然不同了。iosselect是一個模擬ios下select標籤展現交互的組件,它能實如今IOS和安卓的瀏覽器中交互樣式一致。html

2,通用性

實現一個特定的選擇器不難,好比一個特定的地址選擇器,時間選擇器,單列選擇器,難點在一個組件能實現多種不一樣的選擇器,能適應多種需求。ios

iosselect實現了多種選擇器,好比:git

  • 一級級聯,銀行選擇

http://zhoushengfe.com/iosselect/demo/one/bank.htmlgithub

  • 二級級聯,三國殺將領組合選

http://zhoushengfe.com/iosselect/demo/two/sanguokill.htmlajax

  • 三級級聯,省市區選擇

http://zhoushengfe.com/iosselect/demo/three/area.htmlnpm

  • viewport縮放時處理方案

http://zhoushengfe.com/iosselect/demo/rem/bank.html瀏覽器

  • 日期選擇器 三級聯動,經過方法獲取數據,而且有加載中效果

http://zhoushengfe.com/iosselect/demo/datepicker/date.html佈局

  • 日期時間選擇器,共五級,經過方法獲取數據

http://zhoushengfe.com/iosselect/demo/five/time.htmlhtm

  • 日期時間選擇器,共6級,經過方法獲取數據

http://zhoushengfe.com/iosselect/demo/six/time.html

能夠自定義級聯層級,實現多級選擇器。

能夠使用靜態數據,經過parentid關聯;也能夠使用方法,實現ajax數據交互,而後再關聯數據。

支持移動端rem佈局,能夠使用px和rem來書寫樣式

能夠配置顯示的項數

能夠配置高度

3,使用

支持npm方式直接引用。

也支持靜態文件引用,只須要引用一個js和css文件

具體文檔可參看github:https://github.com/zhoushengmufc/iosselect

相關文章
相關標籤/搜索