js手机联动选择地区

前言：由于网上找到了一个mobiscrool，比较全，但是不开源，只能试用15天，正式版竟然要三千块钱，穷人只能自己动手，写了个只针对弹窗地区选择的。

本站点所有的资源均在github上可以查看源代码 GitHub https://github.com/tianxiangbing/mobile-select-area

demo地址请点击这里 http://www.lovewebgames.com/jsmodule/mobile-select-area.html

mobile-select-area

手机联动选择地区

用法

##注：依赖于[dialog](https://github.com/tianxiangbing/dialog)
    <!DOCTYPE>

    <html>

        <head>

            <title>选择地区</title>

            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

            <link rel="stylesheet" type="text/css" href="../dist/mobile-select-area.css">

            <link rel="stylesheet" type="text/css" href="../dist/dialog.min.css">

            <script type="text/javascript" src="../dist/zepto.js"></script>

            <script type="text/javascript" src="../dist/dialog.js"></script>

            <script type="text/javascript" src="../dist/dialog-jquery.min.js"></script>

            <script type="text/javascript" src="../dist/mobile-select-area.js"></script>

        </head>

        <body>

            <input type="text" id="txt_area" value="浙江省 杭州市 滨江区"/>

            <input type="hidden" id="hd_area" value="1,1,1"/>

            <script>

            var selectArea = new MobileSelectArea();

            selectArea.init({trigger:$('#txt_area'),value:$('#hd_area').val(),data:'data.json'});

            </script>

        </body>

    </html>

　　

属性及方法

trigger:

    触发弹窗的DOM元素 ，可以是input或其他

value:

    初始值,

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:

    选中后的回调，默认有填充trigger的value值，以及赋值它后面紧跟着的hidden的value值，以逗号分隔id，空格分隔文字

[js开源组件开发]js手机联动选择地区仿ios 开源git的更多相关文章

  1. [js开源组件开发]js手机联动选择日期 开源git

    js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,ht ...

  2. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  3. [js开源组件开发]js手机端浮层控件，并有多种弹出小提示，兼容pc端浏览器

    js dialog组件,包含alert和confirm的实现 本组件所有的资源均在github上可以查看源代码 GitHub 本dialog的组件的例子请在这里查看 demo dialog js di ...

  4. [js开源组件开发]js多选日期控件

    js多选日期控件 详情请见:http://www.lovewebgames.com/jsmodule/calendar.html 它的github地址:https://github.com/tianx ...

  5. [js开源组件开发]js文本框计数组件

    js文本框计数组件 先上效果图: 样式可以自行调整 ,它的功能提供文本框的实时计数,并作出对应的操作,比如现在超出了,点击下面的按钮后,文本框会闪动两下,阻止提交.具体例子可以点击demo:http: ...

  6. 【2015上半年总结】js开源组件开发系列索引

    js开源组件开发系列一索引 2015.8 by 田想兵 个人网站 从3月份进入新公司以来,时经五个月,我以平均每周1个小组件的速度,已经完成的js组件有22个之余了,已基本上全部用到实际项目中,这些小 ...

  7. [js开源组件开发]network异步请求ajax的扩展

    network异步请求ajax的扩展 在日常的应用中,你可能直接调用$.ajax是会有些问题的,比如说用户的重复点击,比如说我只希望它成功提交一次后就不能再提交,比如说我希望有个正在提交的loadin ...

  8. [js开源组件开发]数字或金额千分位格式化组件

    数字或金额千分位格式化组件 这次距离上一个组件<[js开源组件开发]table表格组件>时隔了一个月,由于最近的项目比较坑,刚挖完坑,所以来总结性提出来几个组件弥补这次的空缺,首先是金额和 ...

  9. [js开源组件开发]query组件,获取url参数和form表单json格式

    query组件,获取url参数和form表单json格式 距离上次的组件[js开源组件开发]ajax分页组件一转眼过去了近二十天,或许我一周一组件的承诺有了质疑声,但其实我一直在做,只是没人看到……, ...

随机推荐

  1. 使用ssh免密码登录其他机器

    本机 ssh-keygen -t rsa – cd ~/ssh – cp -p id_rsa.pub authorized_keys2 – chmod go-rwx authorized_keys2 ...

  2. asp.net中使用ueditor

    原文地址:http://blog.uoolo.com/Article/16 还有在MVC中使用ueditor:http://blog.uoolo.com/Article/111 最初百度了一下“编辑器 ...

  3. apache下virtualhost与location合用配置转发SVN控制访问

    使用apache的文件系统配置 使用virtualhost 实现location 重定向 NameVirtualHost *:80 <VirtualHost *:80> ServerNam ...

  4. Android Launcher 研究学习

    Launcher是系统启动后第一个启动的程序,是其它应用程序的入口,也就是我们的手机程序的桌面程序; 一.Launcher的定义及构成: <1>通过查看官方提供的Launcher源码可以知 ...

  5. 配置 Sublime Text 用 Node.js 执行 JavaScript 程序

    1. 首先到 nodejs.org 下载 Node.js 安装包并安装. 2. 打开 Sublime Text 2 编辑器.选择菜单 Tools --> Build System --> ...

  6. lucene.net的一个动态更新类

    工作的需要,需要对于lucene.net索引即时的更新,毕竟lucene.net的索引重建的话比较慢,数据量大的时候建下要几天,所以就写个了缓冲类来解决即时的更新的问题,其实还是比较简单的. 大体上的 ...

  7. NTKO Officecontrol在线Word编辑器的使用

    1.何时进行手工卸载和安装 一般情况下应该让客户端自动控件,这样当服务器控件版本更新时,客户端可以获得自动升级方面的好处.但是,如果因为客户机配置有问题,或者有其它拦截工具拦截的原因无法自动安装控件, ...

  8. 【Machine Learning】机器学习の特征

    绘制了一张导图,有不对的地方欢迎指正: 下载地址 机器学习中,特征是很关键的.其中包括,特征的提取和特征的选择.他们是降维的两种方法,但又有所不同: 特征抽取(Feature Extraction): ...

  9. 《javascript模式》 容易踩中的那些坑

    1 链式赋值的陷阱 1: function func(){ 2: var innerVar = globalVar = 20; 3: } 4: func(); 5: console.log(typeo ...

  10. c# 无法引用自己创建的类库

    今个测试一个项目,居然无法引用自己创建的类库,我很费解,然后各种测试,修改修饰符,更改强类型,各种测试,最后无聊点开类库的属性  发现居然需要引用的项目与被引用的类库的框架不一样,修改了之后就可以正常 ...