JS+DIV切换城市-JavaSript-爱易网页

JS+DIV切换城市

日期：2014-05-16　浏览次数：20357 次

JS+DIV切换城市。
city.html

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="city.js" charset="utf-8"></script>
<link href=city.css" rel="stylesheet" type="text/css" />
<script>
var isFull = 0;
</script>
</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<table width="100%">
	<tr>
		<td width="100%" align="center"><a href="javascript:dsy.open()">[切换城市]</a></td>
	</tr>
</table>
<div id="cityList">
<ul class="head">
	<li class="title">&nbsp;&nbsp;选择城市</li>
	<li class="exit"><a href="javascript:dsy.close()">关闭</a>&nbsp;&nbsp;</li>
</ul>
<div id="content">
</div>
</div>
</body>
</html>

city.css

body,td,th,li,a {
	font-size: 12px;
	font-family: 宋体;
}

ul {
	margin: 0px;
	padding: 0px;
}

li {
	list-style: none;
}

#cityList {
	width: 320px;
	height: 320px;
	position: absolute;
	left: 1px;
	top: 1px;
	background-color: white;
	display: none;
	border: 1px solid #999999;
}

#cityList .head {
	background-color: #b0d3fb;
	height: 25px;
}

.head .title {
	width: 160px;
	float: left;
	text-align: left;
	height: 25px;
	line-height: 25px;
	color: #333333;
	font-weight: bold;
}

.head .exit {
	width: 160px;
	float: left;
	text-align: right;
	height: 25px;
	line-height: 25px;
}

.exit a {
	color: #333333;
	font-weight: bold;
	text-decoration: none;
}

#cityList #content {
	width: 100%;
	height: 295px;
	overflow-x: hidden;
	overflow-y: auto;
}

#content .line {
	width: 100%;
	height: auto;
	overflow: inherit;
	border-bottom: 1px dashed #e0e2e4;
	padding-top: 10px;
	padding-bottom: 10px;
}

.line .pro {
	width: 60px;
	text-align: center;
	font-weight: bold;
	float: left;
	line-height: 22px;
}

.line .city {
	width: 237px;
	padding-right: 3px;
	height: auto;
	float: right;
	letter-spacing: 1px;
	line-height: 20px;
}

.city a {
	font-size: 12px;
	color: #0000ff;
}

city.js

/**
 * 切换城市js
 * 
 * @author HeCheng
 * @time 2011-03-10 16:46:06
 * @return
 */
// 取对象方法
function $$(id) {
	return document.getElementById(id);
}

// 初始化对象
function Citys() {
	this.provinces = new Array("直辖市", "安徽", "福建", "甘肃", "广东", "广西", "贵州", "海南",
			"河北", "河南", "黑龙江", "湖北", "湖南", "吉林", "江苏", "江西", "辽宁", "内蒙古", "宁夏",
			"青海", "山东", "山西", "陕西", "四川", "西藏", "新疆", "云南", "浙江");
	this.citys = {};
}
// 添加城市到对象
Citys.prototype.add = function(id, iArray) {
	this.citys[id] = iArray;
}
// 点击城市时事件
Citys.prototype.select = function(i, j) {
	// 取城市的省名
	var pro = dsy.provinces[i];
	// 取城市名
	var city = dsy.citys[pro][j];
	alert("当前选择省："+pro+"，市："+city);
}
// 打开层，填满数据
Citys.prototype.open = function() {
	// 首先判断是否有数据，没有则填充
	if (isFull == 0) {
		putData();
	}
	$$("cityList").style.display = "block";
	var html = "";
	var pro = "";
	var city = "";
	var ps = dsy.provinces;
	var cs = dsy.citys;
	for ( var i = 0; i < ps.length; i++) {
		// 取出省名
		pro = ps[i];
		html += "<ul class='line'><li class='pro'>";
		html += pro;
		html += "</li><li class='city'>";
		// 取出该省的所有市
		for ( var j = 0; j < cs[pro].length; j++) {
			// 将数据组合成UL
			city = cs[pro][j];
			html += "<a href='#' onclick='dsy.select(" + i + "," + j + ")'>"
					+ city + "</a>&nbsp;&nbsp;";
		}
		html += "</li></ul>";
	}
	$$("content").innerHTML = html;
}
// 关闭层
Citys.prototype.close = function() {
	$$("cityList").style.display = "none";

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JS+DIV切换城市

相关资料更多>

推荐阅读更多>