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. Android开发之基于监听的事件处理

    在Android 应用开发过程中,常用监听事件如下:(1) ListView事件监听setOn ItemSelectedListener:鼠标滚动时触发setOnItemClickListener: ...

  2. CentOSv6.8 修改防火墙配置、修改SSH端口

    查看防火墙目前使用状况: service iptables status 修改防火墙配置: vi /etc/sysconfig/iptables 重启防火墙,让刚才修改的配置生效: service i ...

  3. 剑指offer(纪念版) 面试题3:二维数组中的查找

    题目:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数.   第一种方法题目说不可行 ...

  4. 机器学习-KNN分类器

    1.  K-近邻(k-Nearest Neighbors,KNN)的原理 通过测量不同特征值之间的距离来衡量相似度的方法进行分类. 2.  KNN算法过程 训练样本集:样本集中每个特征值都已经做好类别 ...

  5. TCP/IP 第二章

    1, 以太网的封装格式.其中MTU的最小值为46字节,所以,ARP和RARP需要添加18字节的PAD.CRC是检验和.(循环冗余检验) 2,SLIP:(串行线路ip) 首尾一个end字符加以区分数据. ...

  6. hdu 5954 -- Do not pour out(积分+二分)

    题目链接 Problem Description You have got a cylindrical cup. Its bottom diameter is 2 units and its heig ...

  7. 给vue项目添加ESLint

    eslint配置方式有两种: 注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里 配置文件:使用一个js,JSON或者YAML文件来给整个目录和它的子目录指定配置信息.这些配置可以写在一 ...

  8. cookie存储中文

    写cookie         Cookie   chineseCookie   =   new   Cookie( "chineseCookie ",   URLEncoder. ...

  9. Java面向对象 Main函数 静态的应用 单例设计模式

     Java面向对象 Main函数 静态的应用与单例设计模式 知识概要             (1)Main函数的细解 (2)静态的应用,静态变量,静态代码块,静态函数 (3)单例设计模式 1.M ...

  10. WPF第三方控件Telerik

    帮助文档:http://www.telerik.com/help/wpf/gridview-selection-via-checkbox.html Telerik专注于微软.Net平台的表示层与内容管 ...