首页 > 代码库 > 小谷实战Jquery(四)--标签页效果

小谷实战Jquery(四)--标签页效果

2024-07-14 22:09:20   222人阅读

        这两天完成了实战四五六的例子,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗口效果,都是web层常用的效果.越到后面越发觉得技术这东西,就是一种思路的展现,懂了要实现效果的来龙去脉,代码就是表达的一种工具,后台展示的是逻辑,前台展现的是图形.

        说一下这个标签页吧,第一个标签由两部分组成,鼠标移到上面标签上,下面对应显示相应的内容.借助CSS实现标签和内容相融合的效果.这次我们先看最终效果.


HTML:

<span style="font-size:18px;"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link type="text/css" rel="stylesheet" href=http://www.mamicode.com/"tab.css"/>>
CSS:
<span style="font-size:18px;">ul,li{
	margin:0;
	padding:0;
	list-style:none;
	
}
#tabfirst li{
	float:left;
	background-color:#000066;
	color:white;
	margin-right:3px;
	padding:5px;
	border:1px solid white;
}
#tabfirst li.tabin{
	background-color:#000066;
	border:1px solid #000066;
	
}
div.contentfirst{
	clear:left;
	background-color:#000066;
	color:white;
	padding:10px;
	width:300px;
	height:100px;
	display:none;
}
div.contentin{
	display:block;
}</span>

        值得一提的是,很多时候我们的鼠标滑过,并不是要改变当前的内容,而是不小心或者不注意碰到了鼠标,如何解决这一bug呢,jQuery的强大再次上演.不错,我们使用了setTimeout函数,执行时,在载入后延迟指定时间再去执行表达式,这样就可以避免每次滑动都改变内容的漏洞.
JS代码:
<span style="font-size:18px;">var timeoutId;
$(document).ready(function(){
		$("li").each(function(index){
			//每一个包装li的jQuery对象都会执行function中的代码
			//index是当前执行这个function的li对应在所有li组成的数组中的索引值
			
			$(this).mouseover(function(){
				var liNode=$(this);
				timeoutId=setTimeout(function(){
					//将原来显示的内容区域进行隐藏
					 $("div.contentin").removeClass("contentin");
					//清除有tabin的li标签的tabin的class
					 $("li.tabin").removeClass("tabin");
					 //当前标签所对应的内容区域显示出来
					 $("div").eq(index).addClass("contentin");
					 $(liNode).addClass("tabin");
				},300);
				
			}).mouseout(function(){
				clearTimeout(timeoutId);	
			});
		
	    });
});</span>

        第二个标签有所不同,是在单击之后,内容区载入相应的页面,载入过程中与服务器交互需要等待时间,所以实现了"装载中"的友好提示效果.而且,内容区不同于上面的三个div,而是采用了一个div块,通过载入不同内容即可.

HTML:
<span style="font-size:18px;"><ul id="tabsecond">
		<li class="tabin">装入完整页面</li>
		<li>装入部分页面</li>
		<li>从远程获取数据</li>
	</ul>
	<div id="contentsecond">
		<img alt="装载中" src=http://www.mamicode.com/"images/img-loading.gif" />>
CSS:
<span style="font-size:18px;">#tabsecond li{
	float:left;
	color:blue;
	background-color:white;
	margin-right:2px;
	padding:5px;
	cursor:pointer;
	}
#tabsecond li.tabin{
	background-color:#F2F6FB;
	border:1px solid black;
	border-bottom:0;
	z-index:10;
	position:relative;/*使用z-index前提,position为relative或absolute*/
}
#contentsecond{
	width:350px;
	height:150px;
	padding:10px;
	background-color:#f2f6fb;
	clear:left;
	border:1px solid black;
	position:relative;
	top:-1px;
}
img{
	display:none;
}</span>

JS:
<span style="font-size:18px;">//在整个页面装入完成后,标签效果2的内容区域需要装入静态的html页面内容
		$("#contentsecond").load("tabLoad.html");
		//找到标签2效果对应的三个标签,注册鼠标点击事件
		$("#tabsecond li").each(function(index){
			$(this).click(function(){
				$("#tabsecond li.tabin").removeClass("tabin");
				$(this).addClass("tabin");
				if (index==0){
					//装入静态完整页面
					$("#contentsecond").load("tabLoad.html");
				}else if (index==1){
					//装入动态部分页面
					$("#contentsecond").load("tabLoad.jsp");
				}else if(index==2){
					//装入远程数据(这里也是一个动态页面输出的数据)
					$("#contentsecond").load("tabData.jsp");
				}
			});
		});
		//对于loading图片绑定Ajax请求开始和交互结束的事件
		$("#contentsecond img").bind("ajaxStart",function(){
			//把div里面的内容情况
			$("#realcontent").html("");
			//整个页面中任意Ajax交互开始前,function中的内容会被执行
			$(this).show();
		}).bind("ajaxStop",function(){
			//整个页面中任意Ajax交互结束后,function内容会被执行
			$(this).hide();
		});</span>

jQuery的使用在后续项目中加强吧,如今再看到网页上各种各样的弹窗,广告之类的特效都不觉神奇了,其实很多东西你开始知道了就很快掌握了,慢慢积累自己的代码库,见的越多,写的越多,技术也就越高超! jQuery就写到这里,ajax也该实现了.


联系
我们