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实现一些客户端的功能 ...
随机推荐
- [USACO 3.3.1]骑马修栅栏t
[USACO 3.3.1]骑马修栅栏 时间限制: 1 Sec 内存限制: 64 MB提交: 39 解决: 17[提交][状态][讨论版] 题目描述 农民John每年有很多栅栏要修理.他总是骑着马穿 ...
- Postgresql在线备份和恢复
1.实验环境 OS: RedHat Linux Enterprisedb 6.3 DB: postgresql 9.3 PGHOME: /opt/PostgreSQL/9.3 PGDATA: /opt ...
- libsvn_subr-1.so.0: undefined symbol: apr_atomic_xchgptr 故障解决
源码编译安装完成之后,查看svn的安装版本会报以下错误 svn: symbol lookup error: /usr/local/subversion/lib/libsvn_subr-.so.: un ...
- IDL 指针
IDL指针与C.C++和FORTRAN等其他程序语言的指针不同,它所处的多变量是可以动态分配内存的全局变量,不只想真正的内存地址 1.创建和访问指针 指针用指针函数Ptr_New()来创建,通过“*” ...
- UITextView实现限制100字
placeHoderLable = [[UILabel alloc]initWithFrame:CGRectMake(3, 3, DeviceWidth-6, 40)]; //根据情况调节位置 pla ...
- springMvc+hibernate的web application的构建
闲来没事,想整理下一些知识. 这篇文章是关于spring的web程序的搭建,有什么不对的地方希望大家批评指正. 首先我们要了解什么是spring,这里可能很多大家也都明白,无非是一个管理对象的一个容器 ...
- 如何在 UWP 使用 wpf 的 Trigger
本文需要告诉大家,如何使用 Behaviors 做出 WPF 的 Trigger ,需要知道 UWP 不支持 WPF 的 Trigger . 安装 Behaviors 请使用 Nuget 安装,可以输 ...
- canvas图表详解系列(5):雷达(面积)图
雷达(面积)图 本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种 ...
- Java方法使用的有点总结
方法使用的优点: 1-将解决问题的方法与主函数代码分开,逻辑更清晰,代码可读性更强. 2-若方法出错,则程序可以缩小为只在该方法中查找错误,使代码更容易调试. 3-方法是解决一类问题的抽象,一旦写成功 ...
- RAID 构建
RAID的创建 第一步:先查看我们系统的磁盘情况 [root@station40 ~]# lsblk NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT sda ...