CocoRoboDesktop/js/Controls/Basic/City.js

Namespace.register("U.MD.UI.city");

/**
* [Control description] 城市控件接口
* @param {[html元素]} element [需要使用城市控件的元素(默认放置到element下面)]
*/
U.MD.UI.city = function (element) {
    U.UF.EV.stopBubble();           //阻止事件冒泡 防止被body的事件覆盖
    if (!element || !element.tagName) {           //如果element存在tagName 则一定是html元素 否则不执行城市控件
        return;
    }
    if (_cityBox = U.selectEl("#U_MD_UI_city_cityBox")[0]) {
        var _rect = element.getBoundingClientRect();
        _cityBox.style.top = _rect.top + _rect.height + document.documentElement.scrollTop + "px";
        //调整控件的top位置
        _cityBox.style.left = _rect.left + document.documentElement.scrollLeft + "px";
        //调整控件的left位置
        U.selectEl(_cityBox).removeClass("U_MD_UI_city_hidden");
        //删除掉hidden的class名(显示城市控件)  目的: 去除掉display为none的样式
        U.MD.UI.city.Attr.inputNode = element;      //获取最终结果的表单元素 可能会不同 因此 inputNode需要重新赋值
        return;
    }
    var _city = U.MD.UI.city;           //简写命名空间
    _city.create(element);             //将控件html代码添加到body上 并调整控件位置
    _city.Attr = {                   //存放节点 与 变量 的json对象
        "inputNode": element          //判断是哪个表单点击的 为赋值所用
    };
    _city.init();       //函数初始化(添加js功能)

};

U.MD.UI.city.Attr = {};              //存放元素与变量的json全局变量 未赋值
U.MD.UI.city.usedCity = null;       //存放常用市数据的变量
U.MD.UI.city.province = null;       //存放省数据的变量
U.MD.UI.city.city = {};             //存放市数据的变量
U.MD.UI.city.area = {};             //存放区数据的变量

U.MD.UI.city.htmlTemplate = ' <ul class="U_MD_UI_city_menuBox">            <!--控件的头部-->\n' +
        '\n' +
        '            <!--U_MD_UI_city_menuChecked 选中菜单的按钮时所用的"className":红色-->\n' +
        '            <!--U_MD_UI_city_filled 表示待填写class 为增删class占位置 防出错 以下都是-->\n' +
        '            <!--U_MD_UI_city_menuoChecked 选择城市后所添加的class 红色小圆点-->\n' +
        '            <li id="U_MD_UI_city_usedCityMenu" data-city-mark="U_MD_UI_city_usedCityCont"  class="U_MD_UI_city_menuChecked" data-city-res="">\n' +
        '                <span>常用市</span>\n' +
        '            </li>\n' +
        '\n' +
        '            <li id="U_MD_UI_city_provinceMenu" data-city-mark="U_MD_UI_city_provinceCont" class="U_MD_UI_city_filled" data-city-res="">\n' +
        '                <span>省/直辖市</span>\n' +
        '            </li>\n' +
        '\n' +
        '            <li id="U_MD_UI_city_cityMenu" data-city-mark="U_MD_UI_city_cityCont" class="U_MD_UI_city_filled U_MD_UI_city_hidden" data-city-res="">\n' +
        '                <span>请选择</span>\n' +
        '            </li>\n' +
        '\n' +
        '            <li id="U_MD_UI_city_areaMenu" data-city-mark="U_MD_UI_city_areaCont" class="U_MD_UI_city_filled U_MD_UI_city_hidden" data-city-res="">\n' +
        '                <span>请选择</span>\n' +
        '            </li>\n' +
        '        </ul>\n' +
        '\n' +
        '\n' +
        '        <!--以下为主要内容区域-->\n' +

        '        <!-- ----------------------------------------------------------------------------- -->\n' +
        '       <ul id="U_MD_UI_city_usedCityCont" class="U_MD_UI_city_filled U_MD_UI_city_Cont">  <!-- &lt;!&ndash;常用城市盒子节点&ndash;&gt; -->\n' +
        '            <li id="U_MD_UI_city_liTemplate"><span>光明新区</span></li>\n' +
        '            <!-- U_MD_UI_city_liTemplate 为内容区域的li的模板 可无视 已display为none -->\n' +
        '            <!--U_MD_UI_city_Cont_ochecked 选中城市的按钮时所用的"className":红色-->\n' +
        '        </ul>\n' +
        '\n' +
        '\n' +
        '        <ul class="U_MD_UI_city_filled U_MD_UI_city_Cont U_MD_UI_city_hidden" id="U_MD_UI_city_provinceCont">  <!-- &lt;!&ndash;存放省的盒子节点&ndash;&gt; -->\n' +
        '        </ul>\n' +
        '\n' +
        '\n' +
        '        <ul class="U_MD_UI_city_filled U_MD_UI_city_Cont U_MD_UI_city_hidden" id="U_MD_UI_city_cityCont">  <!-- &lt;!&ndash;存放市的盒子节点&ndash;&gt; -->\n' +
        '        </ul>\n' +
        '\n' +
        '\n' +
        '        <ul class="U_MD_UI_city_filled U_MD_UI_city_Cont U_MD_UI_city_hidden" id="U_MD_UI_city_areaCont">  <!-- &lt;!&ndash;存放地区的盒子节点&ndash;&gt; -->\n' +
        '        </ul>';
