<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery选择中国大学的弹框 - 网页模板</title>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/school.js" type="text/javascript"></script>
</head>
<body>
<br> <br> <br>
<center>选择大学:<input type="text" name="school" id="school-name" value="请选择大学" onclick="pop()"></center>
<div id="choose-box-wrapper">
<div id="choose-box">
<div id="choose-box-title">
<span>选择学校</span>
</div>
<div id="choose-a-province">
</div>
<div id="choose-a-school">
</div>
<div id="choose-box-bottom">
<input type="botton" onclick="hide()" value="关闭" />
</div>
</div>
</div>
<script type="text/javascript">
//弹出窗口
function pop(){
//将窗口居中
makeCenter();
//初始化省份列表
initProvince();
//默认情况下, 给第一个省份添加choosen样式
$('[province-id="1"]').addClass('choosen');
//初始化大学列表
initSchool(1);
}
//隐藏窗口
function hide()
{
$('#choose-box-wrapper').css("display","none");
}
function initProvince()
{
//原先的省份列表清空
$('#choose-a-province').html('');
for(i=0;i<schoolList.length;i++)
{
$('#choose-a-province').append('<a class="province-item" province-id="'+schoolList[i].id+'">'+schoolList[i].name+'</a>');
}
//添加省份列表项的click事件
$('.province-item').bind('click', function(){
var item=$(this);
var province = item.attr('province-id');
var choosenItem = item.parent().find('.choosen');
if(choosenItem)
$(choosenItem).removeClass('choosen');
item.addClass('choosen');
//更新大学列表
initSchool(province);
}
);
}
function initSchool(provinceID)
{
//原先的学校列表清空
$('#choose-a-school').html('');
var schools = schoolList[provinceID-1].school;
for(i=0;i<schools.length;i++)
{
$('#choose-a-school').append('<a class="school-item" school-id="'+schools[i].id+'">'+schools[i].name+'</a>');
}
//添加大学列表项的click事件
$('.school-item').bind('click', function(){
var item=$(this);
var school = item.attr('school-id');
//更新选择大学文本框中的值
$('#school-name').val(item.text());
//关闭弹窗
hide();
}
);
}
function makeCenter()
{
$('#choose-box-wrapper').css("display","block");
$('#choose-box-wrapper').css("position","absolute");
$('#choose-box-wrapper').css("top", Math.max(0, (($(window).height() - $('#choose-box-wrapper').outerHeight()) / 2) + $(window).scrollTop()) + "px");
$('#choose-box-wrapper').css("left", Math.max(0, (($(window).width() - $('#choose-box-wrapper').outerWidth()) / 2) + $(window).scrollLeft()) + "px");
}
</script>
<style type="text/css">
#choose-box-wrapper{
width: 652px;
background-color:#000;
filter:alpha(opacity=50);
background-color: rgba(0, 0, 0, 0.5);
padding:10px;
border-radius:5px;
display:none;
}
#choose-box{
border: 1px solid #005EAC;
width:650px;
background-color:white;
}
#choose-box-title{
background:#3777BC;
color: white;
padding: 4px 10px 5px;
font-size: 14px;
font-weight: 700;
margin: 0;
}
#choose-box-title span{
font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;
}
#choose-a-province, #choose-a-school{
margin:5px 8px 10px 8px;
border: 1px solid #C3C3C3;
}
#choose-a-province a{
display:inline-block;
height: 18px;
line-height: 18px;
color:#005EAC;
text-decoration: none;
font-size: 9pt;
font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;
margin:2px 5px;
padding: 1px;
text-align: center;
}
#choose-a-province a:hover{
text-decoration:underline;
cursor:pointer;
}
#choose-a-province .choosen{
background-color: #005EAC;
color:white;
}
#choose-a-school{
overflow-x: hidden;
overflow-y: auto;
height: 200px;
}
#choose-a-school a{
height: 18px;
line-height: 18px;
color:#005EAC;
text-decoration: none;
font-size: 9pt;
font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;
float: left;
width: 160px;
margin: 4px 12px;
padding-left:10px;
background:url(img/2012072500060712.gif) no-repeat 0 9px;
}
#choose-a-school a:hover{
background-color:#005EAC;
color:white;
cursor:pointer;
}
#choose-box-bottom{
background: #F0F5F8;
padding: 8px;
text-align: right;
border-top: 1px solid #CCC;
height:40px;
}
#choose-box-bottom input{
vertical-align: middle;
text-align: center;
background-color:#005EAC;
color:white;
border-top: 1px solid #B8D4E8;
border-left: 1px solid #B8D4E8;
border-right: 1px solid #114680;
border-bottom: 1px solid #114680;
cursor: pointer;
width: 60px;
height: 25px;
margin-top: 6px;
margin-right: 6px;
}
</style>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery选择中国大学的弹框.zip
版权申诉
27 浏览量
2022-11-22
17:15:41
上传
评论
收藏 149KB ZIP 举报
jQuery选择中国大学的弹框.zip （5个子文件） 
jQuery选择中国大学的弹框 
jQuery选择中国大学的弹框.jpg 101KB jiaoben2086 img 
2012072500060712.gif 45B
index.html 5KB js 
jquery.js 92KB school.js 317KB资源评论
