123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476 |
- Namespace.register("U.MD.UI.city");
- U.MD.UI.city = function (element) {
- U.UF.EV.stopBubble();
- if (!element || !element.tagName) {
- 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";
-
- _cityBox.style.left = _rect.left + document.documentElement.scrollLeft + "px";
-
- U.selectEl(_cityBox).removeClass("U_MD_UI_city_hidden");
-
- U.MD.UI.city.Attr.inputNode = element;
- return;
- }
- var _city = U.MD.UI.city;
- _city.create(element);
- _city.Attr = {
- "inputNode": element
- };
- _city.init();
- };
- U.MD.UI.city.Attr = {};
- 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"> <!-- <!–常用城市盒子节点–> -->\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"> <!-- <!–存放省的盒子节点–> -->\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"> <!-- <!–存放市的盒子节点–> -->\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"> <!-- <!–存放地区的盒子节点–> -->\n' +
- ' </ul>';
- 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";
-
- _cityBox.style.left = _rect.left + document.documentElement.scrollLeft + "px";
-
- U.MD.UI.city.Attr.inputNode = element;
-
- U.selectEl(_cityBox).removeClass("U_MD_UI_city_hidden");
-
- };
- U.MD.UI.city.init = function () {
- var _city = U.MD.UI.city;
- _city.getUsedCity();
- _city.inputEvent();
- _city.menuEvent();
- };
- U.MD.UI.city.inputEvent = function () {
- var _city = U.MD.UI.city;
- var _attr = _city.Attr;
- var _hidden = "U_MD_UI_city_hidden";
- var _cityBox = U.selectEl("#U_MD_UI_city_cityBox")[0];
- U.selectEl(document).bind('click', function () {
- U.selectEl(_cityBox).addClass(_hidden);
-
- }, false);
- U.selectEl(_cityBox).bind('click', function (e) {
- 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;
- var _menuAllNode = U.selectEl("[data-city-mark]");
- var _hidden = "U_MD_UI_city_hidden";
- for (var i = 0, len = _menuAllNode.length; i < len; i++) {
- var _el = _menuAllNode[i];
- 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;
- var _usedCityMenu = U.selectEl("#U_MD_UI_city_usedCityMenu")[0];
- var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0];
- var _usedCityCont = U.selectEl("#U_MD_UI_city_usedCityCont")[0];
- if (!_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;
- var _provinceMenu = U.selectEl("#U_MD_UI_city_provinceMenu")[0];
- var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0];
- var _provinceCont = U.selectEl("#U_MD_UI_city_provinceCont")[0];
- if (!_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);
- });
- }
- };
- U.MD.UI.city.getCity = function (code) {
- var _city = U.MD.UI.city;
- var _attr = _city.Attr;
- var _cityMenu = U.selectEl("#U_MD_UI_city_cityMenu")[0];
- var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0];
- var _cityCont = U.selectEl("#U_MD_UI_city_cityCont")[0];
- var _hidden = "U_MD_UI_city_hidden";
- if (!_city.city[code]) {
- _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.allDataPrint(_cityMenu, _city.city[code], _liTemplate, "city", _cityCont);
- });
- } else {
- _city.menuClassControl(_cityMenu, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden);
- _city.allDataPrint(_cityMenu, _city.city[code], _liTemplate, "city", _cityCont);
- }
- };
- U.MD.UI.city.getarea = function (code) {
- var _city = U.MD.UI.city;
- var _attr = _city.Attr;
- var _areaMenu = U.selectEl("#U_MD_UI_city_areaMenu")[0];
- var _hidden = "U_MD_UI_city_hidden";
- var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0];
- 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);
- }
- };
- U.MD.UI.city.allDataPrint = function (menu, data, template, type, parent) {
- var _city = U.MD.UI.city;
- var _attr = _city.Attr;
- var _usedCityMenu = U.selectEl("#U_MD_UI_city_usedCityMenu")[0];
- var _provinceMenu = U.selectEl("#U_MD_UI_city_provinceMenu")[0];
- var _len = data.length;
- var _menu = menu;
- for (var i = 0; i < _len; i++) {
-
- var _span = _city.dataPrint(data[i], template, type, parent);
-
- _span.onclick = function () {
- var _type = U.selectEl(this).attr("data-city-type");
-
- 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;
-
- U.selectEl(_menu).attr("data-city-res", this.innerText);
-
- _city.contClassControl(this, "U_MD_UI_city_Cont_ochecked");
-
- switch (_type) {
-
- case "province":
- _city.getCity(_code);
-
- _city.initAllClass(_usedCityMenu);
-
- break;
- case "usedCity":
- if (this.innerText === "重庆") {
- _city.getCity(_code);
- } else {
- _city.getarea(_code);
- }
-
- _city.initAllClass(_provinceMenu);
-
- break;
- case "city":
- _city.getarea(_code);
-
- break;
- case "area":
- _city.getRes("data-city-res");
-
- break;
- }
- }
- }
- };
- U.MD.UI.city.dataPrint = function (data, template, type, parent) {
- var _city = U.MD.UI.city;
- var _liNode = _city.clone(template),
- _spanNode = _liNode.children[0];
- var _shortName = data.short_name;
- var _name = data.name;
- _liNode.id = type + data.id;
- _spanNode.innerText = _shortName;
- if (_shortName === "北京" || _shortName === "上海" || _shortName === "天津" || _shortName === "重庆") {
- 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);
- return _spanNode;
- };
- U.MD.UI.city.menuClassControl = function (el, cs, dataattr, hiddenCs) {
- var _city = U.MD.UI.city;
- var _attr = _city.Attr;
- 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];
-
- if (_oEl) { U.selectEl(_oEl).removeClass(cs) };
-
- U.selectEl(el).addClass(cs);
-
- var _oElCont = U.selectEl("#" + U.selectEl(_oEl).attr(dataattr))[0];
-
- var _elCont = U.selectEl("#" + U.selectEl(el).attr(dataattr))[0];
-
- U.selectEl(_oElCont).addClass(hiddenCs);
-
- U.selectEl(_elCont).removeClass(hiddenCs);
-
- 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;
- }
- };
- U.MD.UI.city.contClassControl = function (el, ocheckcs) {
- var _city = U.MD.UI.city;
- var _oEls = U.selectEl("." + ocheckcs);
-
- var _type = U.selectEl(el).attr("data-city-type");
-
- for (var i = 0, len = _oEls.length; i < len; i++) {
- var _otype = U.selectEl(_oEls[i]).attr("data-city-type");
- if (_oEls[i] && _otype === _type) {
-
- U.selectEl(_oEls[i]).removeClass(ocheckcs)
- }
- }
- U.selectEl(el).addClass(ocheckcs);
-
- };
- U.MD.UI.city.initAllClass = function (el) {
- var _city = U.MD.UI.city;
- el.className = "U_MD_UI_city_filled";
- el.children[0].className = "";
- U.selectEl(el).attr("data-city-res", "");
- var oEl = U.selectEl(".U_MD_UI_city_Cont_ochecked");
- 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.children[0].innerText = "省/直辖市";
- }
- if (el.id === "U_MD_UI_city_usedCityMenu") {
- el.children[0].innerText = "常用市";
- }
- };
- U.MD.UI.city.getRes = function (dataattr) {
- var _city = U.MD.UI.city;
- var _attr = _city.Attr;
- var _inputNode = _attr.inputNode;
- var _cityBox = U.selectEl("#U_MD_UI_city_cityBox")[0];
- var _hidden = "U_MD_UI_city_hidden";
- 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);
- }
- }
- _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;
- };
|