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的更多相关文章

  1. webapp万能选择器:iosselect

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

  2. H5 19-序选择器下

    19-序选择器下 我是项目 我是项目 我是项目 我是项目 我是项目 我是项目 我是项目 <!DOCTYPE html> <html lang="en"> & ...

  3. H5 18-序选择器

    18-序选择器 我是标题 我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 我是段落6 我是段落7 我是段落8 --> 我是段落1 我是段落2 我是段落2 我是标题 <!DOCT ...

  4. H5 后代选择器

    12-后代选择器 我是段落 我是段落 我是段落 我是段落 我是段落 我是段落 <!DOCTYPE html> <html lang="en"> <he ...

  5. H5 id选择器和class选择器

    11-id选择器和class选择器 第一段文字 第二段文字 第三段文字 --> 第一段文字 第二段文字 第三段文字 <!DOCTYPE html> <html lang=&qu ...

  6. H5 类选择器

    10-类选择器 错误的写法: --> 迟到毁一生 早退穷三代 按时上下班 必成高富帅 我是段落 我是段落 <!DOCTYPE html> <html lang="en ...

  7. H5 id选择器

    09-id选择器 迟到毁一生 早退穷三代 按时上下班 必成高富帅 <!DOCTYPE html> <html lang="en"> <head> ...

  8. H5 标签选择器

    08-标签选择器 我是段落 我是段落 我是段落 我是段落 我是段落 我是标题 <!DOCTYPE html> <html lang="en"> <he ...

  9. vue 中使用querySelect 封装的万能选择器

    function query (el) { if (typeof el === 'string') { var selector = el; el = document.querySelector(e ...

随机推荐

  1. Java的一些基础知识

    1.do-while循环不论循环条件判断结果,至少会执行一次. 2.Javac用于Java源代码文件编译成字节码的编译器. 3.import关键字导入包. 4.Java是Sun公司与1995年退出的高 ...

  2. rsync+inotify脚本

        #!/bin/bash src=/data/                           # 需要同步的源路径 des=data                             ...

  3. Angular2之管道学习笔记

    管道.可以把一个输出流与另一个输入流连接起来.类似 linux.gulp都有应用. 在Angular2中使用管道非常方便.Angular2中本身提供了一些内置管道.当然也可以自定义管道. 文档链接:h ...

  4. 一个基于php+mysql的外卖订餐网站(带源码)

    订饭组 一个基于php+mysql的外卖订餐网站,包括前端和后台.源码地址 源码演示地址:http://dingfanzu.com 商家后台系统:http://dingfanzu.com/admin ...

  5. For循环及例题

    For循环    (1)循环操作某一个功能(执行某段代码)    (2)四要素                  循环初始值                  循环条件                 ...

  6. iOS截取http/https流量

    0x01.Why? 做移动测试的同学经常会在app和server中间架设一个代理(例如charles或者fiddler等),由经代理,app和server之间的交互及交互内容变得可视化,使得我们不再摸 ...

  7. java里的日期时间

    为了更好理解java的日期时间类,在这里我们先介绍一下关于历法.标准时间的一些概念. 历法有很多种,我们大中华上下五千年,自然也有自己的历法,生活中我们通常把自己传统的历法叫做农历,也有人叫它阴历或夏 ...

  8. bootstrap file input 官方文档翻译

    file Input官方文档 中文翻译 file input 特性 1.这个插件会把简单的html文件变成一个更好用的文件选择输入控件,通过一个html的文件输入框,能兼容那些不支持jquery或js ...

  9. window7使用svn(svn系列 客户端 知识二总结)

     ♣eclipse插件subclipse  ♣TortoiseSVN  ♣svn操作  ♣注意事项 使用svn可以在eclipse直接装subclipse或者在windows使用TortoiseSVN ...

  10. 20155231 2016-2017-2 《Java程序设计》第5周学习总结

    # 20155231 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 学习目标 理解异常架构 掌握try...catch...finally处理异常的方法 会 ...