webapp通用选择器:iosselect
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的更多相关文章
- IE6中使用通用选择器模拟子选择器效果
IE6及更低版本不支持高级选择器:IE7有个bug,对于子选择器和相邻同胞选择器,如果父元素和子元素有HTML注释,会出问题. 下面我们使用通用选择器来模拟子选择器的效果. 原理:首先在所有后代上应用 ...
- CSS选择器详解(二)通用选择器和高级选择器
目录 通用选择器 高级选择器 子选择器 相邻兄弟选择器 属性选择器 通用选择器 通用选择器可以选择页面上的所有元素,并对它们应用样式,用 * 来表示. 语法: * { property1: value ...
- webapp万能选择器:iosselect
iosselect是个什么东西? 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示.下面是 ...
- CSS 通用和分组选择器(十)
一.通用选择器 通用选择器可能是所有选择器中最强大的,却使用最少的.通用选择器的作用就像是通配符,它匹配所有可用元素.通用选择器由一个星号表示.通用选择器一般用来对象页面上所有元素应用样式 例如:可使 ...
- jQuery中的基本选择器,id,class,元素,通用
常用的基本选择器: 后续的补充选择器 为了后面看的方便,我们先将body中的内容展示出来: <body> <p> 账号:<input type="text&qu ...
- iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果
具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的pi ...
- css选择器
常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位
web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...
随机推荐
- JS中var和let
前 言 JavaScript 大家都知道声明一个变量时,通常会用'var'来声明,但是在ES6中,定义了另一个关键字'let'.今天我就为大家带来'var'与'let'这两个关键字声明有何异同 ...
- 均值滤波去除图像噪声的matlab程序
所谓均值滤波实际上就是用均值替代原图像中的各个像素值. 均值滤波的方法是:对待处理的当前像素,选择一个模板,该模板为其近邻的若干像素组成,用模板中的像素的均值来替代原像素. 优点:算法简单,计算速度快 ...
- JavaWeb(四)EL表达式
前言 前面详细的说明了什么是JSP和它的一些元素,这篇给大家介绍一下的是EL表达式. 用EL表达式,能更好的使用JSP中的各种内置对象和作用域. 楼主作为大四狗马上要出去面试了,内心很紧张!!! 一. ...
- 小程序的get和post请求头的区别
小程序在使用wx.request()接口 时 header 请求头默认是这样的 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' ...
- Jquery+Ajax限制查询间隔
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Jquery20150305.a ...
- nodejs+express-实现文件上传下载管理的网站
Nodejs+Express-实现文件上传下载管理的网站 项目Github地址(对你有帮助记得给星哟):https://github.com/qcer/updo 后端:基于nodejs的express ...
- Linux硬链接和软连接详解
硬链接: 硬链接是通过索引节点inode来进行链接的(关于inode,http://www.cnblogs.com/ZGreMount/p/7653307.html).在Linux(ext2,ext3 ...
- java 静态代码块 代码块 构造函数 静态成员变量 成员变量的初始化顺序
没有父类的情况 1,静态代码块-->静态成员变量-->成员变量(实例属性)-->代码块-->构造函数 2, 静态代码块 和 静态成员变量 只会初始化一次 有父类的情况 1,父类 ...
- Appium-desktop安装与使用
Appium-desktop是什么? 项目描述: Appium Server and Inspector in Desktop GUIs for Mac, Windows, and Linux. Ap ...
- Javascript之pixi框架学习
pixi 创建渲染器(renderer) 创建一个可以播放动画的区域,相当于(canvas). var renderer = PIXI.autoDetectRenderer(512, 512); do ...