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. Solution to “VirtualBox can't operate in VMX root mode” error in Windows 7

    I was trying out various virtualization solutions on Windows 7, including Microsoft Virtual PC and V ...

  2. SSAS：菜鸟摸门

    官方:SSAS 多维模型 Analysis Services 多维解决方案使用多维数据集结构来分析多个维度之间的业务数据. 多维模式是 Analysis Services 的默认服务器模式. 它包括针 ...

  3. JsonView Tool

  4. android.support.v4包中的LruCache源码简读

    package android.util; import java.util.LinkedHashMap; import java.util.Map; /** * A cache that holds ...

  5. 调皮的MySQL服务 请你不要再躲猫猫

    问题说明 Win10企业版 64位: MySQL5.6 64位: 临时在本机部署一套系统,需要用到MySQL,发现Windows服务下居然找不到MySQL这个服务,原先配置好的GUI以及应用程序都连不 ...

  6. linux2.6.24内核源代码分析（1）——扒一扒sk_buff

    最近研究了linux内核的网络子系统上的网络分组的接收与发送的流程,发现这个叫sk_buff的东西无处不在,内核利用了这个结构来管理分组,在各个层中传递这个结构,因此sk_buff可以说是linux内 ...

  7. 自己动手模拟百分百<select>下拉列表

    浏览器默认的下拉确实不好用啊,主要是样式不好修改和统一. (一)下手之前先理清一下<select>的流程: 1.结构:<select> <option value=&qu ...

  8. CSS魔法堂：选择器及其优先级

    一.前言    首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::firs ...

  9. iOS实现图像指定区域模糊

    在大多图像处理中,我们会应用到高斯模糊处理图像,通常用它来减少图像噪声以及降低细节层次.在此文中介绍了高斯模糊的实现和可选区域的模糊[美图秀秀-背景虚化] 高斯模糊的原理中,它是根据高斯曲线调节像素色 ...

  10. Sprint2演示分

    团队贡献分: 朱杰:22 蔡京航:21 华子仪:20 甄增文:17