基于jQuery实现选择中国大学弹框代码



40 157 53



特效描述:基于jQuery实现 选择中国大学 弹框代码,基于jQuery实现选择中国大学弹框代码

代码结构

1. 引入JS

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/school.js" type="text/javascript"></script>

2. HTML代码

 <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';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 弹出层拖动 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 切换按钮 表单 表单美化 表单插件 表单美化插件 导航切换 菜单切换 提示框/弹出层 文本框 text文本框 筛选 筛选器

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到