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. Android开发使用的常见第三方框架

    1.SlidingMenu 官网:https://github.com/jfeinstein10/SlidingMenu 网友使用:http://blog.csdn.net/yangyu2012122 ...

  2. supermap开发webgis的经验

    SuperMap 开发WebGIS的经验总结 - 综合课件 - 道客巴巴 http://www.doc88.com/p-743552004620.html

  3. (10)集合之双列集合Map,HashMap,TreeMap

    Map中的元素是两个对象,一个对象作为键,一个对象作为值.键不可以重复,但是值可以重复. 看顶层共性方法找子类特有对象. Map与Collection在集合框架中属并列存在 Map存储的是键值对 Ma ...

  4. Ubuntu 16.04系统下安装RapidSVN版本控制器及配置diff,editor,merge和exploer工具

    在Window下我们使用TortoiseSVN(小乌龟),可以很方便地进行查看.比较.更新.提交.回滚等SVN版本控制操作. 在Linux下我们可以使用RapidSVN.RapidSVN是一款轻量级的 ...

  5. Windows搭建以太坊的私有链环境

    1.下载Geth.exe 运行文件,并安装 https://github.com/ethereum/go-ethereum/releases/ 下载后,只有一个Geth.exe的文件 2.cmd进入按 ...

  6. ASP.NET Core MVC 源码学习:详解 Action 的激活

    前言 在 上一篇 文章中,我们已经学习了 ASP.NET Core MVC 的启动流程,那么 MVC 在启动了之后,当请求到达过来的时候,它是怎么样处理的呢? 又是怎么样把我们的请求准确的传达到我们的 ...

  7. Diary of Codeforces Round #402 (Div. 2)

    这一场的表现可以用"全程智障"4个字,生动传神地描述出来. About 写题: A. 写了一堆if比较大小, 这很勤勉.(绝对值君对自己の存在感为0表示很难过.) B. 题,直接读 ...

  8. Xamarin android 的WebClient Json下载并存储本地及sqlite数据库

    这一点雕虫小技可能对熟悉的人来说已经不值一提.但是我想,既然这些都是常用的功能,集成在一起做个笔记也有点意义吧. 首先,json 是传递数据的事实标准了.所以先说一下将它从服务器端下载下来..net ...

  9. Linux云自动化运维第八课

    第十三单元 软件安装 一.软件名称识别 [abrt-addon-ccpp]-[2.1.11-19].[el7].[x86_64].rpm ###rpm结尾的适用与redhat操作系统 ||       ...

  10. 《Java Performance》笔记1——性能分析基础 2

    4.内存使用率: 内存使用率的相关属性包括页面调度或页面交换.加锁.线程迁移中的让步式和抢占式上下文切换. 当应用运行所需的内存超过可用物理内存时,就会发生内存页面交换,系统在进行页面交换或使用虚拟内 ...