移动端地区选择控件mobile-select-area
由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空首地址的功能,也添加了更多api参数,首先我们先来看下这次的效果图.
它的github地址请点击https://github.com/tianxiangbing/mobile-select-area
它的demo演示请点击 http://www.lovewebgames.com/jsmodule/mobile-select-area.html

这次还是依然引用了dialog这个插件,但删除了zeptojs,改用成了jquery,因为zepto还是有一些动画的计算有问题,当然也可以兼容zeptojs,随你喜欢吧,但去除了tap事件,改用click事件,你可以选择加载fastclick这个插件来加快点击速度 。
好了,先来介绍下API
default:0||1
0为空,true时默认选中第一项,默认1
trigger:
触发弹窗的DOM元素 ,可以是input或其他
value:
初始值,
level: int
级别数,默认是3级的
separator: ,
id值分隔符
eventName:tap|click
触发事件名称,默认click,使用zeptojs的可以用tap事件
data:
当data为json对象时可以直接解析,此时直接接收数组
当data为string发送ajax请求后返回json,格式如下:

{
"data": [{
"id": 1,
"name": "浙江省",
"child": [{
"id": "1",
"name": "杭州市",
"child": [{
"id": 1,
"name": "滨江区"
}]
}]
}, {
"id": 2,
"name": "江苏省",
"child": [{
"id": "1",
"name": "南京",
"child": [{
"id": 1,
"name": "解放区"
}]
}]
}, {
"id": 3,
"name": "湖北省"
}]
}

callback:function(scroller,text,value)
第一个是容器,第二个是选中后的text值,第三个参数是选中后的id。
并且this指向当前对象。
选中后的回调,默认有填充trigger的value值,以及赋值它后面紧跟着的hidden的value值,以逗号分隔id,空格分隔文字
通过这个插件,我们还可以通过修改数据源的方式滋生出另一个组件,就是日期选择组件,如下图:

JS组件-手机端选择日期的地址是:http://www.lovewebgames.com/jsmodule/mobile-select-date.html
github源码地址是:https://github.com/tianxiangbing/mobile-select-date
谢谢观看!
移动端地区选择控件mobile-select-area的更多相关文章
- js组件开发-移动端地区选择控件mobile-select-area
移动端地区选择控件mobile-select-area 由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空 ...
- asp.net mvc中使用jquery H5省市县三级地区选择控件
地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...
- jquery mobiscroll移动端日期选择控件(无乱码)
jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...
- 移动端日历选择控件(支持Zepto和JQuery)
移动端日历选择控件(支持Zepto和JQuery) <!DOCTYPE html> <html> <head> <meta charset="utf ...
- Atitit.ui控件---下拉菜单选择控件的实现select html
Atitit.ui控件---下拉菜单选择控件的实现select html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& m ...
- 微信小程序实战:表单与选择控件的结合
先上代码. login.wxml <mp-toptips msg="{{error}}" type="error" show="{{error} ...
- SNF开发平台WinForm之三-开发-单表选择控件创建-SNF快速开发平台3.3-Spring.Net.Framework
3.1运行效果: 3.2开发实现: 3.2.1 这个开发与第一个开发操作步骤是一致的,不同之处就是在生成完代码之后,留下如下圈红程序,其它删除. 第一个开发地址:开发-单表表格编辑管理页面 http: ...
- 用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)
本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...
- 使用sui实现的选择控件【性别、日期、省市级联】
使用sui mobile做的选择控件,其中sm.js有修改,增加自定义api,详情请看index.html的注释,不多说了,上代码 <!DOCTYPE html> <html> ...
随机推荐
- FJOI2018 部分题解
领导集团问题 考虑对每一个点暴力dpdpdp:fi,jf_{i,j}fi,j表示iii为根的子树选出来的点集最小值不小于jjj的点集元素个数最大值. 那么显然fi,j=∑max{fv,k≥j}+1 ...
- 从中央仓库下载所想要的jar包
中央仓库地址:https://mvnrepository.com/ 这边我搜索一个commons-logging包作为例子: 点击下面第二个绿色的comons-logging进入这个页面: 一.win ...
- brew安装和换源
命令行执行ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)&q ...
- GitHub上好的Java项目
1. java-design-patterns(Star:36k)Github地址:https://github.com/iluwatar/java-design-patterns 介绍:设计模式是形 ...
- 前端之html概述及基本结构
html概述: HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标 ...
- iOS逆向之class-dump
1.class-dump class-dump是用来dump目标文件的类信息的工具.它利用Objective-C语言的runtime的特性,将存储在mach-O文件中的@interface和@prot ...
- SDWebImage之SDWebImageManager
SDWebImageManager是SDWebImage的核心类.它拥有一个SDWebImageCache和一个SDWebImageDownloader属性,分别用于图片的缓存和下载处理.虽然是核心类 ...
- 3.复杂的viewpager
实现这样的效果: 1.主页面布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quo ...
- 15:IO之File、Properties类
第一 File类 一.概述:File类是有文件或文件件封装而来的对象,可以操作其属性信息,这个类的出现弥补了流的不足,流只能操作数据 1.特点: 1)用来将文件或文件夹封装成对象 2)方便于对文件与 ...
- 在jsp的js和css里面使用EL表达式取值|style里面用$取值
众所周知,如果直接在jsp的js或者css语句块里面写${***}取值的话,程序会不识别这玩意,但是,我们有时候确实需要动态取值,比如,js为了获得对象的某一个值,不方便用js的getElementB ...