//html代码

/**
* 添加html代码,并且判断html代码是否存在 若存在 则不添加
* @param {[html元素]} element [需要使用城市控件的元素(默认放置到element下面)]
*/
U.MD.UI.city.create = function (element) {
    var _cityBox = $$("div", { id: 'U_MD_UI_city_cityBox', className: 'U_MD_UI_city_cityBox U_MD_UI_city_hidden' }, document.body);
    _cityBox.innerHTML += U.MD.UI.city.htmlTemplate;
    var _rect = element.getBoundingClientRect();
    _cityBox.style.top = _rect.top + _rect.height + document.documentElement.scrollTop + "px";
    //调整控件的top位置
    _cityBox.style.left = _rect.left + document.documentElement.scrollLeft + "px";
    //调整控件的left位置
    U.MD.UI.city.Attr.inputNode = element;
    //获取最终结果的表单元素 可能会不同 因此 inputNode需要重新赋值
    U.selectEl(_cityBox).removeClass("U_MD_UI_city_hidden");
    //删除掉hidden的class名(显示城市控件)  目的: 去除掉display为none的样式
};

/**
* 函数初始化
*/
U.MD.UI.city.init = function () {
    var _city = U.MD.UI.city;       //简写命名空间
    _city.getUsedCity(); //获取常用市所有数据
    _city.inputEvent();  //添加监听事件: 点击表单显示城市控件并发送后台请求数据 与 点击body区域隐藏城市控件
    _city.menuEvent();   //添加监听事件: 点击菜单显示对应的内容
};

/**
* 为表单添加点击事件
*/
U.MD.UI.city.inputEvent = function () {
    var _city = U.MD.UI.city;       //简写命名空间
    var _attr = _city.Attr;  //简写全局属性json名
    var _hidden = "U_MD_UI_city_hidden";   //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式
    var _cityBox = U.selectEl("#U_MD_UI_city_cityBox")[0];              //城市控件总盒子节点

    U.selectEl(document).bind('click', function () {          //点击body时 隐藏城市控件
        U.selectEl(_cityBox).addClass(_hidden);
        //添加掉hidden的class名  目的: 添加display为none的样式
    }, false);

    U.selectEl(_cityBox).bind('click', function (e) {     //防止点击城市控件时 被body的事件覆盖而隐藏 因此加上防止冒泡处理
        U.UF.EV.stopBubble(e);
        //阻止事件冒泡
    });

    U.selectEl("#U_MD_UI_city_areaCont")[0].onclick = function () {
        if ($("#U_MD_UI_city_areaCont")[0]) { 
            U.selectEl("#U_MD_UI_city_cityBox")[0].style.display = "none";
        }
    }
};

