1,这个组件解决什么问题

在IOS系统中,safari浏览器的select标签默认展示样式和iOS-UIPickerView展示方式一致,形如下图:

这个选择器操作方便,样式优美。但是在安卓系统中展示的样式就大相径庭了。iosselect是一个模拟ios下select标签展示交互的组件,它能实现在IOS和安卓的浏览器中交互样式一致。

2,通用性

实现一个特定的选择器不难,比如一个特定的地址选择器,时间选择器,单列选择器,难点在一个组件能实现多种不同的选择器,能适应多种需求。

iosselect实现了多种选择器,比如:

  • 一级级联,银行选择

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

  • 日期时间选择器,共6级,通过方法获取数据

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

可以自定义级联层级,实现多级选择器。

可以使用静态数据,通过parentid关联;也可以使用方法,实现ajax数据交互,然后再关联数据。

支持移动端rem布局,可以使用px和rem来书写样式

可以配置显示的项数

可以配置高度

3,使用

支持npm方式直接引用。

也支持静态文件引用,只需要引用一个js和css文件

具体文档可参看github:https://github.com/zhoushengmufc/iosselect

webapp通用选择器:iosselect的更多相关文章

  1. IE6中使用通用选择器模拟子选择器效果

    IE6及更低版本不支持高级选择器:IE7有个bug,对于子选择器和相邻同胞选择器,如果父元素和子元素有HTML注释,会出问题. 下面我们使用通用选择器来模拟子选择器的效果. 原理:首先在所有后代上应用 ...

  2. CSS选择器详解(二)通用选择器和高级选择器

    目录 通用选择器 高级选择器 子选择器 相邻兄弟选择器 属性选择器 通用选择器 通用选择器可以选择页面上的所有元素,并对它们应用样式,用 * 来表示. 语法: * { property1: value ...

  3. webapp万能选择器:iosselect

    iosselect是个什么东西? 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示.下面是 ...

  4. CSS 通用和分组选择器(十)

    一.通用选择器 通用选择器可能是所有选择器中最强大的,却使用最少的.通用选择器的作用就像是通配符,它匹配所有可用元素.通用选择器由一个星号表示.通用选择器一般用来对象页面上所有元素应用样式 例如:可使 ...

  5. jQuery中的基本选择器,id,class,元素,通用

    常用的基本选择器: 后续的补充选择器 为了后面看的方便,我们先将body中的内容展示出来: <body> <p> 账号:<input type="text&qu ...

  6. iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果

    具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的pi ...

  7. css选择器

    常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...

  8. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  9. CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

    web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...

随机推荐

  1. Query DSL(1)

    https://www.elastic.co/guide/en/elasticsearch/reference/2.3/query-dsl.html Query DSL GET _search { & ...

  2. Linux入门之常用命令(6)Bash命令重定向 管线命令

    命令重定向 将目前所得数据转移到其他地方 >  将输出结果导入文件 如  ls -l / >test     (1)若test文件不存在则创建 (2)若test文件存在 清空后写入 > ...

  3. 18.Llinux-触摸屏驱动(详解)

    本节的触摸屏驱动也是使用之前的输入子系统 1.先来回忆之前第12节分析的输入子系统 其中输入子系统层次如下图所示, 其中事件处理层的函数都是通过input_register_handler()函数注册 ...

  4. 概率图论PGM的D-Separation(D分离)

    目录[-] 本文大部分来自:http://www.zhujun.me/d-separation-separation-d.html 一.引言 二.三种情况分析 三.总结 四.应用例子 五.参考资料 其 ...

  5. Reliability diagrams

    Reliability diagrams (Hartmann et al. 2002) are simply graphs of the Observed frequency of an event ...

  6. Python in/not in --- if not/if + for...[if]...构建List+ python的else子句

    区分几个容易出错的地方: in 成员运算符 - 如果字符串中包含给定的字符返回 True >>>"H" in a True not in 成员运算符 - 如果字符 ...

  7. Python实战之Selenium自动化测试web刷新FW

    需求:将手工登录,手工刷新服务器的FW转化为Python+Selenium实现自动化操作. 1.创建用户表,实现数据与脚本分离.需要读取模块. 2.自动化刷新FW. 不说话,直接上代码: 1userd ...

  8. webpack2使用ch9-处理模板文件 .html .ejs .tpl模板使用

    1 目录展示 安装依赖 "ejs-loader": "^0.3.0","html-loader": "^0.4.5", ...

  9. 快速高效掌握企业级项目中的Spring面向切面编程应用,外带讲面试技巧

    Spring面向切面编程(AOP)是企业级应用的基石,可以这样说,如果大家要升级到高级程序员,这部分的知识必不可少. 这里我们将结合一些具体的案例来讲述这部分的知识,并且还将给出AOP部分的一些常见面 ...

  10. RN 常见问题

    React/RCTBridgeModule.h not found #import <React/RCTBridgeModule.h> 全部替换为 #import "RCTBri ...