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

webapp万能选择器:iosselect的更多相关文章

  1. H5万能选择器:iosselect

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

  2. webapp通用选择器:iosselect

    1,这个组件解决什么问题 在IOS系统中,safari浏览器的select标签默认展示样式和iOS-UIPickerView展示方式一致,形如下图: 这个选择器操作方便,样式优美.但是在安卓系统中展示 ...

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

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

  4. iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果

    具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的pi ...

  5. 前端笔记之jQuery(上)加载函数的区别&对象&操作HTML/CSS&动画&选择器

    一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...

  6. jQuery编程的最佳实践

    好像是feedly订阅里看到的文章,读完后觉得非常不错,译之备用,多看受益. 加载jQuery 1.坚持使用CDN来加载jQuery,这种别人服务器免费帮你托管文件的便宜干嘛不占呢.点击查看使用CDN ...

  7. jQuery最佳编程实践

    加载jQuery 1.坚持使用CDN来加载jQuery,这种别人服务器免费帮你托管文件的便宜干嘛不占呢.点击查看使用CDN的好处,点此查看一些主流的jQuery CDN地址. <script t ...

  8. Web 前端最佳实践

    Web 最佳实践   前端   选择器 尽量使用ID选择器 基于Id的选择器:先使用ID选择器定位,然后再使用find方法精确查找   // Fast: $( "#container div ...

  9. jquery实践

    转:http://www.cnblogs.com/Wayou/p/jquery_best_prictise.html jQuery编程的最佳实践   好像是feedly订阅里看到的文章,读完后觉得非常 ...

随机推荐

  1. ubuntu 切换java环境,配置单独的用户环境

    执行命令:sudo  update-alternatives --config javaThere are 2 choices for the alternative java (providing ...

  2. 用python抓取求职网站信息

    本次抓取的是智联招聘网站搜索“数据分析师”之后的信息. python版本: python3.5. 我用的主要package是 Beautifulsoup + Requests+csv 另外,我将招聘内 ...

  3. 构建微服务(Building Microservices)-PDF 文档

    闲时翻译了几篇基于Spring Cloud.Netflix OSS 构建微服务的英文文章,为方便分享交流,整理为PDF文档. PDF 文档目录: 目录 一.微服务操作模型... 3 1.     前提 ...

  4. 百度推出 MIP Shell 链接

    在站长将站点 MIP 化时,需要关注 URL 的一共有三个:MIP URL, MIP-Cache URL 以及 MIP-Shell URL. 从 URL 说起 在互联网中,URL 定义页面的地址,每个 ...

  5. Java虚拟机工作原理

    Java虚拟机工作原理 首先我想从宏观上介绍一下Java虚拟机的工作原理.从最初的我们编写的Java源文件(.java文件)是如何一步步执行的,如下图所示,首先Java源文件经过前端编译器(javac ...

  6. Previous operation has not finished; run 'cleanup' if it was interrupted

    在使用myeclipse的时候,点击保存的时候,控制台窗口总是弹出这个svn :Previous operation has not finished; run 'cleanup' if it was ...

  7. IIS7 / IIS7.5 URL 重写 HTTP 重定向到 HTTPS

    1.购买SSL证书,参考:http://www.cnblogs.com/yipu/p/3722135.html 2.IIS7 / IIS 7.5 下绑定 HTTPS 网站(购买Wildcard SSL ...

  8. 利用shell实现批量添加用户

    批量添加用户并设置随机密码,把添加的用户的名字和密码保存到文件中. [root@lamp scripts]# cat user.sh #!/bin/sh ` do pass=$(-) //取随机数的方 ...

  9. C#研究OpenXML之路(4-使用第三方库)

    一.悲催的OpenXML操作 学习并使用了一段时间的OpenXML,感觉用这个来操作Excel文件真是一件非常悲催的事情,由于我自己比较熟悉Excel COM的操作,但到了OpenXML中发现,之前所 ...

  10. 性能测试分享:MYSQL死锁

    poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨询电话010-845052 ...