/**
* 为每个菜单添加点击事件
*/
U.MD.UI.city.menuEvent = function () {
    var _city = U.MD.UI.city;   //简写命名空间
    var _attr = _city.Attr;     //简写全局属性json名
    var _menuAllNode = U.selectEl("[data-city-mark]");                //所有菜单节点;
    var _hidden = "U_MD_UI_city_hidden";   //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式

    for (var i = 0, len = _menuAllNode.length; i < len; i++) {   //循环所有菜单元素
        var _el = _menuAllNode[i];     //获取每个菜单 赋值给变量el
        U.selectEl(_el).bind('click', function () {    //添加点击事件
            _city.menuClassControl(this, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden);     //为每个菜单添加对应每个区域的事件
        });
        if (_el.id === "U_MD_UI_city_provinceMenu") {     //如果点击的是 省/直辖市 菜单 则获取对应的数据
            U.selectEl(_el).bind('click', function () {
                _city.getProvince();    //省/直辖市菜单的点击事件 获取数据
            })
        }
    }
};

/**
* 获取数据常用市的所有数据
*/
U.MD.UI.city.getUsedCity = function () {
    var _city = U.MD.UI.city;   //简写命名空间
    var _attr = _city.Attr;     //简写全局属性json名
    var _usedCityMenu = U.selectEl("#U_MD_UI_city_usedCityMenu")[0];    //常用市菜单按钮
    var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0];        //要clone的li的模板
    var _usedCityCont = U.selectEl("#U_MD_UI_city_usedCityCont")[0];    //常用市内容区域
    if (!_city.usedCity) {    //如果 常用市(_city.usedCity) 无数据 则发送请求到后台获取数据 并打印出来
        U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Controls", "City_UsedCity"], function (r) {
            _city.usedCity = r.value;
            _city.allDataPrint(_usedCityMenu, _city.usedCity, _liTemplate, "usedCity", _usedCityCont);   //打印数据
        });
    }
};


/**
* 获取省/直辖市的所有数据
*/
U.MD.UI.city.getProvince = function () {
    var _city = U.MD.UI.city;       //简写命名空间
    var _attr = _city.Attr;  //简写全局属性json名
    var _provinceMenu = U.selectEl("#U_MD_UI_city_provinceMenu")[0];    //省菜单按钮
    var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0];        //要clone的li的模板
    var _provinceCont = U.selectEl("#U_MD_UI_city_provinceCont")[0];    //省内容区域
    if (!_city.province) { //如果 省/直辖市(_city.province) 无数据 则发送请求到后台获取数据 并打印出来
        U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Controls", "City_Province"], function (r) {
            _city.province = r.value;
            _city.allDataPrint(_provinceMenu, _city.province, _liTemplate, "province", _provinceCont); //打印数据
        });
    }
};


/**
* 通过code 获取市的所有数据
* @param code 省级的id
*/
U.MD.UI.city.getCity = function (code) {
    var _city = U.MD.UI.city;       //简写命名空间
    var _attr = _city.Attr;  //简写全局属性json名
    var _cityMenu = U.selectEl("#U_MD_UI_city_cityMenu")[0];            //市菜单按钮
    var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0];        //要clone的li的模板
    var _cityCont = U.selectEl("#U_MD_UI_city_cityCont")[0];            //市内容区域
    var _hidden = "U_MD_UI_city_hidden";   //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式

    if (!_city.city[code]) {  //_city.city = json 而_city.city[code]则是对应的数组值 例如:我点击广东后 获取到了广东的id  则我要通过 广东的id  获取下级的市数据 因此如果json中没有该值 则向后台发送请求获取
        _city.menuClassControl(_cityMenu, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden);     //相当于点击菜单 将城市的菜单于内容 "先"显示出来 再加载数据 防止多次点击
        U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Controls", "City_PidFind", code, 1], function (r) {
            _city.city[code] = r.value;
            //_city.city = {}
            //r.value = [{},{},{}]
            //为了能判断该code下是否有数据 因此需要在_city.city下添加一个 以code为键名 r.value为值的数组
            //例如:_city.city = {}  code = 123 r.value = [{a:1}，{a:1}，{a:1}] 最后会变成 _city.city = {123:[{a:1}，{a:1}，{a:1}]}
            _city.allDataPrint(_cityMenu, _city.city[code], _liTemplate, "city", _cityCont);  //打印数据
        });
    } else {  //如果json下有数据 则直接打印该数据
        _city.menuClassControl(_cityMenu, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden);     //相当于点击菜单 将城市的菜单与内容区域 显示出来
        _city.allDataPrint(_cityMenu, _city.city[code], _liTemplate, "city", _cityCont); //打印数据
    }
};




