【開源】jquery省市區插件

時間 2019-11-10

原文原文鏈接

先來張效果圖，演示地址：http://long-woo.github.io/jquery-city/css

1.動畫效果使用的是animate.csshtml

2.支持選擇和鍵盤輸入（中英文輸入）jquery

3.服務端返回的json格式git

{ 
    "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.如何使用？github

　　1).在<head>裏面引用下面css資源json

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

　　2).在<body>裏引用下面的js資源ide

<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>