js组件开发-移动端地区选择控件mobile-select-area
移动端地区选择控件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": ,
"name": "浙江省",
"child": [{
"id": "",
"name": "杭州市",
"child": [{
"id": ,
"name": "滨江区"
}]
}]
}, {
"id": ,
"name": "江苏省",
"child": [{
"id": "",
"name": "南京",
"child": [{
"id": ,
"name": "解放区"
}]
}]
}, {
"id": ,
"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
谢谢观看!
js组件开发-移动端地区选择控件mobile-select-area的更多相关文章
- 移动端地区选择控件mobile-select-area
由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空首地址的功能,也添加了更多api参数,首先我们先来看下这 ...
- asp.net mvc中使用jquery H5省市县三级地区选择控件
地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...
- 移动端日历选择控件(支持Zepto和JQuery)
移动端日历选择控件(支持Zepto和JQuery) <!DOCTYPE html> <html> <head> <meta charset="utf ...
- jquery mobiscroll移动端日期选择控件(无乱码)
jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...
- ASP.NET自定义控件组件开发 第五章 模板控件开发
原文:ASP.NET自定义控件组件开发 第五章 模板控件开发 第五章 模板控件开发 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接 ...
- ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl
原文:ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 第四章 组合控件开发CompositeControl 大家好,今天我们来实现一个自定义的控件,之前我们已经 ...
- ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 后篇 --事件冒泡
原文:ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 后篇 --事件冒泡 CompositeControl 后篇 --事件冒泡 系列文章链接: ASP.NET ...
- ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇
原文:ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇 第三章 为控件添加事件 好了,我们之前以前开发一个控件.而且也添加了属性,开发也很规范,但是那个控件还差最后一点:添加事件. 系列 ...
- ASP.NET自定义控件组件开发 第三章 为控件添加事件 后篇
原文:ASP.NET自定义控件组件开发 第三章 为控件添加事件 后篇 第三章 为控件添加事件 后篇 前一篇文章只是简单的说了下事件,但是大家应该方法,在ASP.NET自定义控件中只是简单那么定义事件是 ...
随机推荐
- FJWC2019 最短路
题目描述 有一张无向图,开始的时候所有边权为1,所有点没有权值,现在给定一个整数k,表示可以将k个点的点权设置为1,求点0到n-1的最短路最长是多少 Solution 网络流好题[然而本蒟蒻还是不会] ...
- .Net Core 发布异常 An assembly specified in the application
在Core 2.0站点发布时.. DotNet WW.kkkk.dll 报错..报文内容如下: Error: An assembly specified in the application depe ...
- Mac 10.12安装SVN工具SmartSVM 7.6
说明:SVN工具没有最好的,只有用的最顺手的. 下载: (链接: https://pan.baidu.com/s/1dFGqEsT 密码: uyjx)
- spring中排除某个类
在spring中可能需要排除某个类,做法是在spring配置文件中加入如下配置 <context:component-scan base-package="com.ias" ...
- hibernate关联关系的crud之级联
cascade级联,只会影响CRUD的CUD,不会影响读取.不设置级联,从多的一方能读出一的一方,设了级联,从一的一方,默认也不能读出多的一方. 如果两个对象之间有关联,不管是一对多,多对一,单向还是 ...
- 在Android中调用KSOAP2库访问webservice服务出现的服务端传入参数为null的问题解决
ksoap2-android-3.0.0-jar 第三方库来调用.net 写的Web Service 如果没有参数,那么调用一切顺利,但是如果服务是带参数的,那么服务端接收的参数都是nul. ...
- OpenJDK编译运行
获取OpenJDK源码有两种方式,其中一种是通过Mercurial代码版本管理工具从Repository中直接取得源码(Repository地址:http://hg.openjdk.java.net/ ...
- JDK源码--ArrayList浅析
先上别人的源码分析http://www.cnblogs.com/roucheng/p/jdkfenxi.html 这个链接也不错:http://www.jianshu.com/p/8d14b55fa1 ...
- json的使用(JObect,JsonData,JArray)
JObect与JsonData的区别 JsonData是JObect的简化版本 2.转换过程容易出的bug JsonData:当里面存在null就无法转换 解决方案: JsonData teamjd ...
- c# 删除文件,清理删除文件
c# 删除程序占用的文件,清理删除文件,彻底删除文件,解除文件占用 文件打开时,以共享读写模式打开 FileStream inputStream = new FileStream(name, File ...