/**
* 通过code 获取区级的所有数据  函数的意思可参看上面getCity的注释
* @param code 参数为市级的id
*/
U.MD.UI.city.getarea = function (code) {
    var _city = U.MD.UI.city;       //简写命名空间
    var _attr = _city.Attr;  //简写全局属性json名
    var _areaMenu = U.selectEl("#U_MD_UI_city_areaMenu")[0];            //区菜单按钮
    var _hidden = "U_MD_UI_city_hidden";   //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式
    var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0];        //要clone的li的模板
    var _areaCont = U.selectEl("#U_MD_UI_city_areaCont")[0];            //区内容区域
    if (!_city.area[code]) {
        _city.menuClassControl(_areaMenu, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden);     //相当于点击菜单 将城市的菜单于内容 "先"显示出来 再加载数据 防止多次点击
        U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Controls", "City_PidFind", code, 2], function (r) {
            _city.area[code] = r.value;
            _city.allDataPrint(_areaMenu, _city.area[code], _liTemplate, "area", _areaCont);
        });
    } else {
        _city.menuClassControl(_areaMenu, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden);     //相当于点击菜单 将城市的菜单于内容 "先"显示出来 再加载数据 防止多次点击
        _city.allDataPrint(_areaMenu, _city.area[code], _liTemplate, "area", _areaCont);
    }
};

