首页 > 其他 > 详细

(自创)城市组件,含拼音首字母搜索 基于angular的封装

时间:2017-12-13 16:04:35      阅读:334      评论:0      收藏:0      [点我收藏+]

啥都不说 先给思想

城市组件设计

 

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:使用规则:

 

1placeholder里 含有‘省市’两个字的 会出现三级地区,如:录单页面

含有‘城市’两字的只出出现城市 如:运单查询页面

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:最后是如何调用 

技术分享图片

 



(自创)城市组件,含拼音首字母搜索 基于angular的封装

原文:http://www.cnblogs.com/mamimi/p/8032901.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!