jquery省市区插件

简介:

这里写图片描述

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).在里面引用下面css资源

<link href="../css/jquery.city.css" rel="stylesheet" />
<link href="../css/animate.min.css" rel="stylesheet" /> 

  2).在里引用下面的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

目录
相关文章
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
58 0
|
JavaScript
jQuery 自定义插件
jQuery 自定义插件
49 0
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
62 2
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
63 1
|
1月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
47 4
jQuery Growl 插件(消息提醒)
|
1月前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
42 4
jQuery Cookie 插件
|
20天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
30 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】
|
5月前
|
JavaScript Perl PHP
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
34 0