由于项目需要需要一个车型选择的三级联动插件,即先选择品牌,再选择车系,最后选择车型的联动,说起三级联动可能最常见的就是省市区然后三个select的这样的联动,如图
根据传回后台的参数来请求每一级的数据。最开始也是准备做成这种简单的联动的,奈何项目经理觉得这种太low了,要做得好看些,然后直接丢给我一个竞品的网站参考,说就做成这样的。
先选择品牌:
然后选择车系:
然后选择排量:
最后选择年份:
同样是联动,这样看起来的话逼格就不知道高了多少,而且每个品牌都有自己的logo也看起来很漂亮。
本来想图简单直接用他们的js的,不过数据要按别人的来不方便我们写入数据库,得我们后台自己写数据,那我就只有把竞品网站的代码down下来然后去读其中的js,最终花了2天时间还是做完了。话不多说,直接上js:
(function( $ ){
$.fn.wxlsChooseCarSeries =function(options){
//默认设置
var settings={
//激发对象
this$:null,
//本页面对象
thisPage:null,
//图片缓存版本号
imgV:'?v=001',
//点击选择车型的当前id值
thisCarId:'',
//点击选择品牌的当前名字
thisBrandName:'',
//点击车系的当前名字
thisSeriesName:'',
//当前选择车型名字
thisTypeName:'',
init:function(clickElement){
settings.this$=clickElement;
//拓展替换本插件的事件
$.extend(true,settings,options);
//获取外部样式
settings.getOutFile();
//创建弹框对象
settings.createOrGetHtml();
},
//获取外部样式
getOutFile:function(){
//引入所需的css
require(['css!/src/components/wxls-carSeries/css/wxls-carSeries.css'],function(){
});
},
ajaxFunction:function(keyId,savecallback){
$("#seriesMask",settings.thisPage).show();
$.ajax({
type: "post",
url: window.$context.$config.domain+"api/app/queryCarType.do",
data:{
keyId:keyId
},
dataType: "json",
success:function(response){
if ($.isFunction(savecallback)) {
savecallback.call(this, response);
$("#seriesMask",settings.thisPage).hide();
}
}
});
},
/* 缓存品牌信息*/
getBrandsList:function (callback) {
if (window.localStorage) {
var cacheBrands = window.localStorage.getItem("wxlscarselect-brands");
var cacheTime = window.localStorage["wxlscarselect-brands-timestamp"];
//缓存2小时
if (cacheBrands && cacheTime >= (new Date()).getTime() - 2 * 60 * 60 * 1000) {
callback(JSON.parse(cacheBrands));
return;
}
}
//自动加载品牌数据
settings.ajaxFunction(0, function (data) {
if (typeof data !== "undefined" && data.result==1) {
if (typeof callback === "function") {
if (window.localStorage) {
window.localStorage["wxlscarselect-brands"] = JSON.stringify(data.listRow);
window.localStorage["wxlscarselect-brands-timestamp"] = (new Date()).getTime();
}
callback(data.listRow);
}
}
});
},
//创建弹框对象
createOrGetHtml:function(createType){
if($('body .dockElem>div[menuid]:visible>div:first #carSelect').length<=0){
settings.thisPopo = $("<div id='carSelect' class='carselect-pop'>"
+ " <div class='carselect-close' ></div>"
+ " <div class='tab-nav'>"
+ " <div class='pop-content'>"
+ " <div class='tab-content active'>"
+ " <ul class='carsel-progress clearfix'>"
+ " <li id='cx1' class='head_div2'><span id='cxspan1' class='active'>1</span>选择品牌</li>"
+ " <li id='cx2' class='head_div3'><span id='cxspan2'>2</span>选择车系</li>"
+ " <li id='cx3' class='head_div5'><span id='cxspan3'>3</span>选择车型</li>"
+ " </ul>"