城市联动插件citylink,以及插件的使用API
2017-04-26 23:35

城市联动插件cityLink

城市联动插件是一个基于jquery的快速生成省,市,县三级联动效果的插件。对于页面中使用设置地址的时候,用到城市联动效果能够很方便的满足需求。

城市联动插件的效果图如下:

blob.png

简洁大方,效果也很不错。你可以先体验一下城市联动插件的实际效果:城市三级联动demo

写这个demo的时候费了半天劲,我的网站采用的是jquery-1.11.1.js,然后把城市联动插件和js写上之后,一直没反应,测试得出是ajax请求后没有触发回调函数,把jquery换成了jquery-1.8.3.js版本后就一切正常了。

下面我们介绍一下这个citylink插件的用法。

使用城市联动插件,你首先需要准备一个城市列表的json:城市列表JSON数据

然后下载城市联动插件:三级城市联动插件

之后需要稍微修改城市联动插件中的一个url,用来加载城市列表的json数据:

blob.png

这个ajax用来加载province.json数据,具体的url需要根据你真实的项目中province.js所放置的位置而定。如果你是跨域调用的,可以稍微改动换成jsonp的请求方式。

之后,我们定义一个承载三级联动的容器。

<div class="ck_cont" data-loc="河北省-石家庄-赵县">
</div>

这个容器的“data-loc”属性通过"-"分割来定义三级联动效果默认的省,市,县。

最后,我们通过js调用cityLink插件来生成三级联动效果。

$(".ck_cont").linkCity(3,function(){
    console.log(this.prov_dom);
    console.log(this.city_dom);
    console.log(this.area_dom);
    console.log(this.prov_cur);
    console.log(this.city_cur);
    console.log(this.area_cur);
    console.log(this.wrapper);
});

linkCity方法接收两个参数,第一个level表示三级联动展现的层级数目,3为省,市,县的三级联动,2为省,市的两级联动,1为只有省。第二个参数是一个function函数,用来在三级联动中初始化时做一些操作,这个初始化函数中的this就指向的是这个联动插件,通过上面打印的这些console对象,你可以获取联动中的DOM元素或json数据对象。

blob.png

这样三级联动插件就算是生成完成了,额外的,你可以通过设置“input-select”class的样式,来改变三级联的模样,像下面这样。

.input-select{
    height:32px;
    width:130px;
    border:1px solid #ccc;
    outline:none;
}
.input-select +.input-select{margin-left: 8px;}
.input-select:focus{
    border:1px solid #8e44ad;
}

下面我们实现一些城市的联动效果

<div class="ck_cont" >
    <div class="ck_item ck_first" data-loc="河北省-石家庄-赵县"></div>
    <div class="ck_item ck_second" data-loc="河南"></div>
    <div class="ck_item ck_third" data-loc="北京-北京"></div>
    <div class="ck_item ck_forth" data-loc="河南-新乡"></div>
</div>
$(".ck_first").linkCity();
$(".ck_second").linkCity(3,function(){
    this.prov_dom.attr("disabled","disabled");
});
$(".ck_third").linkCity(3,function(){
    this.prov_dom.css("display","none");
    this.city_dom.css("display","none");
});
$(".ck_forth").linkCity(2,function(){
    this.prov_dom.attr("disabled","disabled");
});

通过上面的代码,我们生成了几个城市联动:

blob.png

你可以链接过去体验这些城市联动的demo:城市联动插件应用demo

最后,城市联动插件效果实现了,我们在需要向后台提交数据的时候需要获取联动插件的城市值,这个插件提供了一个静态对象“cityLink",可以通过它来获取一个联动插件的值:

function getVal() {
    var values = cityLink.getValue($(".ck_forth"));
    console.log(values);
}

只需要传入生成城市联动效果的容器元素,就可以获取其对应的城市值,province.json是异步获取的,所以要在onclick等事件中确保联动插件生成完成了再调用获取值的方法,调用返回的结果是一个json数据:

{
   prov_name:prov_name,
   prov_value:prov_id,
   city_name:city_name,
   city_value:city_id,
   area_name:area_name,
   area_value:area_id
}

blob.png

这样,我们就可以通过getValue方法获取城市联动插件的值,传递给后台。

好了,到这里,这个城市联动插件就介绍完了,如果你在项目中正好需要使用这个效果,那么你就有福了。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2662)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1