zoukankan      html  css  js  c++  java
  • 【开源】jquery省市区插件

    先来张效果图,演示地址:http://long-woo.github.io/jquery-city/

    1.动画效果使用的是animate.css

    2.支持选择和键盘输入(中英文输入)

    3.服务端返回的json格式

    { 
        "provinces": [ { "code": "1000", "name": "北京" }], 
        "citys": [ { "code": "100001", "name": "北京", "fullPY": "BEIJING", "firstPY": "BJ", "provinceCode": "1000", "provinceName": "北京", "hotCity": true }],
        "areas": [ { "code": "10000101", "name": " 东城区", "cityId": "100001", "fullPY": " DONGCHENGOU", "firstPY": " DCO", "provinceCode": "1000", "provinceName": "北京", "cityCode": "100001", "cityName": "北京" }]
    }

    4.如何使用?

      1).在<head>里面引用下面css资源

    <link href="../css/jquery.city.css" rel="stylesheet" />
    <link href="../css/animate.min.css" rel="stylesheet" /> <!--可选-->

      2).在<body>里引用下面的js资源

    <script src="../js/jquery-1.10.2.js"></script>
    <script src="../js/jquery.city.js"></script>

      3).使用示例

     1 <script>
     2     $(function () {
     3         $('#txt_city').jcity({
     4             urlOrData: '/js/citydata.json',
     5             animate: { showClass: 'animated flipInX', hideClass: 'animated flipOutX' },  // 需要第一步引用的animate.min.css文件,也可以自己定义动画 
     6             onChoice: function (data) {
     7                 console.log(data);
     8             }
     9         });
    10     });
    11 </script>

    转载请标注原文地址:http://www.cnblogs.com/JasonLong/p/5278955.html

  • 相关阅读:
    有关HL7 的C# 源码
    EF中调整字段的顺序
    xml schema 中如何定义类似Map的结构
    js将时间转换为时间戳
    postman使用
    H5拖拽
    读取XML文件中获取特定值
    读取XML文件
    owin使用
    C#跨线程访问
  • 原文地址:https://www.cnblogs.com/JasonLong/p/5278955.html
Copyright © 2011-2022 走看看