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 = ' \n' + '\n' + '\n' + ' \n' + ' \n' + ' \n' + '\n' + '\n' + ' \n' + '\n' + '\n' + ' \n' + '\n' + '\n' + ' '; //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; };