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