概述

什么是插件，插件就是即插即用叫插件，很少的配置，很少的代码就可以用都项目里，之所以做这个插件，是因为做了一个省市区的联动，其他项目如果要用怎么办，难道在ctrl+c，ctrl+v？那样做太low，做个插件吧，于是乎就开始了Jquery插件制作之旅。

使用效果

获取使用

代码开源，已经托管在git上，地址如下，希望大家赏脸给个星

https://gitee.com/jangojing/JqueryCitySelectPlug

1.引入js、css和移动端的meta

引入jquery版本无所谓，demo里的版本较老，就懒得换了，其次引入插件对应的js和css

加入移动端的meta是移动端开发的前提

        <script src="Scripts/jquery-1.4.1.min.js"></script><script src="Scripts/CitySelect/citySelectPlug.js"></script><link rel="stylesheet" href="Scripts/CitySelect/citySelectPlug.css" type="text/css" />　　　　 <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />

2.编辑html绑定jquery事件

html里放入一个input，用jquery绑定一个jquery事件

    <form action="submit.aspx" method="GET">请选择省市区:<br /><input type="text" name="citySelect" value="" id="citySelect" /><input type="submit" value="提交" /></form>      <script>$().ready(function () {$("#citySelect").citySelectPlug({ ajaxUrl: 'GetArea.ashx' });});</script>

3. 处理ajax请求

注意到这里有个ajaxUrl，这个是配置你项目的ajax请求的路径的。既然要做联动，肯定需要ajax请求，通过当前选择的id去找下一级的id。

ajax请求会调用对应的地址，携带id为参数，id就是用户点击的那个省的id或者市的id，根据这个id继续找下一级

这里ajax请求需要返回的结果是json格式的数据如下所示：

[{"ID":606,"Name":"市辖区"},{"ID":123,"Name":"高淳区"},{"ID":234,"Name":"鼓楼区"}]

包含id和name的数组。

4. 完了？　　

就这样就完了？是的，插件就是少量的配置，少量的代码，即插即用。

5. 兼容性申明

手边的设备不全，测试过的设备有iphone 6s,iphone 5s,华为P8，华为荣耀3台，一款很老的HTC，努比亚一台。

针对ios处理了输入框获得焦点自动居中的问题。

针对华为手机处理了键盘打开状态下触发屏幕可见范围高度不够导致弹出层高度只有半幅页面的问题。

转载于:https://www.cnblogs.com/JangoJing/p/7606433.html

自己编写的仿京东移动端的省市联动选择JQuery插件相关推荐

web 端省市区三级联动选择框
web 端省市区三级联动选择框 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
html手机移动端轮播器,JS仿京东移动端手指拨动切换轮播图效果
function slide() { var bannerImgs = document.querySelector(".banner_imgs"); var Indexs = d ...
仿京东收货地址三级联动
声明我没有用tabLayout(pageSlidingTabStrip) + viewpager + fragment 如果用上面的方法实现更加简单我用的是一个listvi ...
仿京东开放平台框架，开发自己的开放平台（包含需求，服务端代码，SDK代码）...
目录 1开放平台需求 1.1调用参数 1.2签名算法 2服务端代码,Java举例 2.1接口入口代码 2.2业务逻辑层 2.3基础工具类 3.SDK代码,Java举例 4.集成SDK,代码举例现在开 ...
仿京东开放平台框架，开发自己的开放平台（包含需求，服务端代码，SDK代码）
目录 1开放平台需求 1.1调用参数 1.2签名算法 2服务端代码,Java举例 2.1接口入口代码 2.2业务逻辑层 2.3基础工具类 3.SDK代码,Java举例 4.集成SDK,代码举例现在开 ...
HTML5期末大作业：商城网页设计——仿京东商城网页端模板(8页面) HTML+CSS+JavaScript...
HTML5期末大作业:商城网页设计--仿京东商城网页端模板(8页面) HTML+CSS+JavaScript 商城网页HTML代码学生网页课程设计期末作业下载商城大学生网页设计制作成临近期末, ...
HTML5期末大作业：商城网页设计——仿京东商城网页端模板(8页面) HTML+CSS+JavaScript
HTML5期末大作业:商城网页设计--仿京东商城网页端模板(8页面) HTML+CSS+JavaScript 商城网页HTML代码学生网页课程设计期末作业下载商城大学生网页设计制作成临近期末, ...
新版仿京东商城源码+支持商家入驻/多用户开店/WAP端
正文: 完整演示图放到压缩包了,因为是整站长图演示,本文不好放. 其他说明:采用ShopNC B2B2C内核开发的,Install版(绝非还原数据库版) 本系统采用多用户商家开店模式(包含商家独立管理 ...
Elasticsearch初步学习（仿京东搜索、爬虫）
个人博客欢迎访问微信搜索程序dunk,关注公众号,获取项目.博客源码我们面前无所不有,我们面前一无所有 --查尔斯·狄更斯序号内容 1 Java基础面试题 2 JVM面试题 3 Java并发编 ...

自己编写的仿京东移动端的省市联动选择JQuery插件

概述