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. 误删dpkg的/var/lib/dpkg/info文件夹的解决办法 zhuan

         今天安装软件时时,出现这样的错误提示:E: Sub-process /usr/bin/dpkg returned an error code (1)   上网查解决方案,被网上误导,一不小心 ...

  2. How to debug Typescript in browser

    How to debug typescript, In Chrome, we need to press F12, open settings, uncheck the Enable JavaScri ...

  3. IE代理文件自动设置

    想如果代理可用就使用代理,代理不可用就直接连接网络. 新建文件放入javascript代码,保存为proxy.pac,保存路径c:\proxy.pac function FindProxyForURL ...

  4. JS文件放在头还是尾

    目前绝大部分的浏览器都是采取阻塞方式(Scripts Block Downloads)加载Javascript文件的:javascript在头部会阻止其他元素并行加载(css,图片,网页):这种机制的 ...

  5. debian软件源source.list文件格式说明

    在安装完debian操作系统之后大家做的第一件事大概就是修改source.list文件了吧,否则你是无法在线更新软件的,那么source.list文件中的各个配置项的具体含义你搞懂了么?下面就以我的s ...

  6. JavaScript的深拷贝的实现

    JavaScript的数据类型 简单数据类型 string number boolean function null undefined 复杂数据类型 String Number Boolean Fu ...

  7. DDD：再谈：实体能否处于非法状态？

    背景 实体能否处于非法状态吗?如果实体只承担其作为实体的职责,我不认为实体可以处于非法状态,如果您将实体在不同的分层之间传递,如:UI->Application->Domain-Data, ...

  8. ReflectionToStringBuilder

    1. 使用背景 后台接口需要在接口调用的初期,记录下面查询(修改)对象的参数. 2. 使用方法 通过Apache 工具类 输出entity对象所有属性值 <dependency> < ...

  9. 企业云部署要如何选择IaaS PaaS和SaaS

    1为什么IaaS成了灵丹妙药   我非常惊讶,为什么很多传统企业已经接受了云计算,但接受的方式却往往不尽人意.对大多数企业来说,云计算的投入产出比相对较小,并且局限于基础设施层的环节. 就目前而言,大 ...

  10. Android 学习笔记多媒体技术之 Drawable类+Tween(补间动画)+Frame（帧动画）

    学习内容: 1.了解Drawable类的作用 2.如何使用Drawable... 3.了解Tween动画... 4.如何创建和使用Tween动画... 1.Drawable类...   Drawabl ...