/**
* 打印传过来的数组json数据
* @param  {[type]} menu     [与之对应的菜单元素]
* @param  {[type]} data     [是一个数组json]
* @param  {[type]} template [是一个li模板 clone用的]
* @param  {[type]} type     [数据类型("province"、"usedCity"....) 为判断所用]
* @param  {[type]} parent   [父节点("cityCont,areaCont...") 也叫做内容区域 ]
*/
U.MD.UI.city.allDataPrint = function (menu, data, template, type, parent) {
    var _city = U.MD.UI.city;       //简写命名空间
    var _attr = _city.Attr;  //简写全局属性json名
    var _usedCityMenu = U.selectEl("#U_MD_UI_city_usedCityMenu")[0];    //常用市菜单按钮
    var _provinceMenu = U.selectEl("#U_MD_UI_city_provinceMenu")[0];    //省菜单按钮
    var _len = data.length; //数组json的长度
    var _menu = menu;   //菜单元素 赋值给 _menu变量
    for (var i = 0; i < _len; i++) {
        // 遍历 data数据(数组json)
        var _span = _city.dataPrint(data[i], template, type, parent);
        //单个数据打印 PS：由于data是一个 数组json([{a:1},{a:2},{a:3}])  因此 需要将获取对应的数据 并添加在 对应的 parent(内容区域) 上
        _span.onclick = function () {
            var _type = U.selectEl(this).attr("data-city-type");
            //获取点击的span标签的属于哪一类型 (比如： 点击省的数据 是 province  市的数据 则时 city)
            var _code = U.selectEl(this).attr("data-city-code");
            //获取数据编码 为寻找下一层所用
            U.selectEl(_menu.children[0]).addClass("U_MD_UI_city_menuoChecked");
            //点击后为 对应的相对应的菜单添加红色小圆点样式 例如:点击省/直辖市菜单下的 广东后  省/直辖市就会多一个红色小圆点的样式
            _menu.children[0].innerText = this.innerText;
            //改变对应菜单的名字为：点击数据的值    例如：点击"省/直辖市"菜单 下的广东 则 菜单的名字则变为 广东 PS: children[0] 为 li下的span标签
            U.selectEl(_menu).attr("data-city-res", this.innerText);
            //给自定义属性 data-city-res 添加为: 点击数据的值  PS: 为获取最终值给表单所用
            _city.contClassControl(this, "U_MD_UI_city_Cont_ochecked");
            //给所选的内容数据添加红色背景 并且删除同一内容区域拥有红色背景的其他元素
            switch (_type) {
                //此处为 判断 点击 各类型数据需要做的动作 type为判断哪种类型    比如: type值为 "province"  则是 省/直辖市菜单下的 数据 点击这些数据后 就是要做的事情 
                case "province":
                    _city.getCity(_code);
                    //将数据的 code 值传入给 城市函数 来获取城市数据 PS: 获取市的数据需要获取他们的parentid 而code则是他们的parentid
                    _city.initAllClass(_usedCityMenu);
                    //点击省/直辖市下的数据的话 则初始化 常用市菜单 与 相对应的内容区域样式
                    break;
                case "usedCity":
                    if (this.innerText === "重庆") {    //由于重庆这个城市比较特殊 因此需要在常用市那将重庆转为省数据
                        _city.getCity(_code);
                    } else {
                        _city.getarea(_code);
                    }
                    //在将数据的 code 值传入给 城市函数 来获取城市数据 PS: 获取市的数据需要获取他们的parentid 而code则是他们的parentid
                    _city.initAllClass(_provinceMenu);
                    //点击常用市下的数据的话 则初始化 省/直辖市菜单 与 相对应的内容区域样式
                    break;
                case "city":
                    _city.getarea(_code);
                    //在将数据的 code 值传入给 区函数 来获取区数据 PS: 获取区的数据需要获取他们的parentid 而code则是他们的parentid
                    break;
                case "area":
                    _city.getRes("data-city-res");
                    //由于该控件是  省-市-区  因此 当点击区里的数据时 则调用获取最终值的函数
                    break;
            }
        }
    }
};

/**
* 打印单个数据api(创建节点,赋id 赋innerText 等等)
* @param  {[json对象]} data     [json对象的数据]
* @param  {[元素]} template [需要clone的li模板]
* @param  {[字符串]} type     [属于哪种城市类型]
* @param  {[元素]} parent   [父节点]
* @return {[元素]}          [克隆完后的一条li下的span节点]
*/
U.MD.UI.city.dataPrint = function (data, template, type, parent) {
    var _city = U.MD.UI.city;       //简写命名空间
    var _liNode = _city.clone(template),  //克隆已建好的li模板
            _spanNode = _liNode.children[0];         //获取li的span节点
    var _shortName = data.short_name;            //获取城市名字缩写
    var _name = data.name;                       //获取名字全称
    _liNode.id = type + data.id;                 //添加id
    _spanNode.innerText = _shortName;            //添加文字内容
    if (_shortName === "北京" || _shortName === "上海" || _shortName === "天津" || _shortName === "重庆") {//由于这4个城市的 缩写 和省的名字相同 因此 需要将数据名 改成name 详见数据库
        if (parent.id === "U_MD_UI_city_cityCont") {
            _spanNode.innerText = _name;        //添加文字内容
        }
    }
    if (parent.id === "U_MD_UI_city_areaCont") {  //由于区级数据库 的缩写少了一个区 例如：显示出来的 龙岗区 被缩成 龙岗  因此需要将值等于他们的全称
        _spanNode.innerText = _name;        //添加文字内容
    }

    _spanNode.id = "span_" + type + data.id;
    U.selectEl(_spanNode).attr("data-city-code", data.id);    //添加自定义属性 编号
    U.selectEl(_spanNode).attr("data-city-type", type);       //添加自定义属性 类型
    parent.appendChild(_liNode);                    //添加到parent节点上
    return _spanNode;                              //返回该元素
};



