啥都不说 先给思想
城市组件设计
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：最后是如何调用
