由于之前的[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的更多相关文章

  1. js组件开发-移动端地区选择控件mobile-select-area

    移动端地区选择控件mobile-select-area 由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空 ...

  2. asp.net mvc中使用jquery H5省市县三级地区选择控件

    地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...

  3. jquery mobiscroll移动端日期选择控件(无乱码)

    jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...

  4. 移动端日历选择控件(支持Zepto和JQuery)

    移动端日历选择控件(支持Zepto和JQuery) <!DOCTYPE html> <html> <head> <meta charset="utf ...

  5. Atitit.ui控件---下拉菜单选择控件的实现select html

    Atitit.ui控件---下拉菜单选择控件的实现select   html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& m ...

  6. 微信小程序实战:表单与选择控件的结合

    先上代码. login.wxml <mp-toptips msg="{{error}}" type="error" show="{{error} ...

  7. SNF开发平台WinForm之三-开发-单表选择控件创建-SNF快速开发平台3.3-Spring.Net.Framework

    3.1运行效果: 3.2开发实现: 3.2.1 这个开发与第一个开发操作步骤是一致的,不同之处就是在生成完代码之后,留下如下圈红程序,其它删除. 第一个开发地址:开发-单表表格编辑管理页面 http: ...

  8. 用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)

    本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...

  9. 使用sui实现的选择控件【性别、日期、省市级联】

    使用sui mobile做的选择控件,其中sm.js有修改,增加自定义api,详情请看index.html的注释,不多说了,上代码 <!DOCTYPE html> <html> ...

随机推荐

  1. android开发笔记(3)

    在android环境开发过程中,我最陌生的是虚拟机的创建以及使用,下面是虚拟机的创建以及使用过程. 创建虚拟机: 点击创建虚拟机的按钮,create->填写虚拟机相关的信息,确认之后创建. 创建 ...

  2. centos7 安装搜狗输入法

    1.root权限,卸载 ibus : yum remove ibus 2.加入EPEL源   sudo yum install epel-release 3.添加mosquito-myrepo源 su ...

  3. Mac could not read from remote repository

    IDE clone数据的时候要使用SSH,不使用HTTPS,就解决了问题

  4. Build.gradle的详细配置说明

    转自:http://blog.csdn.net/u012246458/article/details/51722624 apply plugin: 'com.android.application'/ ...

  5. Hive记录-Beeline常用操作命令

    Beeline和其他工具有一些不同,执行查询都是正常的SQL输入,但是如果是一些管理的命令, 比如进行连接,中断,退出,执行Beeline命令需要带上"!",不需要终止符.常用命令 ...

  6. 使用命令行管理maven项目

    创建maven java项目 自己创建一个文件夹,进入cmd,(shift+鼠标右键)这样创建的maven[java]项目就在该文件夹下了. 打开cmd第一种方式 打开cmd第二种方式 命令:mvn ...

  7. bash编程-正则表达式

    正则表达式与通配符有部分相似之处,但正则表达式更复杂也更强大. 通配符用于(完全)匹配文件名,支持通配符的命令有:ls.find.cp等: 正则表达式用于在文件中(包含)匹配字符串,支持的命令有:gr ...

  8. 单源最短路径算法——Bellman-ford算法和Dijkstra算法

     BellMan-ford算法描述 1.初始化:将除源点外的所有顶点的最短距离估计值 dist[v] ← +∞, dist[s] ←0; 2.迭代求解:反复对边集E中的每条边进行松弛操作,使得顶点集V ...

  9. 用react + redux + router写一个todo

    概述 最近学习redux,打算用redux + router写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 注意: 我只实现了Footer组件的router,其它组件的实现方法是类 ...

  10. 在Markdown中写注释

    概述 下面是我整理的在Markdown中写注释的几种方法,供自己开发时参考,相信对其他人也有用. html标签 既然Markdown内嵌html语法,那么就可以用可以用隐藏的html标签. 注意:需要 ...