/**
* 添加选中时的class 并删除已有该class的元素
* @param {[元素]} el [点击菜单的元素]
* @param {[字符串]} cs [选中菜单时的class]
* @param {[字符串]} dataattr   [菜单的自定义属性 与 对应内容区域的id相同]
* @param {[字符串]} hiddenCs [对应内容区域的class]
*/
U.MD.UI.city.menuClassControl = function (el, cs, dataattr, hiddenCs) {
    var _city = U.MD.UI.city;       //简写命名空间
    var _attr = _city.Attr;     //简写全局属性json名
    var _cityMenu = U.selectEl("#U_MD_UI_city_cityMenu")[0];            //市菜单按钮
    var _areaMenu = U.selectEl("#U_MD_UI_city_areaMenu")[0];            //区菜单按钮
    var _cityCont = U.selectEl("#U_MD_UI_city_cityCont")[0];            //市内容区域
    var _areaCont = U.selectEl("#U_MD_UI_city_areaCont")[0];            //区内容区域
    var _oEl = U.selectEl("." + cs)[0];
    //找到拥有该class的元素
    if (_oEl) { U.selectEl(_oEl).removeClass(cs) };
    //如果找的到该元素 则删除此元素的class
    U.selectEl(el).addClass(cs);
    //为el元素添加该class
    var _oElCont = U.selectEl("#" + U.selectEl(_oEl).attr(dataattr))[0];
    //找到拥有该class的菜单元素的自定义属性的值  并找到对应区域块的元素(区域块元素的id 与 自定义属性的值相等)
    var _elCont = U.selectEl("#" + U.selectEl(el).attr(dataattr))[0];
    //同上 找到点击菜单元素的自定义属性的值
    U.selectEl(_oElCont).addClass(hiddenCs);
    //添加名为hiddenCs 的className (添加与删除 display为none)
    U.selectEl(_elCont).removeClass(hiddenCs);
    //elCont元素的display为block
    var _id = el.id;
    switch (_id) {                               //以下为点击菜单时所作出的不同执行命令
        case "U_MD_UI_city_usedCityMenu":
        case "U_MD_UI_city_provinceMenu":                   //当为菜单常用市 或者 省直辖市时 将区 与 市菜单 与对应内容区域 清空初始化
            U.selectEl(_cityMenu).addClass(hiddenCs);
            U.selectEl(_areaMenu).addClass(hiddenCs);
            U.selectEl(_cityCont).addClass(hiddenCs);
            U.selectEl(_areaCont).addClass(hiddenCs);
            _cityMenu.children[0].innerText = "请选择";
            _areaMenu.children[0].innerText = "请选择";
            _cityCont.innerHTML = "";
            _areaCont.innerHTML = "";
            U.selectEl(_cityMenu).attr("data-city-res", "");
            U.selectEl(_areaMenu).attr("data-city-res", "");
            break;
        case "U_MD_UI_city_cityMenu":                       //当为市菜单时 将 区菜单 与对应内容区域 清空初始化
            U.selectEl(el).removeClass(hiddenCs);
            U.selectEl(_areaMenu).addClass(hiddenCs);
            U.selectEl(_areaCont).addClass(hiddenCs);
            _areaMenu.children[0].innerText = "请选择";
            _areaCont.innerHTML = "";
            break;
        case "U_MD_UI_city_areaMenu":
            U.selectEl(el).removeClass(hiddenCs);
            break;
    }
};


