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. ML的灌水现象

    (http://demonstrate.ycool.com/post.3137870.html) 看了几天 paper 和书,发现自己果然就是 zt好多东西就是不懂,那些人做的真快,我才建立起一种大致 ...

  2. mono+jexus 验证码不显示：System.Drawing

    System.ArgumentException The requested FontFamily could not be found [GDI+ status: FontFamilyNotFoun ...

  3. Redis内存数据库在Exchange会议室的应用

    本文论述了现有Exchange会议室应用现状和不足之处,并详细介绍了Redis内存数据库在Exchange会议室的应用,并给出了一种高性能的应用架构及采用关键技术和关键实现过程,最终实现大幅改进系统性 ...

  4. 判断JavaScript对象为null或者属性为空

    http://blog.csdn.net/yiluoak_47/article/details/7766760 首先说下null与undefined区别: 对已声明但未初始化的和未声明的变量执行typ ...

  5. Ubuntu桌面版本和服务器版本之间的区别（转载）

    转载自:http://blog.csdn.net/fangaoxin/article/details/6335992 http://www.linuxidc.com/Linux/2010-11/297 ...

  6. Safari下默认10位数字为电话号码，点击拨号

    <meta content="telephone=no" name="format-detection"/>

  7. apache 500错误

    一直以为开了error_log,没想没有加,于是折腾了好久. 开启error_log后,发现是xdebug的max_nesting_level值太小了. 还一个原因是.htaccess文件中的 < ...

  8. IIS限制ip访问

    1.禁止IP访问 http://jingyan.baidu.com/article/22fe7ced0462633002617f39.html 2.限制IP访问频率 http://q.cnblogs. ...

  9. AssetBundle系列——游戏资源打包（一）

    将本地资源打包,然后放到资源服务器上供游戏客户端下载或更新.服务器上包含以下资源列表:(1)游戏内容资源assetbundle(2)资源维护列表,包含每个资源的名字(完整路径名)和对应的版本号[资源名 ...

  10. 基于kubernetes构建Docker集群管理详解-转

    http://blog.liuts.com/post/247/ 一.前言        Kubernetes 是Google开源的容器集群管理系统,基于Docker构建一个容器的调度服务,提供资源调度 ...