啥都不说 先给思想
城市组件设计
1：四个集合：
totalJson 总的json
provinceJson 省份json
cityJson 城市json
countyJSon 区县json
输出的字符串：
totalStr：形如 安徽-合肥-政务区 的字符串
cityAndCounStr：形如 合肥-政务区 的字符串
listContentJson：只含有城市的json 如：hf [ 合肥 海丰]
2：方法：
Step1：所有的搜索转为对拼音的匹配 如：安/an 会匹配到 anhui anqing tianjing
过滤对象：cityJson
过滤条件：
1：匹配到对应的城市 （》=15条时 break） 当前城市下的countryName做字符串的拼接 当前城市上对应的省份存下来，并做好字符串的拼接。
2：如果小于15条 对countryJson 进行过滤，总数===15时，break ，找到当前的countryJson后，一级一级向上找其对应的城市与省份。
3：所遇情况：
1：当输入的字符串长度小于3时如何搜索？
此时只进行首字母letter的搜索，至于为什么这样设计，是为了防止出现更多的循环，造成页面的卡顿。
2：如果所搜索的城市不满足15条，此时需要从区县搜索，
Q：如果这个区县所在的城市与省份已经存在怎么办？
A：对于最后输出的包含totalStr的数组进行去重。
4：刚开始点击输入框 会弹出旧的城市选择组件，其后的交互形式
One：不输入值，完全使用旧组件，可以正常使用，
Tow：选择城市后，减少字符串个数，怎么去避免新组件的查询
每次点击输入框 都可以弹出旧框，当输入框的值变化时 就隐藏掉旧框 显示新框
此时调用城市的查询
5：如果想要开发不带省份的 可以用传没有穿provinceId来进行判断 就像老的组件一样使用
6：使用规则：
1：placeholder里 含有‘省市’两个字的 会出现三级地区，如：录单页面
含有‘城市’两字的只出出现城市 如：运单查询页面
2：需要设置id
3：加上指令citydata
4：加上autocomplete:off 防止出现自动补全的bug
5：下面的东西就可以删除掉了
上代码：文件1：cityJsons（前台的城市文件）
var totalJson=[{"id":"110000","parentId":"0","level":"1","letter":"BJ","name":"北京","pinyin":"beijing"},{"id":"110100","parentId":"110000","level":"2","letter":"BJ","name":"北京","pinyin":"beijing"},{"id":"110114","parentId":"110100","level":"3","letter":"CPQ","name":"昌平区","pinyin":"changpingqu"},{"id":"120100","parentId":"120000","level":"2","letter":"TJ","name":"天津","pinyin":"tianjin"},{"id":"120115","parentId":"120100","level":"3","letter":"BCQ","name":"宝坻区","pinyin":"baochiqu"},{"id":"130102","parentId":"130100","level":"3","letter":"ZAQ","name":"长安区","pinyin":"changanqu"},{"id":"130230","parentId":"130200","level":"3","letter":"CFDQ","name":"曹妃甸区","pinyin":"caofeidianqu"},{"id":"130304","parentId":"130300","level":"3","letter":"BDHQ","name":"北戴河区","pinyin":"beidaihequ"}]
var comProvinceJson=[],comCityJson=[],comCountyJson=[],comCityCountStr={}; // 分别代表 省份json 城市json 区县json；城市下的所有区县 的对象
for(var p=0,totalLen=totalJson.length;p<totalLen;p++) {
totalJson[p].level === ‘1‘ && comProvinceJson.push(totalJson[p]);
totalJson[p].level===‘2‘ && comCityJson.push(totalJson[p]);
totalJson[p].level===‘3‘ && comCountyJson.push(totalJson[p]);
};
for(var i=0,lenC=comCityJson.length;i<lenC;i++){
// 找每个城市对应的区县
for(var j=0;j<comCountyJson.length;j++){
//生成属性
if(comCityJson[i].id===comCountyJson[j].parentId) {
if(!comCityCountStr[comCityJson[i].name]){
comCityCountStr[comCityJson[i].name]=[];
}
comCityCountStr[comCityJson[i].name].push(comCountyJson[j]);
}
}
}
图中的
totalJson代表的是一个全部展开的全国城市，当然 只是全部城市的一小部分。 文件2：
/*
* @param {obj} 当前点击的输入框
* @param {e} 当前点击的鼠标事件
* @param {provinceId、cityId} 当provinceId为空、cityId不为空时：弹窗组件只会选择到城市 搜索组件也只会选择到城市 如：合肥
* @param {provinceId、cityId} 当provinceId不为空：弹窗组件可以选择三级地址，新的搜索组件也可以选择到三级县区 如：安徽-合肥-蜀山区
* */
function SelCity(obj,e,provinceId,cityId,districtId,cityFlag) {
var ths = obj,
totleAddress,
liContentJson, //li的内容json （城市-区县）
totalStr; // totalStr：一个包含省 市 区的字符串
Iput.confg.overSelectFlag = false;
Iput.confg.isInputValueChange = false;
Iput.confg.oldCompontentClick = false;
var dal1 =
‘<ul class="searchInput" style="display: none">‘ +
‘</ul>‘+
‘<div class="_citys">‘ +
‘<div class="kekingTips">支持中文/简拼/全拼搜索市、区（如北京/bj/beijing）</div>‘+
‘<span title="关闭" id="cColse" >×</span>‘ +
‘<ul id="_citysheng" class="_citys0">‘ +
‘<li class="citySel">省份</li>‘ +
‘<li>城市</li>‘ +
‘<div title="清空已选城市" class="pull-right" id="resetIpt" style="margin-right:50px;color: #2057BC;text-decoration: underline;line-height: 34px;cursor: pointer">清空</div>‘ +
‘</ul>‘ +
‘<div id="_citys0" class="_citys1"></div>‘ +
‘<div style="display:none" id="_citys1" class="_citys1"></div>‘ +
‘</div>‘;
var dal2 =
‘<ul class="searchInput" style="display: none">‘ +
‘</ul>‘+
‘<div class="_citys">‘ +
‘<div class="kekingTips">支持中文/简拼/全拼搜索市、区（如北京/bj/beijing）</div>‘+
‘<span title="关闭" id="cColse" >×</span>‘ +
‘<ul id="_citysheng" class="_citys0">‘ +
‘<li class="citySel">省份</li>‘ +
‘<li>城市</li>‘ +
‘<li>区/县</li>‘ +
‘<div title="清空已选城市" class="pull-right" id="resetIpt" style="margin-right: 50px;color: #2057BC;text-decoration: underline;line-height: 34px;cursor: pointer">清空</div>‘ +
‘</ul>‘ +
‘<div id="_citys0" class="_citys1"></div>‘ +
‘<div style="display:none" id="_citys1" class="_citys1"></div>‘ +
‘<div style="display:none" id="_citys2" class="_citys1"></div>‘ +
‘</div>‘;
if(provinceId && !cityId && !districtId && !cityFlag) {
Iput.show({ id: ths, event: e, content: dal2,width:"470"});
}else {
Iput.show({ id: ths, event: e, content: dal1,width:"470"});
}
$(‘#PoPy .searchInput‘).bind(‘click‘,function (e) {
var $target = $(e.target),
currentValue = $target[0].textContent;
Iput.confg.overSelectFlag = true;
provinceId && (currentValue.search(‘没有找到‘)===-1 ? $("#"+provinceId).val(currentValue).trigger(‘change‘) : $("#"+provinceId).val(‘‘).trigger(‘change‘));
cityId && (currentValue.search(‘没有找到‘)===-1 ? $("#"+cityId).val(currentValue).trigger(‘change‘) : $("#"+cityId).val(‘‘).trigger(‘change‘));
Iput.confg.overThisByClick =true;
$(‘#PoPy .searchInput‘).css({‘display‘:‘none‘})
});
// 控制在一定时间后才触发
var searchFunc = debounce(function (event) {
effect.search(event,comCityJson,comCountyJson,‘PoPy‘);
},100,false);
// 监控input是否有输入上的变化
var changeInput = function (id) {
$("#"+id).bind(‘input propertychange‘, function(event) {
Iput.confg.overThisByClick = false;
Iput.confg.isInputValueChange = true;
$(‘#PoPy ._citys‘).css({‘display‘:‘none‘});
$(‘#PoPy .searchInput‘).css({‘display‘:‘block‘});
searchFunc(event);
});
};
provinceId && changeInput(provinceId);
cityId && changeInput(cityId);
$("#cColse").click(function () {
if(provinceId) {
$("#"+provinceId).val("").trigger(‘change‘);
}
if(cityId) {
$("#"+cityId).val("").trigger(‘change‘);
}
if(districtId) {
$(‘#‘+districtId).val("").trigger(‘change‘);
}
$(ths).val("").trigger(‘change‘);
Iput.colse();
});
$("#resetIpt").click(function () {
if(provinceId) {
$("#"+provinceId).val("").trigger(‘change‘);
}
if(cityId) {
$("#"+cityId).val("").trigger(‘change‘);
}
if(districtId) {
$(‘#‘+districtId).val("").trigger(‘change‘);
}
$(ths).val("").trigger(‘change‘);
// 默认打开省份
$("#_citysheng li:first").click();
});
// comProvinceJson; // 所有的省份json
var tb_province=[];
for (var i = 0, len = comProvinceJson.length; i < len; i++) {
tb_province.push(‘<a data-level="0" data-id="‘ + comProvinceJson[i][‘id‘] + ‘" data-name="‘ + comProvinceJson[i][‘name‘] + ‘">‘ + comProvinceJson[i][‘name‘] + ‘</a>‘);
}
$("#_citys0").append(tb_province.join(""));
// 点击各个省份时
$("#_citys0 a").click(function () {
Iput.confg.oldCompontentClick = true;
var g = getCity($(this));
$("#_citys1 a").remove();
$("#_citys1").append(g);
$("._citys1").hide();
$("._citys1:eq(1)").show();
var lev = $(this).data("name");
totleAddress = lev;
provinceId && $("#"+provinceId).val(lev).trigger(‘change‘);
$("#_citys1 a").click(function () {
var g = getCounty($(this));
$("#_citys2 a").remove();
$("#_citys2").append(g);
$("._citys1").hide();
$("._citys1:eq(2)").show();
var lev1 = $(this).data("name");
totleAddress = totleAddress + "-" +lev1;
var citySelectFlag = totleAddress.split(‘-‘);
if(citySelectFlag.length>2) {
citySelectFlag[1] = lev1;
citySelectFlag.pop();
totleAddress = citySelectFlag.join(‘-‘);
}
if(cityId){
$("#"+cityId).val(lev1).trigger(‘change‘);
if(!districtId) {
Iput.colse();
}
}else{
if(!provinceId) {
$(ths).val(lev1).trigger(‘change‘);
Iput.colse();
}else {
$(ths).val(totleAddress).trigger(‘change‘);
if(cityFlag) {
Iput.colse();
}
}
}
$("#_citys2 a").click(function () {
Iput.confg.overSelectFlag = true;
var lev = $(this).data("name");
var levId = $(this).data("id");
if( levId === ‘000000‘ ){
lev ="";
}else {
lev = "-" + lev;
}
totleAddress = totleAddress +lev;
if(districtId){
$("#"+districtId).val(lev).trigger(‘change‘);
}else{
if(!cityId) {
$(ths).val(totleAddress).trigger(‘change‘);
}
}
Iput.confg.overThisByClick = true;
Iput.colse();
});
});
});
// 控制 省份/城市/区县的显示与隐藏
$("#_citysheng li").click(function () {
$("#_citysheng li").removeClass("citySel");
$(this).addClass("citySel");
var s = $("#_citysheng li").index(this); // 获取当前点击的li的下标
$("._citys1").hide();
$("._citys1:eq(" + s + ")").show();
});
function getCity(obj) {
var c = obj.data(‘id‘); // 当前点击省份的id
var g = ‘‘;
for (var i = 0, plen = comCityJson.length; i < plen; i++) {
// 如果当前点击的a标签的data-id 被找到 读取当前点击的省份下的城市名 如果cityjson的parentId === 当前点击的省份的id
comCityJson[i][‘parentId‘] == parseInt(c) && (g += ‘<a data-level="1" data-id="‘ + comCityJson[i][‘id‘] + ‘" data-name="‘ + comCityJson[i][‘name‘] + ‘" title="‘ + comCityJson[i][‘name‘] + ‘">‘ + comCityJson[i][‘name‘] + ‘</a>‘);
}
$("#_citysheng li").removeClass("citySel");
$("#_citysheng li:eq(1)").addClass("citySel");
return g;
}
function getCounty(obj) {
var c = obj.data(‘id‘);
var g = ‘<a data-level="2" data-id="000000" data-name="不限" title="不限">‘ + "不限" + ‘</a>‘;
for (var i = 0, plen = comCountyJson.length; i < plen; i++) {
// 如果当前点击的a标签的data-id 被找到 读取当前点击的城市下的区县集合
comCountyJson[i][‘parentId‘] == parseInt(c) && (g += ‘<a data-level="2" data-id="‘ + comCountyJson[i][‘id‘] + ‘" data-name="‘ + comCountyJson[i][‘name‘] + ‘" title="‘ + comCountyJson[i][‘name‘] + ‘">‘ + comCountyJson[i][‘name‘] + ‘</a>‘);
}
$("#_citysheng li").removeClass("citySel");
$("#_citysheng li:eq(2)").addClass("citySel");
return g;
};
// 优化持续性执行的函数
function debounce(func, wait, immediate) {
var timeout, result;
return function () {
var context = this;
var args = arguments;
if (timeout) {
clearTimeout(timeout)
};
if (immediate) {
// 如果已经执行过，不再执行
var callNow = !timeout;
timeout = setTimeout(function(){
timeout = null;
}, wait);
if (callNow) {
result = func.apply(context, args);
}
}
else {
timeout = setTimeout(function(){
result = func.apply(context, args)
}, wait);
}
return result;
}
}
// 搜索城市的功能
var effect={
// 搜索的核心模块
search:function (event, cityData, country,boxId) {
totalStr=[]; // 清空 安徽-合肥-政务区
event.preventDefault();
liContentJson=[];
var self = this,
$target = $(event.target),
$parent = $(‘#‘+boxId),
inputVal = $target.val().toLowerCase(),
moreLetter = false, // false：输入一个字符
keycode = event.keyCode,
cityOneResult = [], //只有一个字符时的comCityJson
cityResult=[]; //大于一个字符的comCityJson
if(inputVal===‘‘) {
$parent.find(‘._citys‘).css({‘display‘:‘block‘});
$parent.find(‘.searchInput‘).css({‘display‘:‘none‘});
return;
}else {
//如果是按下shift/ctr/左右/command键不做事情
// if (keycode === 16 || keycode === 17 || keycode === 18 || keycode === 37 || keycode === 39 || keycode === 91 || keycode === 93 || keycode===8) {
// return false;
// }
if (keycode !== 13 && keycode !== 38 && keycode !== 40) {
$.each(cityData, function (key, value) { // key（下标） value（改下标对应的对象）
//拼音或者名称搜索 || value.id.search(inputVal) > -1 数字搜索
if(inputVal.length<=3) { //只输入一个字符时 先匹配城市(通过letter)
moreLetter = false;
if(value.letter.toLocaleLowerCase().search(inputVal) > -1 || value.name.search(inputVal) > -1) {
cityOneResult.push(value);
if(cityOneResult.length>=15) {
return false;
}
}
}else { //大于一个字符时 先匹配城市(通过pinyin)
moreLetter = true;
cityOneResult=[]; // 清空一个字符串的匹配城市
if (value.pinyin.toLocaleLowerCase().search(inputVal) > -1 || value.name.search(inputVal) > -1) {
if(cityResult.length>=15) {
return false;
}else {
cityResult.push(value);
}
}
}
});
// 将city与country结合 作为ul li的展示项
Array.prototype.push.apply(liContentJson, provinceId ? self.findCounty(cityOneResult,comCityCountStr) : cityOneResult);
Array.prototype.push.apply(liContentJson,provinceId ? self.findCounty(cityResult,comCityCountStr) : cityResult); // 防止出现空数组在push时出错
//如果所有的城市不满足15条 则继续从county里面搜索
if(!moreLetter && liContentJson.length<15) {
var cityResultMore=[];
$.each(country,function (key2,value2) {
if(value2.letter.toLocaleLowerCase().search(inputVal) > -1 || value2.name.search(inputVal) > -1) {
cityResultMore.push(value2); // 一个包含所搜索到的城市与区县的集合
if((liContentJson.length + cityResultMore.length)>=15) {
return false;
}
}
});
Array.prototype.push.apply(liContentJson,provinceId ? self.findCity(cityResultMore,comCityJson) : cityResultMore); // 将county与city结合
}else if(moreLetter && liContentJson.length<15){
var cityResultMore=[];
$.each(country,function (key3,value3) {
if(value3.pinyin.toLocaleLowerCase().search(inputVal) > -1 || value3.name.search(inputVal) > -1) {
cityResultMore.push(value3); // 一个包含所搜索到的城市与区县的集合
if((liContentJson.length + cityResultMore.length)>=15) {
return false;
}
}
});
Array.prototype.push.apply(liContentJson,provinceId ? self.findCity(cityResultMore,comCityJson) : cityResultMore); // 将country与city结合
}
provinceId ? $parent.find(‘.searchInput‘).html(effect.montage.apply(self, [totalStr])) : $parent.find(‘.searchInput‘).html(effect.montage.apply(self, [liContentJson]));
}
}
},
// 找到这个城市下的区县 并将混城市与区县写成 合肥-政务区 形式 或者合肥
findCounty:function (cityArr,cityCountyStr) {
var strArr1 = [],self=this;
for(var i =0,len1=cityArr.length;i<len1;i++) {
var len2=cityCountyStr[cityArr[i].name] ? cityCountyStr[cityArr[i].name].length : 0;
totalStr.push(self.findProvince(comProvinceJson,cityArr[i]));
for(var j=0;j<len2;j++) {
provinceId ? strArr1.push(cityArr[i].name + ‘-‘ + cityCountyStr[cityArr[i].name][j].name) : strArr1.push(cityArr[i].name); // 获取 合肥-政务区 + pinyin
totalStr.push(self.findProvince(comProvinceJson,cityArr[i],cityCountyStr[cityArr[i].name][j])); // 获取 安徽-合肥-政务区
if(strArr1.length>=15) {
return strArr1;
}
}
}
return strArr1;
},
// 找到这个区县所在的城市 并将混城市与区县写成 合肥-政务区 形式 或者合肥
findCity:function (countryData,cityData) {
var strArr2 = [],self=this;
for(var i =0,len1=countryData.length;i<len1;i++) {
for(var j=0,len2 =cityData.length;j<len2;j++) {
if(countryData[i].parentId==cityData[j].id) {
provinceId ? strArr2.push(cityData[j].name + ‘-‘ +countryData[i].name) : strArr2.push(cityData[j].name);
totalStr.push(self.findProvince(comProvinceJson,cityData[j],countryData[i])); // 包含省份的字符串
}
}
}
return strArr2;
},
// 寻找省份
findProvince:function (provinceData,city,country) {
var printStr=[];
for(var k=0,len3=provinceData.length;k<len3;k++) {
if(provinceData[k].id==city.parentId) {
if(country) {
var addressStr = provinceData[k].name +‘-‘ + city.name+‘市-‘+country.name;
printStr.push(‘<li title=‘+ addressStr +‘>‘ + ‘<span class="cityNone">‘ + provinceData[k].name+ ‘-‘ +‘</span>‘+ city.name+‘-‘+country.name + ‘</li>‘)
}else {
var cityStr = provinceData[k].name +‘-‘ + city.name+‘市‘;
printStr.push(‘<li title=‘+ cityStr +‘>‘+ provinceData[k].name+ ‘-‘+ city.name+ ‘</li>‘);
}
}
}
return printStr;
},
montage: function (jsonData) {
// jsonData.unique();
var jsonLength = jsonData.length,
html = ‘‘;
if(provinceId) {
for(var i=0;i<jsonLength;i++) {
html +=jsonData[i];
}
}else {
for(var i=0;i<jsonLength;i++) {
html += ‘<li>‘ + jsonData[i].name + ‘</li>‘;
}
}
html = jsonData.length > 0 && html ? html : ‘<li class="forbid noneCity">没有找到该城市...</li>‘;
return html;
}
}
}
文件3：一个插件
Array.prototype.unique = function () {//去数组重复
return this.sort().join(",,").replace(/(,|^)([^,]+)(,,\2)+(,|$)/g, "$1$2$4").replace(/,,+/g, ",").replace(/,$/, "").split(",");
};
// var ll = [1,23,5,3,5,6,7,5,7,6]; =>["1", "23", "3", "5", "6", "7"]
var Iput = {
confg: {
hand: "0", //0对像位置1鼠标位置divID滚动位置
idIframe: "PoPx", //默认可不用改
idBox: "PoPy", //默认可不用改
content: "", //传过来的内容
ok: null, //弹出框之后执行的函数
id: null, //不能为空一般传this对像而不是对像ID
event: window.event, //这个必写一般为e就可以了
top: 0, //顶部偏移位置
left: 0, //左部偏移位置
bodyHeight: 0, //在被position:absolute元素下得到HTML真实高度
bodyWidth: 0,
width: 0,
soll: null,
overThisByClick:false, //当前输入框是否是以点击结束
overSelectFlag:false, // 是否是结束了城市组件的选择 作为结束的返回标志
isInputValueChange:false, // false： 当前输入框没有输入值
oldCompontentClick:false, // 是否点击了旧的城市组件
pop: null //指定ID点击时不关闭
},
get: function (obj) { return document.getElementById(obj); },
lft: function (e) {
var l = 0;
while (e) { l += e.offsetLeft; e = e.offsetParent; }
return l;
},
ltp: function (e) {
var t = 0;
while (e) { t += e.offsetTop; e = e.offsetParent; }
return t;
},
clear: function () {
Iput.confg.hand = "0"; Iput.confg.ok = null; Iput.confg.top = 0; Iput.confg.left = 0; Iput.confg.bodyHeight = 0; Iput.confg.bodyWidth = 0; Iput.confg.width = 0; Iput.confg.pop = null;
},
stopBubble: function (e) {
if (e && e.stopPropagation) {
e.stopPropagation(); //w3c
} else {
window.event.cancelBubble = true; //IE
}
},
pop: function () {
var $a = document.getElementsByTagName("body").item(0);
var $c = document.createElement("iframe");
var $b = document.createElement("div");
$c.setAttribute(‘id‘, Iput.confg.idIframe);
$c.setAttribute("src", "about:blank");
$c.style.zindex = ‘100‘;
$c.frameBorder = "0";
$c.style.width = "0px";
$c.style.height = "0px";
$c.style.position = ‘absolute‘;
$b.setAttribute(‘id‘, Iput.confg.idBox);
$b.setAttribute(‘align‘, ‘left‘);
$b.style.position = ‘absolute‘;
$b.style.background = ‘transparent‘;
$b.style.zIndex = ‘2000‘;
if ($a) {
if (Iput.get(Iput.confg.idIframe)) {
// $("#resetIpt").trigger("click");
Iput.colse();
}
$a.appendChild($c);
if ($c) {
$c.ownerDocument.body.appendChild($b);
}
Iput.get(Iput.confg.idBox).innerHTML = Iput.confg.content;
Iput.drice(Iput.confg.event);
}
if (!document.all) {
window.document.addEventListener("click", Iput.hide, false);
}
else {
window.document.attachEvent("onclick", Iput.hide);
}
},
drice: function (e) {
var bodyHith = Iput.confg.bodyHeight == 0 ? document.body.scrollHeight : Iput.confg.bodyHeight;
var bodywidth = Iput.confg.bodyWidth == 0 ? document.body.scrollWidth : Iput.confg.bodyWidth;
if (!e) e = window.event;
var top = 0, left = 0,left1=0,
a = Iput.get(Iput.confg.idBox),
b = Iput.get(Iput.confg.idIframe),
c = Iput.confg.id.offsetHeight,
d = Iput.confg.id.offsetWidth,
g = a.firstChild,
w = 0,
st = 0,
sl = 0,
height=0;
if (Iput.confg.soll != null) {
st = document.getElementById(Iput.confg.soll).scrollTop;
sl = document.getElementById(Iput.confg.soll).scrollLeft;
}
if (Iput.get(Iput.confg.idIframe)) {
if (Iput.confg.hand == "1") {
top = Iput.confg.top + document.body.scrollTop + document.documentElement.scrollTop + e.clientY;
left = Iput.confg.left + e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
if (a.offsetHeight + top > bodyHith) { top = top - a.offsetHeight + Iput.get(Iput.confg.idBox).childNodes[1].offsetHeight; }
if (a.offsetWidth + left > bodywidth) { left = left - a.offsetWidth + Iput.get(Iput.confg.idBox).childNodes[1].offsetWidth; }
a.style.top = top - st + "px";
b.style.top = top - st + "px";
a.style.left = left - sl + "px";
b.style.left = left - sl + "px";
}
else if (Iput.confg.hand == "0") {
w = Iput.confg.id.offsetWidth + "px";
a.style.width = w;
b.style.width = w;
g.style.width = w;
height = c;
top = Iput.confg.top + Iput.ltp(Iput.confg.id);
left = Iput.confg.left + Iput.lft(Iput.confg.id);
if (a.childNodes[1].offsetHeight + top + c > bodyHith) { top = top - a.childNodes[1].offsetHeight - c; }
if (a.childNodes[1].offsetWidth + left > bodywidth) {
left = left - a.childNodes[1].offsetWidth + d;
left1 = left1 - g.offsetWidth + d;
g.style.marginLeft = a.childNodes[1].offsetWidth - left1 - sl + "px";
}
b.style.top = top - st + "px";
a.style.top = top - st + height + "px";
b.style.left = left - sl + "px";
a.style.left = left - sl + "px";
}
else {
height = c;
top = Iput.confg.top - Iput.get(Iput.confg.hand).scrollTop + Iput.ltp(Iput.confg.id);
left = Iput.confg.left - Iput.get(Iput.confg.hand).scrollLeft + Iput.lft(Iput.confg.id);
if (a.offsetHeight + top > bodyHith) { top = top - a.offsetHeight - c; }
if (a.offsetWidth + left > bodywidth) { left = left - a.offsetWidth - d; }
b.style.top = top - st + height + "px";
a.style.top = top - st + height + "px";
b.style.left = left - sl + "px";
a.style.left = left - sl + "px";
}
}
},
show: function () {
var config = arguments[0]; var that = Iput.confg;
// Iput.clear();
for (var i in that) { if (config[i] != undefined) { that[i] = config[i]; } };
Iput.pop();
if (Iput.confg.ok != null) {
Iput.action(Iput.confg.ok());
}
},
colse: function () {
if (Iput.get(Iput.confg.idIframe)) {
document.body.removeChild(Iput.get(Iput.confg.idBox));
document.body.removeChild(Iput.get(Iput.confg.idIframe));
}
if (Iput.get(Iput.confg.pop)) {
Iput.get(Iput.confg.pop).style.display = "none";
}
},
$colse: function () { Iput.colse(); },
hide: function (e) {
//点击任何处关闭层
e = window.event || e;
var srcElement = e.srcElement || e.target;
if (Iput.confg.event == undefined) {//输入时用,般在没传入Iput.confg.event请况下使用
// $("#resetIpt").trigger("click");
Iput.colse();
}
else {
var a = Iput.confg.event.srcElement || Iput.confg.event.target;
var b = Iput.get(Iput.confg.pop);
if (a != srcElement && !Iput.confg.oldCompontentClick) {
if(!Iput.confg.overThisByClick && Iput.confg.isInputValueChange) {
$("#resetIpt").trigger("click");
}
Iput.colse();
};
if (b != null) {
if (b != srcElement && a != srcElement) {
// $("#resetIpt").trigger("click");
Iput.colse(); }
}
}
if (Iput.get(Iput.confg.idIframe)) {
Iput.get(Iput.confg.idIframe).onclick = function (e) { Iput.stopBubble(e); };
Iput.get(Iput.confg.idBox).onclick = function (e) { Iput.stopBubble(e); };
}
if (Iput.get(Iput.confg.pop)) {
Iput.get(Iput.confg.pop).onclick = function (e) { Iput.stopBubble(e); };
}
},
action: function (obj) {
eval(obj);
},
// cookie: {
// Set: function (name, val) {
// var Days = 30; //此 cookie 将被保存 30 天
// var exp = new Date(); //new Date("December 31, 9998");
// exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
// document.cookie = name + "=" + escape(val) + ";expires=" + exp.toGMTString() + "; path=/";
// },
// Get: function (name) {
// var start = document.cookie.indexOf(name);
// var end = document.cookie.indexOf(";", start);
// return start == -1 ? null : unescape(document.cookie.substring(start + name.length + 1, (end > start ? end : document.cookie.length)));
// },
// Del: function (name) {
// var exp = new Date();
// exp.setTime(exp.getTime() - 1);
// var cval = this.GetCookie(name);
// if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
// }
// },
ischeck: function (bol) {
var objs = form1.getElementsByTagName("input");
if (bol) {
for (var i = 0; i < objs.length; i++) { if (objs[i].type.toLowerCase() == "checkbox") { objs[i].checked = true; } }
}
else {
for (var i = 0; i < objs.length; i++) { if (objs[i].type.toLowerCase() == "checkbox") { objs[i].checked = false; } }
}
},
contains: function (star, end, isIgnoreCase) {
if (isIgnoreCase) {
star = star.toLowerCase();
end = end.toLowerCase();
}
var startChar = end.substring(0, 1);
var strLen = end.length;
for (var j = 0; j < star.length - strLen + 1; j++) {
if (star.charAt(j) == startChar)//如果匹配起始字符,开始查找
{
if (star.substring(j, j + strLen) == end)//如果从j开始的字符与str匹配，那ok
{
return true;
}
}
}
return false;
},
gData: function (name, value) {
var top = window.top, cache = top[‘_CACHE‘] || {};
top[‘_CACHE‘] = cache;
return value ? cache[name] = value : cache[name];
},
rData: function (name) {
var cache = window.top[‘_CACHE‘];
if (cache && cache[name]) delete cache[name];
}
};
文件4：一个angular的指令封装
‘use strict‘;
(function() {
ydCreditApp.directive(‘citydata‘, function() {
return {
restrict: "AE", //E(元素),A（属性）,C（CSS）,M（注释） 默认是A
// replace:true,//是否替换原标签
link: function($scope, $element,$attrs) {
if($attrs && $attrs.placeholder.search(‘城市‘) > -1) {
$element.bind(‘focus‘,function (e) {
SelCity(this,e,‘‘,$attrs.id);
});
$element.bind(‘blur‘,function () {
if(!Iput.confg.overThisByClick && Iput.confg.isInputValueChange) {
$(this).val("").trigger(‘change‘);
}
});
}
if($attrs && $attrs.placeholder.search(‘省市‘) > -1) {
$element.bind(‘focus‘,function (e) {
SelCity(this,e,$attrs.id);
});
$element.bind(‘blur‘,function () {
if(!Iput.confg.overThisByClick && Iput.confg.isInputValueChange) {
$(this).val("").trigger(‘change‘);
}
});
}
}
};
});
})();
5：最后是如何调用
时间： 2024-10-13 16:00:06