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都不是问题。


H5万能选择器:iosselect的更多相关文章
- webapp万能选择器:iosselect
iosselect是个什么东西? 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示.下面是 ...
- H5 19-序选择器下
19-序选择器下 我是项目 我是项目 我是项目 我是项目 我是项目 我是项目 我是项目 <!DOCTYPE html> <html lang="en"> & ...
- H5 18-序选择器
18-序选择器 我是标题 我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 我是段落6 我是段落7 我是段落8 --> 我是段落1 我是段落2 我是段落2 我是标题 <!DOCT ...
- H5 后代选择器
12-后代选择器 我是段落 我是段落 我是段落 我是段落 我是段落 我是段落 <!DOCTYPE html> <html lang="en"> <he ...
- H5 id选择器和class选择器
11-id选择器和class选择器 第一段文字 第二段文字 第三段文字 --> 第一段文字 第二段文字 第三段文字 <!DOCTYPE html> <html lang=&qu ...
- H5 类选择器
10-类选择器 错误的写法: --> 迟到毁一生 早退穷三代 按时上下班 必成高富帅 我是段落 我是段落 <!DOCTYPE html> <html lang="en ...
- H5 id选择器
09-id选择器 迟到毁一生 早退穷三代 按时上下班 必成高富帅 <!DOCTYPE html> <html lang="en"> <head> ...
- H5 标签选择器
08-标签选择器 我是段落 我是段落 我是段落 我是段落 我是段落 我是标题 <!DOCTYPE html> <html lang="en"> <he ...
- vue 中使用querySelect 封装的万能选择器
function query (el) { if (typeof el === 'string') { var selector = el; el = document.querySelector(e ...
随机推荐
- css3 的 calc()函数在布局中的使用----头部高度固定,页面正好占满一屏
最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...
- SOA面向服务的架构理解
Ø 单一应用架构 ·当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本. Ø 垂直应用架构 当访问量逐渐增大,单一应用增加机器带来的加速度越来越小,将应用拆成互不相干的几 ...
- oracle 11g centos6 安装
选型:32位的内存是个瓶颈,已经是64位的时代了.使用64位的CentOS6 和 64位的Oracle 11g R2在虚拟机器安装,采用hostonly方式设置网络注意:能上网的网卡要设置一下ICS( ...
- 适用MySQL Migration Toolkit 1.0 将oracle迁移到mysql中遇到的问题
这里主要说一下我在适用中碰到的问题,主要过程参考 http://www.cnblogs.com/duwenlei/p/3520759.html. 首先启动MySQLMigrationTool.exe ...
- windows phone 8.1 FlipView 实现照片自动浏览
FlipView 控件也是一个集合控件,不过它和ListView等控件不同,ListView控件是一次显示多个项,而FlipView则是每次只显示一个项.在windows phone上通过默认的左右滑 ...
- 会话管理(Cookie/Session技术)
什么是会话:用户打开浏览器,点击多个超链接,访问服务器的多个web资源,然后关闭浏览器,整个过程就称为一个会话: 会话过程需要解决的问题:每个用户在使用浏览器与服务器进行会话的过程中,都可能会产生一些 ...
- python之数据结构链表实现方式
#!/usr/bin/env python # --------------------------------------- # author : Geng Jie # email : gengji ...
- 数位dp初步——数位dp的两种方式
数位dp:一类统计区间[L,R]内某种符合规定的数字个数的题目.特征是R的范围会很大,O(N)范围内无法完成. 一般而言,解决这类题目有两种方式,一种是递推,另一种是记忆化搜索. 递推: 1)利用dp ...
- 实现标签的添加与删除(tags)
在项目中会遇到,标签(tags)的添加与去除的需求 demo:我们有 tags '专利','商标','版权','域名' demand:在发布内容的时候,要求可以添加tag,(实现tag的增加与删除 ...
- new表达式如何创建对象
new表达式如何创建对象 前言 刚学java时曾一度认为,构造器中this指向是当前类型的对象,当我们调用new表达式时,由父类的构造器生成对象的一部分并初始化,然后再由子类的构造器补充成完整的对象并 ...