城市控件
实际效果1:点击显示表单
实际效果2:移入显示表单
使用方法:
1.引入文件
<script src="http://www.1473.cn/uform.js" type="text/javascript"></script>
2.js代码使用:
调用方法: U.MD.UI.city(element);
参数(element):需要使用城市控件的html元素
例: window.onload = function () {
U.UF.DL.asynLoadJs({ type: "text/javascript", src: "http://www.1473.cn/js/Controls/Basic/City.js" });
U.UF.DL.asynLoadCss({ "href": "http://www.1473.cn/css/Controls/Basic/City.css", type: "text/css", rel: "stylesheet" });
U.MD.UI.city(element); //element填要用的表单元素
}
3、完全异步写法如下：
/*异步加载城市控件*/
//首先加载css样式表
U.UF.DL.asynLoadCss({ "href": "http://www.1473.cn/css/Controls/Basic/City.css", type: "text/css", rel: "stylesheet" }, function () {
//加载样式表成功后加载js文件
U.UF.DL.asynLoadJs({ type: "text/javascript", src: "http://www.1473.cn/js/Controls/Basic/City.js" }, function () {
//获取地区元素
var _editArea = document.getElementById("editArea_area");
//给元素绑定事件
_editArea.onclick = function () {
//单击区域元素时加载区域信息
U.MD.UI.city(this);
}
});
});
4.代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
城市选择 <input type="text" readonly placeholder="请选择所在地区，例如：广东省-深圳市-龙岗区" class="city_control">
</body>
<script>
window.onload = function () {
U.UF.DL.asynLoadCss({ "href": "http://www.1473.cn/css/Controls/Basic/City.css", type: "text/css", rel: "stylesheet" });
U.UF.DL.asynLoadJs({ type: "text/javascript", src: "http://www.1473.cn/js/Controls/Basic/City.js" });
$("#city1")[0].onclick = function () {
U.MD.UI.city(this);
};
$("#city2")[0].onmouseover = function () {
U.MD.UI.city(this);
};
}
</script>
</html>
5、需要进一步封装，只调用js，js自己去加载css。