H5万能选择器：iosselect

iosselect是个什么东西？

移动端浏览器对于select的展示样式是不一致的，ios下是类似原生的picker，安卓下各浏览器展示各异，我们需要一个选择器组件来统一各端下各种浏览器的展示。下面是它的一个截图：

iosselect 项目地址：

文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect

iosselect能做什么？

移动端开发中，经常遇到选择器功能，常见的时间选择，日期选择，地区选择，单列选择。iosselect完美实现一个组件实现各种选择器的功能。

先看demo:

一级级联，银行选择

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

二级级联，三国杀将领组合选

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

三级级联，省市区选择

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

viewport缩放时处理方案

http://zhoushengfe.com/iosselect/demo/rem/bank.html

日期选择器 三级联动，通过方法获取数据，并且有加载中效果

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

日期时间选择器，共五级，通过方法获取数据

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

iosselect的优势

iosselect接口丰富，适用于多类场景

可以定制依赖关系，规定各层级之间是否有关联。

可以定制选择层级，支持1-5层选择。

可以定制各项高度，可以规定展示项数，默认展示7项。

移动端rem应用普遍，无论你是px还是rem，使用iosselect都完全不是问题。

可以提供静态数据，也可以使用方法获取数据，支持同步方法和异步方法。

iosselect基于iscroll5开发，除此外无任何依赖，所以无论你是react还是angular还是vue还是zepto jquey都不是问题。

时间： 2024-08-06 10:21:36

H5万能选择器：iosselect的相关文章

webapp万能选择器：iosselect

iosselect是个什么东西? 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示.下面是它的一个截图: iosselect 项目地址: 文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect iosselect能做什么? 移动端开发中,经常遇到选择器功能,常见的时间选择,日期选择,地区选择,单列选择.iosselect完

H5 18-序选择器

18-序选择器 .para:only-of-type { color: red } 我是段落1 我是段落2 我是段落2 我是标题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>18-序选择器</title> <style> /* p:first-child{ color: red; } */

H5 19-序选择器下

19-序选择器下 p:nth-child(3n) { color: red } 我是项目 我是项目 我是项目 我是项目 我是项目 我是项目 我是项目 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>19-序选择器下</title> <style> /* p:nth-child(odd){ co

h5关于选择器以及class的小加强

1.querySelector和querySelectorAll 这两个方法类似于jquery的选择器 document.querySelector('.box')  document.querySelectorAll('.box')前者只能选择一组中的第一个,后者选择一组元素. 2.getElementsByClassName document.getElementsByClassName('box') 选择的结果也是一组元素的集合. 3.获取class列表属性 obj.classList 得

H5 类选择器

10-类选择器 .pp { color: red } .ppp { color: green } .pppp { color: blue } .ppppp { color: yellow } .para1 { font-size: 100px } .para2 { font-style: italic } 迟到毁一生 早退穷三代 按时上下班 必成高富帅 我是段落 我是段落 <!DOCTYPE html> <html lang="en"> <head>

H5 id选择器

09-id选择器 #identity1 { color: red } #identity2 { color: green } #identity3 { color: blue } #identity4 { color: yellow } 迟到毁一生 早退穷三代 按时上下班 必成高富帅 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

H5 标签选择器

08-标签选择器 p { color: red } h1 { color: blue } 我是段落 我是段落 我是段落 我是段落 我是段落 我是标题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08-标签选择器</title> <style> p{ color: red; } h1{ co

前端老鸟的这2年

细算下来,楼主已经做前端7年了,也算前端老鸟了,随著经验的积累,楼主也造了很多轮子,也经历了很多事情,本文就记录下楼主这2年在技术上的一些积累. 楼主按从页面到组件,到工具化的东西一一陈诉 1,页面开发:前端自适应方案adaptive.js及px-rem工具 楼主之前一直在做webapp,解决页面自适应问题首当其冲,楼主当时选择了rem了,网上的资料很多都是和淘宝的flexible思路一致,其最大缺点是计算不方便,楼主当时想了一个解决方案,让设计图的1px对应0.01rem,这样开发起来就非常方

JS选择器querySelector和~All，三个原生选择器

比较高级的万能选择器,比较常用 定义: querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素. 注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素.如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代. 语法 document.querySelector(CSS selectors) 参数值 参数 类型 描述 CSS 选择器 String 必须.指定一个或多个匹配元素的 CSS 选择器. 可以使用它们的 id,