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. iOS回顾笔记(07) -- UITableView的使用和性能优化

    iOS回顾笔记(07) -- UITableView的使用和性能优化 如果问iOS中最重要的最常用的UI控件是什么,我觉得UITableView当之无愧!似乎所有常规APP都使用到了UITableVi ...

  2. Linux中web服务运行情况的方法

    监控一般通过脚本实现,使用定时任务定期执行检测. 1.端口 本地:ss,netstat,lsof 远程:telnet,namp,nc 2.本地进程数 例如: lsof -i:80|wc -l ps - ...

  3. Oracle SQL 语言分类

     Oracle SQL语句分类 2008-06-17 11:15:25 分类: Linux * 2008/06/17  星期二*蒙昭良*环境:WindowsXP + Oracle10gR2*Oracl ...

  4. 重温Javascript(一)

    工作中要用到JavaScript,一组复习笔记. 一些看法 1. 想想JavaScript目前最常用的宿主环境,浏览器或者服务端V8,都是单线程,所以不用过多的考虑并发的问题,如果是协程来实现异步的方 ...

  5. 老李推荐:第14章8节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-获取控件列表并建立控件树 5

    看这段代码之前还是请回到“图13-6-1 NotesList控件列表”中重温一下一个控件的每个属性名和值是怎么组织起来的: android.widget.FrameLayout@41901ab0 dr ...

  6. 老李推荐:第8章2节《MonkeyRunner源码剖析》MonkeyRunner启动运行过程-解析处理命令行参数 2

    我们这一节会先去分析下monkeyrunner是如何对参数进行处理的,我们跳转到MonkeyRunnerOptions这个类里面的processOptions这个方法: 93   public sta ...

  7. 1.XML规范

    1.1 XML命名规范 XML 元素必须遵循以下命名规则: • 名称可以含字母.数字以及其他的字符 • 名称不能以数字或者标点符号开始 • 名称不能以字符“xml”(或者XML.Xml)开始 • 名称 ...

  8. 构造器和多态(Chapter8.3)

    构造器不具有多态性(它们是static方法,只不过该static声明是隐式的),但还是非常有必要理解构造器怎样通过多态在复杂的层次结构中运作,这一理解将有助于大家避免一些令人不快的困扰. 在main中 ...

  9. Java ClassLoader加载机制

    一.体系结构(自上向下) 1.Bootstrap ClassLoader(BootStrapClassLoader) --- 启动类加载器或者叫引导类加载器,加载jdk核心的APIs,这些APIs一般 ...

  10. AOP学习笔记一

    软件开发的目的是为了解决各种需求,包括业务需求和系统需求.目前,业界通过使用面向对象的编程思想,已经可以对业务需求等普通关注点进行很好的抽象与封装,并且使之模块化.但是对于系统需求一类的关注点来说,情 ...