/**
* 内容区域的class 的控制函数 PS:添加红色背景的样式
* @param  {[type]} el       [所选中的数据元素]
* @param  {[type]} ocheckcs [所需要对el添加的样式]
*/
U.MD.UI.city.contClassControl = function (el, ocheckcs) {
    var _city = U.MD.UI.city;       //简写命名空间
    var _oEls = U.selectEl("." + ocheckcs);
    //找到拥有该class的所有元素
    var _type = U.selectEl(el).attr("data-city-type");
    //获取他们的该元素的类型
    for (var i = 0, len = _oEls.length; i < len; i++) {  //遍历oEls
        var _otype = U.selectEl(_oEls[i]).attr("data-city-type");
        if (_oEls[i] && _otype === _type) {
            //如果找的到该元素  并且还是同一内容区域的元素 则删除他的class 例如:(市内容区域下)点击深圳后 在点广州 则 广州的背景颜色为红色 深圳的背景颜色为初始颜色
            U.selectEl(_oEls[i]).removeClass(ocheckcs)
        }
    }
    U.selectEl(el).addClass(ocheckcs);
    //为el元素添加该class
};

/**
* 此函数专门为 初始化 常用市 或者 省/直辖市的样式而写的 例如:点击常用市下的数据后 省/直辖市的菜单与对应的内容 样式初始化为不选中
* @param el  只能放 常用市菜单(元素) 和 省/直辖市菜单(元素)
*/
U.MD.UI.city.initAllClass = function (el) {
    var _city = U.MD.UI.city;       //简写命名空间
    el.className = "U_MD_UI_city_filled";                //将菜单li的样式初始化 U_MD_UI_city_filled无样式属性 摆设占位置用
    el.children[0].className = "";                       //将li里的span样式也初始化
    U.selectEl(el).attr("data-city-res", "");            //将span的自定义属性也初始化
    var oEl = U.selectEl(".U_MD_UI_city_Cont_ochecked");          //获取内容区域中被选中的span元素
    for (var i = 0; i < oEl.length; i++) {
        U.selectEl(oEl[i]).removeClass("U_MD_UI_city_Cont_ochecked");        //判断是否存在此元素 如果存在 则删除被选中的样式
    }
    if (el.id === "U_MD_UI_city_provinceMenu") {                      //比如: 点完省/直辖市内容区域的数据时 传过来的el则会是常用市菜单元素 然后常用市菜单的innerText则会初始化回常用市
        el.children[0].innerText = "省/直辖市";
    }
    if (el.id === "U_MD_UI_city_usedCityMenu") {                      //同上
        el.children[0].innerText = "常用市";
    }
};

/**
*  通过获取自定义属性的值 查出最终值
* @param dataattr 自定义属性的名字
*/
U.MD.UI.city.getRes = function (dataattr) {
    var _city = U.MD.UI.city;       //简写命名空间
    var _attr = _city.Attr;  //简写全局属性json名
    var _inputNode = _attr.inputNode;
    var _cityBox = U.selectEl("#U_MD_UI_city_cityBox")[0];              //城市控件总盒子节点
    var _hidden = "U_MD_UI_city_hidden";   //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式
    var resAll = U.selectEl("[" + dataattr + "]");      //获取所有拥有该自定义属性的元素 得到一个数组
    var _arr = [];   //声明一个空数组 存放最终值
    for (var i = 0, len = resAll.length; i < len; i++) {   //遍历所有自定义元素
        var _val = U.selectEl(resAll[i]).attr(dataattr);    //获取他们的自定义值
        if (_val) {  //判断值是否存在
            _arr.push(_val);  //若存在 则将最终值依次添加到arr数组里
        }
    }
    _inputNode.value = (_arr.join("-"));    //最后分割数组用“-” 隔开 添加到表单上
    U.selectEl(_cityBox).addClass(_hidden);     //最后隐藏控件
};

U.MD.UI.city.clone = function (ele) {    //克隆节点
    var node = ele.cloneNode();
    var child = ele.children;
    for (var i = 0; i < child.length; i++) {
        var childNode = child[i].cloneNode();
        node.appendChild(childNode);
    }
    return node;
};