基础补充
$.fn.extend()
定义一个实例方法。
定义:
$.fn.extend({"插件名":function(参数) {……}})
$.fn.extend({"插件名":function(参数) {……}}) 等于$.fn.插件名 = function(参数){}
调用:
$("div#id").插件名(参数)。
$.extend()
可对多个对象进行合并,
var a ={akey: avalue};
var b ={bkey: bvalue};
$.extend(a,b); => a = {akey: avalue, bkey: bvalue}
可对对象进行深度嵌套,
var a ={akey: avalue, obj: {akey: avalue }};
var b ={bkey: bvalue, obj: { bkey: bvalue }};
$.extend(true,a, b); => a = {akey: avalue, bkey: bvalue, obj: { akey: avalue, bkey: bvalue}}
也可以给jQuery添加静态方法
$.extend({
a: function(参数名){return 1;};
b: function(参数名){};
});
var value= jQuery.a; => value = 1;
注意:
$.extend()合并,b的值会覆盖a的值
$.extend(true,a, b)深度合并,会保持值的长度一致,但b的值仍会覆盖a的值。
$.extend({},a, b)建议使用空对象,避免改变原变量值
功能实现-源码
定义一个实例方法
在该方法中初始化点击或其它事件,调用$.extend定义的静态函数。
$.fn.commonLayer = function(options) {
var oSetting = {};
var options = options || {};
options.id = options.id;
options.baseUrl = options.baseUrl;
options.cascadeNum = options.cascadeNum || 1;
options.layerHeader = options.layerHeader || '请选择……';
options.isMultiple = options.isMultiple;
options.rightColumn = options.rightColumn;
options.dataType = options.dataType;
options.dictType = options.dictType;
options.dataLang = options.dataLang;
options.dataNavigation = options.dataNavigation || [];
options.maxSelect = options.maxSelect;
options.isSearch = options.isSearch;
options.searchId = options.searchId;
options.searchClass = options.searchClass;
options.searchUrl = options.searchUrl;
options.searchNum = options.searchNum || 5;
options.isOverseas = options.isOverseas;
options.isLocal = options.isLocal || true;
return this.each(function() {
if (options) {
$.extend(oSetting, options);
}
if ('undefined' != typeof oSetting.dataType && 'undefined' != typeof oSetting.dictType && 'undefined' != typeof oSetting.path) {
var lang = 'undefined' != typeof oSetting.dataLang ? '_' + oSetting.dataLang : '';
oSetting.dataUrl = oSetting.baseUrl + oSetting.path + oSetting.dataType + lang + '.' + oSetting.dictType;
}
oSetting = jQuery.OLayer.init(oSetting);
if (oSetting.isMultiple) {
jQuery.OLayer.showSavedToDoc(oSetting);
}
if (options.dataType.indexOf('functype') != -1) {
var loadData = jQuery.OLayer.getAjaxData(oSetting);
$.each(loadData, function(index, value) {
var lang = 'undefined' != typeof options.dataType ? 'value' : 'eValue';
oSetting.dataNavigation.push({code: value['code'], value: value[lang]});
})
oSetting.getInitCLeftData = redefGetInitCLeftData;
oSetting.getInitCMiddleData = redefGetInitCMiddleData;
oSetting.getRightDataEvent = redefGetRightDataEvent;
oSetting.getInitCRightData = redefGetInitCRightData;
oSetting.mNavigationIndex = 0;
}
$(this).bind('click', oSetting, oSetting.clickEvent);
});
function redefGetInitCLeftData(oSetting) {
var lContent = '';
$.each(oSetting.dataNavigation, function(index, value) {
var setActive = '';
var setChecked = '';
if (index == oSetting.navigationIndex) {
setActive = 'active ';
oSetting.navigationCurrent = value.code;
}
if (oSetting.initCheckedNav.indexOf(value.code) != -1) {
setChecked = 'checked ';
}
lContent += '<a data-value="' + value.code + '" id="' + oSetting.data_left + '_' + value.code + '" class="' + setActive + setChecked + '" href="javascript:void(0)">' + value.value + '</a>';
})
$('#' + oSetting.data_left).html(lContent);
}
function redefGetInitCMiddleData(oEvent) {
var oSetting;
if (typeof oEvent.preventDefault == 'function') {
oEvent.stopPropagation();
oSetting = oEvent.data;
oSetting.navigationCurrent = $(this).attr('data-value');
$(this).addClass('active').siblings().removeClass('active');
} else {
oSetting = oEvent;
}
var loadData = jQuery.OLayer.getAjaxData(oSetting);
var mContent = '';
var middleData;
$.each(loadData, function(index, value) {
if ('undefined' != typeof oSetting.navigationCurrent && oSetting.navigationCurrent.indexOf(value.code) != -1) {
middleData = value.items;
}
})
oSetting.redefAjaxData = [];
$.each(middleData, function(index, value) {
var setActive = '';
var setChecked = '';
if (index == oSetting.mNavigationIndex) {
setActive = 'active ';
oSetting.mNavigationCurrent = value.code;
}
if (oSetting.initCheckedData.findIndex(function(items) {return items.code.slice(0, 2) == value.code.slice(0, 2)}) != -1) {
setChecked = 'checked ';
}
mContent += '<a data-value="' + value.code + '" id="' + oSetting.data_middle + '_' + value.code + '" class="' + setActive + setChecked + '" href="javascript:void(0)">' + value.value + '</a>';
oSetting.redefAjaxData.push(value);
})
oSetting.getInitCRightData(oSetting);
$('#' + oSetting.data_middle).html(mContent);
$('#' + oSetting.data_middle).find('a').unbind('click').bind('click', oSetting, oSetting.getRightDataEvent);
}
function redefGetInitCRightData(oSetting) {
var loadData = oSetting.redefAjaxData;
var rightData = [];
$.each(loadData, function(index, value) {
if ('undefined' != typeof oSetting.mNavigationCurrent && oSetting.mNavigationCurrent.indexOf(value.code) != -1) {
rightData.push(value);
}
})
var rContent = jQuery.OLayer.setRightData(oSetting, rightData);
$('#' + oSetting.data_right).html(rContent);
if (!oSetting.isMultiple) {
$('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getSelectEvent);
} else {
$('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getMulSelectEvent);
}
}
function redefGetRightDataEvent(oEvent) {
var oSetting = oEvent.data;
oSetting.mNavigationCurrent = $(this).attr('data-value');
$(this).addClass('active').siblings('a').removeClass('active');
var loadData = oSetting.redefAjaxData;
var rightData = [];
$.each(loadData, function(index, value) {
if ('undefined' != typeof oSetting.mNavigationCurrent && oSetting.mNavigationCurrent.indexOf(value.code) != -1) {
rightData.push(value);
}
})
var rContent = jQuery.OLayer.setRightData(oSetting, rightData);
$('#' + oSetting.data_right).html(rContent);
if (!oSetting.isMultiple) {
$('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getSelectEvent);
} else {
$('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getMulSelectEvent);
}
oEvent.stopPropagation();
}
}
定义一个静态方法
定义了系列处理函数。每一个函数对应弹窗的一部分功能,可后续新增功能。(待完善)
$.extend({
OLayer: {
init: function(oSetting) {
var oInit = ['close', 'cancel', 'save', 'search', 'store', 'saved', 'warn', 'delete', 'layer', 'data_left', 'data_middle', 'data_right', 'code', 'text'];
$.each(oInit, function(i, value) {
oSetting[value] = oSetting.id + '_' + value;
});
var oFunctionInit = {
'open': jQuery.OLayer.open,
'setMask': jQuery.OLayer.setMask,
'beforeOpen': jQuery.OLayer.beforeOpen,
'clickEvent': jQuery.OLayer.getShowLayer,
'closeEvent': jQuery.OLayer.closeEvent,
'getInitLayer': jQuery.OLayer.getInitLayer,
'getInitTop': jQuery.OLayer.getInitTop,
'getInitBottom': jQuery.OLayer.getInitBottom,
'getInitCenter': jQuery.OLayer.getInitCenter,
'getInitCLeftData': jQuery.OLayer.getInitCLeftData,
'getInitCMiddleData': jQuery.OLayer.getInitCMiddleData,
'getInitCRightData': jQuery.OLayer.getInitCRightData,
'getRightDataEvent': jQuery.OLayer.getRightDataEvent,
};
$.each(oFunctionInit, function(i, value) {
if (('' == oSetting[i]) || ('undefined' == typeof oSetting[i])) {
oSetting[i] = value;
}
});
oSetting.navigationIndex = 0;
return oSetting;
},
getShowLayer: function(oEvent) {
oEvent.stopPropagation();
var oSetting = oEvent.data;
var separator = /\+|\,/;
var checkedCode = $('#' + oSetting.code).val();
if (checkedCode == '' || 'undefined' == typeof checkedCode) {
var checkedText = $('#' + oSetting.text).val();
if (checkedText != '' && !oSetting.isMultiple) {
oSetting.oCheckedCode = [''];
oSetting.initCheckedData = jQuery.OLayer.queryCheckedData(oSetting).value;
oSetting.initCheckedNav = jQuery.OLayer.queryCheckedData(oSetting).nav;
} else {
oSetting.initCheckedData = [];
oSetting.initCheckedNav = [];
}
} else {
oSetting.oCheckedCode = checkedCode.split(separator)
oSetting.initCheckedData = jQuery.OLayer.queryCheckedData(oSetting).value;
oSetting.initCheckedNav = jQuery.OLayer.queryCheckedData(oSetting).nav;
}
jQuery.OLayer.resetNavigation(oSetting);
jQuery.OLayer.getInitLayer(oSetting);
},
getInitLayer: function(oSetting) {
var initBottom = oSetting.isMultiple ? jQuery.OLayer.getInitBottom(oSetting) : '';
if (!oSetting.layerElement) {
oSetting.layerElement = $('<div id="' + oSetting.layer + '" class="popup_select" style="display:none;">' + jQuery.OLayer.getInitTop(oSetting) + jQuery.OLayer.getInitCenter(oSetting) + initBottom + '</div>' + jQuery.OLayer.setMask()).appendTo('body');
}
switch (oSetting.cascadeNum) {
case 3:
oSetting.getInitCLeftData(oSetting);
oSetting.getInitCMiddleData(oSetting);
break;
case 2:
oSetting.getInitCLeftData(oSetting);
break;
}
if (oSetting.initCheckedData.length > 0 && oSetting.isMultiple) {
var hasChecked = jQuery.OLayer.initStorage(oSetting);
jQuery.OLayer.getInitStorage(oSetting);
$('#' + oSetting.store).find('.sitem').html(hasChecked);
$('#' + oSetting.store).find('.snum .count').text(oSetting.initCheckedData.length);
} else {
$('#' + oSetting.store).remove();
}
oSetting.getInitCRightData(oSetting);
jQuery.OLayer.open(oSetting);
},
setMask: function() {
return '<div class="popup_mask"></div>';
},
getInitTop: function(oSetting) {
var popupTop = '<div class="popup_top clear">';
if ('undefined' != typeof oSetting.layerHeader) {
popupTop += '<p class="h">' + oSetting.layerHeader + '</p>';
}
if (oSetting.isSearch) {
popupTop += jQuery.OLayer.setSearch(oSetting);
}
popupTop += '<a href="javascript:void(0)" class="popup_close" id="'+ oSetting.close +'"></a></div>';
return popupTop;
},
setSearch: function(oSetting) {
var sContent = '<p class="pop_search">';
sContent += '<input id="' + oSetting.search + '" class="key_input" type="text" maxlength="200" autocomplete="off" placeholder="请输入关键字">';
sContent += '<em class="search_btn"></em>';
sContent += '</p>';
return sContent;
},
getInitCenter: function(oSetting) {
var popupCenter = '<div class="popup_center clear">';
var rWidth;
switch (oSetting.cascadeNum) {
case 3:
if ('undefined' != typeof oSetting.dataNavigation) popupCenter += '<div id="' + oSetting.data_left + '" class="c_left"></div>';
popupCenter += '<div id="' + oSetting.data_middle + '" class="c_left c_left_m"></div>';
rWidth = 480;
break;
case 2:
if ('undefined' != typeof oSetting.dataNavigation) popupCenter += '<div id="' + oSetting.data_left + '" class="c_left"></div>';
rWidth = 680;
break;
}
popupCenter += '<div id="' + oSetting.data_right + '" class="c_right" style="width: ' + rWidth + 'px"></div>';
popupCenter += '</div>';
return popupCenter;
},
getInitBottom: function(oSetting) {
var popupBottom = '<div class="popup_bottom">';
popupBottom += '<a id="' + oSetting.cancel + '" class="btn btn_cancel" href="javascript:void(0)">取消</a><a id="' + oSetting.save + '" class="btn btn_ok" href="javascript:void(0)">确定</a>';
popupBottom += '</div>';
return popupBottom;
},
getInitCLeftData: function(oSetting) {
var lContent = '';
$.each(oSetting.dataNavigation, function(index, value) {
var navigation = '';
var setChecked = '';
$.each(value[oSetting.dataLang], function(index, value) {
navigation += value + ' ';
if (oSetting.initCheckedNav.indexOf(value) != -1) {
setChecked = 'checked ';
}
})
var setActive = '';
if (index == oSetting.navigationIndex) {
setActive = 'active ';
oSetting.navigationCurrent = value[oSetting.dataLang].join('');
}
lContent += '<a data-value="' + navigation.replace(/\s*/g,"") + '" id="' + oSetting.data_left + '_' + navigation.replace(/\s*/g,"") + '" class="' + setActive + setChecked + '" href="javascript:void(0)">' + navigation.trim() + '</a>';
})
$('#' + oSetting.data_left).html(lContent);
},
getInitCMiddleData: function(oSetting) {},
getInitCRightData: function(oSetting) {
var loadData = jQuery.OLayer.getAjaxData(oSetting);
var rightData = [];
$.each(loadData, function(index, value) {
if ('undefined' != typeof oSetting.navigationCurrent && oSetting.navigationCurrent.indexOf(value.title) != -1) {
rightData.push(value);
}
})
var rContent = jQuery.OLayer.setRightData(oSetting, rightData);
$('#' + oSetting.data_right).html(rContent);
},
setRightData: function(oSetting, initData) {
var rContent = '';
$.each(initData, function(index, value) {
if (oSetting.dataType == 'area') {
rContent += '<table><tr><th colspan="' + oSetting.rightColumn + '"><span>' + value.title + '</span></th></tr>';
} else {
rContent += '<table>';
}
$.each(value.items, function(index, value) {
if (index % oSetting.rightColumn == 0) {
rContent += '<tr>';
}
if ('undefined' != typeof oSetting.initCheckedData && oSetting.initCheckedData.findIndex(function(item) {return item.code === value.code}) != -1) {
rContent += '<td><a id="' + oSetting.data_right + '_' + value.code + '" class="checked" data-value="' + value.code + '" data-nav="' + oSetting.navigationCurrent + '" href="javascript:void(0);">' + value.value + '</a></td>';
} else {
rContent += '<td><a id="' + oSetting.data_right + '_' + value.code + '" data-value="' + value.code + '" data-nav="' + oSetting.navigationCurrent + '" href="javascript:void(0);">' + value.value + '</a></td>';
}
if (index % oSetting.rightColumn == oSetting.rightColumn - 1) {
rContent += '</tr>';
}
})
rContent += '</table>'
})
return rContent;
},
getAjaxData: function(oSetting) {
var data = {};
if ('undefined' != typeof oSetting.dataUrl && oSetting.isLocal) {
$.ajax({
url: oSetting.dataUrl,
async: false,
dataType: "json",
success: function(result) {
switch (oSetting.dataType) {
case 'area':
var areaType = [];
var tempResult = [];
$.each(oSetting.dataNavigation, function(index, nav) {
if (areaType.indexOf(nav.type) == -1) {
areaType.push(nav.type)
}
})
$.each(result, function(index, value) {
if (value.title.indexOf('全国') != -1) {
value.items.unshift({
"code": "",
"value": "全国",
"hasSubArea": false
})
for (var i = 0; i < value.items.length; i++) {
var item = value.items[i];
if (item.code == '330000' || item.code == '340000' || item.code == '350000') {
value.items.splice(i, 1);
i--;
}
}
}
if (areaType.indexOf(value.type) != -1) {
tempResult.push(value);
}
})
data = tempResult;
break;
default:
data = result.items;
break;
}
}
})
}
return data;
},
queryCheckedData: function(oSetting) {
var cNav = [];
var cData = [];
var dict = jQuery.OLayer.getAjaxData(oSetting);
var navreg;
$.each(oSetting.oCheckedCode, function(index, code) {
$.each(dict, function(index, nav) {
switch (oSetting.dataType) {
case 'area':
if (nav.type == '0' || nav.type == '3' || nav.type == '4') {
$.each(nav.items, function(index, value) {
if (value.code == code) {
cData.push(value);
navreg = nav.title;
}
})
if (navreg == nav.title) {
cNav.push(nav.title);
}
}
break;
default:
$.each(nav.items, function(index, snav) {
$.each(snav.items, function(index, value) {
if (value.code == code) {
cData.push(value);
navreg = nav.code;
}
})
})
if (navreg == nav.code) {
cNav.push(nav.code);
}
break;
}
})
})
return {nav: cNav, value: cData};
},
beforeOpen: function(oSetting) {
switch (oSetting.cascadeNum) {
case 3:
$("#" + oSetting.data_left).find('a').unbind('click').bind('click', oSetting, oSetting.getInitCMiddleData);
$("#" + oSetting.data_middle).find('a').unbind('click').bind('click', oSetting, oSetting.getRightDataEvent);
break;
case 2:
$("#" + oSetting.data_left).find('a').unbind('click').bind('click', oSetting, jQuery.OLayer.getRightDataEvent);
break;
}
if (oSetting.isSearch) {
oSetting = jQuery.oSelect.init(oSetting);
oSetting.popupEvent = true;
$('#' + oSetting.search).bind('focus', oSetting, jQuery.oSelect.showLayer);
$('#' + oSetting.search).bind('input propertychange change', oSetting, jQuery.oSelect.showAssociation);
}
if (!oSetting.isMultiple) {
$('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getSelectEvent);
} else {
$('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getMulSelectEvent);
$("#" + oSetting.save).unbind('click').bind('click', oSetting, jQuery.OLayer.save);
}
$("#" + oSetting.close).unbind('click').bind('click', oSetting, jQuery.OLayer.closeEvent);
$("#" + oSetting.cancel).unbind('click').bind('click', oSetting, jQuery.OLayer.closeEvent);
$('#' + oSetting.store).find('.sitem a').unbind('click').bind('click', oSetting, jQuery.OLayer.deleteStorage);
},
closeEvent: function(oEvent) {
oEvent.stopPropagation();
var oSetting = oEvent.data;
oSetting.initCheckedData = jQuery.OLayer.queryCheckedData(oSetting).value;
oSetting.initCheckedNav = jQuery.OLayer.queryCheckedData(oSetting).nav;
if (oSetting.isMultiple && oSetting.initCheckedData.length == 0) {
$('#' + oSetting.store).remove();
}
jQuery.OLayer.close(oSetting);
return false;
},
open: function(oSetting) {
jQuery.OLayer.beforeOpen(oSetting);
oSetting.layerElement.show();
jQuery.OLayer.setPosition(oSetting.layerElement);
},
close: function(oSetting) {
oSetting.layerElement.hide();
},
getRightDataEvent: function(oEvent) {
var oSetting = oEvent.data;
oSetting.navigationCurrent = $(this).attr('data-value').split(' ').join('');
$(this).addClass('active').siblings('a').removeClass('active');
var loadData = jQuery.OLayer.getAjaxData(oSetting);
var rightData = [];
$.each(loadData, function(index, value) {
if ('undefined' != typeof oSetting.navigationCurrent && oSetting.navigationCurrent.indexOf(value.title) != -1) {
rightData.push(value);
}
})
var rContent = jQuery.OLayer.setRightData(oSetting, rightData);
$('#' + oSetting.data_right).html(rContent);
if (!oSetting.isMultiple) {
$('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getSelectEvent);
} else {
$('#' + oSetting.data_right).find('td a').unbind('click').bind('click', oSetting, jQuery.OLayer.getMulSelectEvent);
}
oEvent.stopPropagation();
},
getSelectEvent: function(oEvent) {
var oSetting = oEvent.data;
var selectedCode = $(this).attr('data-value');
var selectedText = $(this).text();
$('#' + oSetting.code).val(selectedCode);
$('#' + oSetting.text).val(selectedText);
jQuery.OLayer.close(oSetting);
oEvent.stopPropagation();
},
getMulSelectEvent: function(oEvent) {
var oSetting = oEvent.data;
var selectedData = {code: $(this).attr('data-value'), value: $(this).text()};
var selectedNav = jQuery.OLayer.queryDataNavigation(oSetting, selectedData.code).nav;
if (oSetting.initCheckedData.length == 0) jQuery.OLayer.getInitStorage(oSetting);
if (oSetting.initCheckedData.findIndex(function(value) {return value.code === selectedData.code}) == -1) {
if (oSetting.initCheckedData.length < oSetting.maxSelect) {
$(this).addClass('checked');
if (oSetting.initCheckedNav.indexOf(selectedNav) == -1) {
oSetting.initCheckedNav.push(selectedNav);
}
oSetting.initCheckedData.push(selectedData);
jQuery.OLayer.addStorage(oSetting, selectedData, selectedNav);
jQuery.OLayer.resetNavigation(oSetting);
} else {
jQuery.OLayer.setOverWarn(oSetting);
setTimeout(function() {
oSetting.layerWarn.remove();
}, 3000);
}
} else {
oSetting.initCheckedData.splice(oSetting.initCheckedData.findIndex(function(value) {return value.code === selectedData.code}), 1);
$(this).removeClass('checked');
$('#' + oSetting.store).find('.snum .count').html(oSetting.initCheckedData.length);
$('#' + oSetting.store + selectedData.code).remove();
if (oSetting.initCheckedData.length == 0) {
$('#' + oSetting.store).remove();
}
oSetting.initCheckedNav.splice(oSetting.initCheckedNav.findIndex(function(value) {return value == selectedNav}), 1);
jQuery.OLayer.resetNavigation(oSetting);
}
oEvent.stopPropagation();
},
save: function(oEvent) {
var oSetting = oEvent.data;
var cCode = [];
var cValue = [];
$.each(oSetting.initCheckedData, function(index, value) {
cCode.push(value.code);
cValue.push(value.value);
})
oSetting.oCheckedCode = cCode;
$('#' + oSetting.code).val(cCode.join(','));
$('#' + oSetting.text).val(cValue.join(','));
jQuery.OLayer.showSavedToDoc(oSetting);
jQuery.OLayer.close(oSetting);
oEvent.stopPropagation();
},
getInitStorage: function(oSetting) {
if ($("#" + oSetting.store).length == 0) {
var sContent = '<div class="popup_storage clear" id="' + oSetting.store + '"><p class="sitem clear"></p><p class="snum">已选:<em class="count"></em>/' + oSetting.maxSelect + '</p></div>';
$('#' + oSetting.layer).find('.popup_top').after(sContent);
}
},
addStorage: function(oSetting, selectedData, selectedNav) {
var sContent = '<a href="javascript:void(0)" data-value="' + selectedData.code + '" data-nav="' + selectedNav + '" id="' + oSetting.store + selectedData.code + '">' + selectedData.value + '</a>';
$('#' + oSetting.store).find('.sitem').append(sContent);
$('#' + oSetting.store).find('.snum .count').text(oSetting.initCheckedData.length);
$('#' + oSetting.store).find('.sitem a').unbind('click').bind('click', oSetting, jQuery.OLayer.deleteStorage);
},
initStorage: function(oSetting) {
var sContent = '';
$.each(oSetting.initCheckedData, function(index, sitem) {
var navigationCurrent = jQuery.OLayer.queryDataNavigation(oSetting, sitem.code).nav;
sContent += '<a href="javascript:void(0)" data-value="' + sitem.code + '" data-nav="' + navigationCurrent + '" id="' + oSetting.store + sitem.code + '">' + sitem.value + '</a>';
})
return sContent;
},
deleteStorage: function(oEvent) {
oEvent.stopPropagation();
var oSetting = oEvent.data;
var dData = {code: $(this).attr('data-value'), value: $(this).text()};
var dNav = $(this).attr('data-nav');
var dBefore = oSetting.initCheckedData;
dBefore.splice(dBefore.findIndex(function(items) {return items.code === dData.code}), 1);
$(this).remove();
$('#' + oSetting.store).find('.snum .count').html(dBefore.length);
$('#' + oSetting.data_right + '_' + dData.code).removeClass('checked');
oSetting.initCheckedData = dBefore;
jQuery.OLayer.resetNavigation(oSetting);
if (oSetting.initCheckedData.length == 0) {
$('#' + oSetting.store).remove();
}
},
resetNavigation: function(oSetting) {
var matchNav = [], matchSub = [];
$.each(oSetting.initCheckedData, function(index, sitem) {
var navCurrent = jQuery.OLayer.queryDataNavigation(oSetting, sitem.code).nav;
var subCurrent = jQuery.OLayer.queryDataNavigation(oSetting, sitem.code).snav;
if (matchNav.indexOf(navCurrent) == -1 && typeof navCurrent != 'undefined') matchNav.push(navCurrent);
if (matchSub.indexOf(subCurrent) == -1 && typeof subCurrent != 'undefined') matchSub.push(subCurrent);
})
var getNav = $('#' + oSetting.data_left).find('a');
$.each(getNav, function(index, e) {
var navCode = $(e).attr('data-value');
if (matchNav.indexOf(navCode) == -1) {
$('#' + oSetting.data_left + '_' + navCode).removeClass('checked');
} else {
$('#' + oSetting.data_left + '_' + navCode).removeClass('checked').addClass('checked');
}
})
if ($('#' + oSetting.data_middle).length > 0) {
var getSub = $('#' + oSetting.data_middle).find('a');
$.each(getSub, function(index, e) {
var subCode = $(e).attr('data-value');
if (matchSub.indexOf(subCode) == -1) {
$('#' + oSetting.data_middle + '_' + subCode).removeClass('checked');
} else {
$('#' + oSetting.data_middle + '_' + subCode).removeClass('checked').addClass('checked');
}
})
}
},
deleteSavedToDoc: function(oEvent) {
oEvent.stopPropagation();
var oSetting = oEvent.data;
var dData = {code: $(this).attr('data-value'), value: $(this).text()};
var dNav = $(this).attr('data-nav');
var dBefore = oSetting.initCheckedData;
dBefore.splice(dBefore.findIndex(function(items) {return items.code === dData.code}), 1);
$(this).remove();
var separator = /\+|\,/;
var dAfterCode = $('#' + oSetting.code).val().split(separator);
var dAfterText = $('#' + oSetting.text).val().split(separator);
dAfterCode.splice(dAfterCode.findIndex(function(value) {return value == dData.code}), 1);
dAfterText.splice(dAfterText.findIndex(function(value) {return value == dData.value}), 1);
$('#' + oSetting.code).val(dAfterCode.join(','));
$('#' + oSetting.text).val(dAfterText.join(','));
},
showSavedToDoc: function(oSetting) {
var sContent = '';
var separator = /\+|\,/;
var wCode = $('#' + oSetting.code);
if (wCode.val() != '') {
oSetting.oCheckedCode = wCode.val().split(separator);
oSetting.initCheckedData = jQuery.OLayer.queryCheckedData(oSetting).value;
}
$.each(oSetting.initCheckedData, function(index, sitem) {
var navCurrent = jQuery.OLayer.queryDataNavigation(oSetting, sitem.code).nav;
sContent += '<a href="javascript:void(0)" data-value="' + sitem.code + '" data-nav="' + navCurrent + '" id="' + oSetting.saved + sitem.code + '">' + sitem.value + '</a>';
})
wCode.parent().siblings('.sel_val').html(sContent);
wCode.parent().siblings('.sel_val').find('a').unbind('click').bind('click', oSetting, jQuery.OLayer.deleteSavedToDoc);
},
queryDataNavigation: function(oSetting, code) {
var matchNav, matchNavSec;
var tempNav;
var dict = jQuery.OLayer.getAjaxData(oSetting);
$.each(dict, function(index, nav) {
switch (oSetting.dataType) {
case 'area':
if (nav.type == '0' || nav.type == '3' || nav.type == '4') {
if (nav.items.findIndex(function(items) {return items.code == code}) != -1) {
tempNav = nav.title;
}
}
break;
default:
if (oSetting.cascadeNum == 3) {
$.each(nav.items, function(index, snav) {
if (snav.items.findIndex(function(items) {return items.code == code}) != -1) {
matchNavSec = snav.code;
matchNav = nav.code;
}
})
}
break;
}
})
if (oSetting.dataType == 'area') {
$.each(oSetting.dataNavigation, function(index, nav) {
if (nav[oSetting.dataLang].indexOf(tempNav) != -1) {
matchNav = nav[oSetting.dataLang].join('');
}
})
}
return {nav: matchNav, snav: matchNavSec};
},
setOverWarn: function(oSetting) {
oSetting.layerWarn = $('<div class="popup_toast" id="' + oSetting.warn + '"><p class="warn">最多只能选择' + oSetting.maxSelect + '个哦~</p></div>').appendTo('body');
jQuery.OLayer.setPosition(oSetting.layerWarn);
},
setPosition: function (oLayerElement) {
var oLayer = $(oLayerElement[0]);
var ww = $(window).width();
var wh = $(window).height();
var ow = oLayer.width();
var oh = oLayer.height();
var dl = oLayer.css('position') != 'fixed' ? $(document).scrollLeft() : 0;
var dt = oLayer.css('position') != 'fixed' ? $(document).scrollTop() : 0;
var left = (ww - ow) / 2 + dl;
var top = (wh - oh) * 382 / 1000 + dt; //黄金比例
oLayer.css({'left': Math.max(parseInt(left), dl), 'top': Math.max(parseInt(top), dt)});
},
}
})
调用定义的实例方法
$(function() {
/*地区选择弹框*/
$("#workCitySel").commonLayer({
id: 'workCity',
layerHeader: '选择城市',
isMultiple: true,
cascadeNum: 2,
rightColumn: 4,
isSearch: false,
dataType: 'area',
dictType: 'json',
dataNavigation: areaDL,
baseUrl: window.location.origin,
path: 'scripts/dict/d_',
method: 'get',
dataLang: 'c',
maxSelect: 3,
});
/*职位选择弹框*/
$("#workFuncSel").commonLayer({
id: 'workFunc',
layerHeader: '选择职位',
isMultiple: true,
cascadeNum: 3,
rightColumn: 2,
isSearch: true,
isLocal: true,
dataType: 'functype3',
dictType: 'json',
baseUrl: window.location.origin,
path: 'scripts/dict/d_',
method: 'get',
maxSelect: 3,
});
});
该方法待完善改进,仅为个人学习。