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 ...
随机推荐
- MySQL 5.6 从库开启 crash-safe 功能
原文:Enabling crash-safe slaves with MySQL 5.6 可以对从库进行配置 crash-safe 功能是 MySQL 5.6 关于复制的一个重大改进.然而,我们注意到 ...
- php函数的使用
<?php header("Content-type:text/html; charset=utf-8"); //普通函数 echo "<br/>--- ...
- Bootsrap 的 Carousel
一.简介 Carousel 就是指轮播图,这里 有完整的代码例子.它可以很简单的就构造出来,结构如下: div.carousel.slide[data-ride="carousel" ...
- SharePoint 切换用户的小技巧
前言 从SharePoint 2013开始,SharePoint就已经去掉了”Sign in as Different User”这个功能,也就是无法切换用户登录.当然,后来我们通过修改CONTROL ...
- 如何用photoshop把一张图片分割成几张图片呢?
今天情人节,祝大家节日快乐!朋友发来一张照片,我发现这张照片是几张照片组合起来的,是不是感觉每一张都是萌萌哒呢?为了体现单张的独特性,现在我要把它切分成单张,使用Photoshop CS5该怎么弄呢? ...
- Vim快速入门
学习自:实验楼 Vim具有6种基本模式和5种派生模式 普通模式: vim启动后的默认模式,常用的编辑器命令诸如移动光标,删除文本. 普通模式中,有很多方法进入插入模式,常用 a 或 i 键. 插入模式 ...
- MCMC(二)马尔科夫链
MCMC(一)蒙特卡罗方法 MCMC(二)马尔科夫链 MCMC(三)M-H采样和Gibbs采样(待填坑) 在MCMC(一)蒙特卡罗方法中,我们讲到了如何用蒙特卡罗方法来随机模拟求解一些复杂的连续积分或 ...
- 老李推荐: 第3章2节《MonkeyRunner源码剖析》脚本编写示例: MonkeyDevice API使用示例 4
第七步:保存新增加日记 代码3-2-7 增加日记-保存日记 #Step7: Save the note by touch on the "save" menu entry by c ...
- 1.熟悉Java基本类库系列 - 目录
写这个系列是想让自己多熟悉熟悉Java的基本类库,忘记的时候可以在这里看看之前写过的例子,这样就可以很快的回忆起来如何使用了. 这样就可以很节省时间了. ======= 下面是传送门啦 ======= ...
- Linux命令的复习总结学习
1.-------------------------linux系统介绍------------------------------------------------------- Linux是一套 ...