最近刚做完一个版本的项目,闲暇时间,就索性把项目中需要用到的插件都自己写了一个,毕竟自己动手丰衣足食才是最重要,自己写的,可以应对各种项目需求,今天又把手机端的省市区三级联动选择功能编写了一个插件出来,代码很简单,样式也是应用的跟日期时间选择插件的一样。写省市区三级联动插件的关键是在于你如何编写自己的“省市县(区)”json文件,你要是把数据格式写对了,可以很轻松的写一省市区插件出来。在项目里,我把json文件里的数据都压缩了一遍直接放到了插件的.js文件里,自己觉得这样更好,减少插件的关联文件,就一个.js和一个.css文件,一目了然。
下面我把代码放出来,需要的小伙伴们可以粘贴复制哦。(插件没有bug,可以放心使用,喜欢的给个赞哦(o^*^o)!!!)
使用方法
HTML:
//存放选择的省市区文本值
JS:
$(".city").pickArea({
'speed':2
});
jquery.pickArea.js
/*
* pluginName:pickCity,
* author:[email protected]
* Individual contact method:986372959(It's my QQ)
* date:2017/09/07 18:45:00
* */
;(function($,window,document,undefined){
'use strict'; //严格模式,提高效率
var pluginName = 'pickArea', //定义插件的名字
defaults = {},//定义一个默认的参数
liH,//每一个li的高度
$list,//滑动列表
globalThis_launchHtml,
data,
pluginThis;//指代指向plugin的this
var global = {
options:''
};
function Plugin(options){ //创建构造函
//this -- Plugin对象
pluginThis = this;
this.options = options;
this.init(); //初始化
}
Plugin.prototype = {
init:function(){
global.options = this.options;
data = dataJson.data;//获取数据 data[i].code省code data[i].name省name
console.log(data)
this.render(); //渲染
},
render:function(){
//this -- Plugin对象
var str = '
'
'+'
'
'
'
- '+
'
'+'
'
'
'
'
'
- '+
'
'+'
'
'
'
'
'
- '+
'
'+'
'
'
'
'
'
$