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

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

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemh1YW56aGUxMTc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

HTML:

<span style="font-size:18px;"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link type="text/css" rel="stylesheet" href="tab.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tab.js"></script>

<title>标签页效果</title>
</head>
<body>
	<ul id="tabfirst">
		<li class="tabin">标签1</li>
		<li>标签2</li>
		<li>标签3</li>
	</ul>
	<div class="contentin contentfirst">我是内容1</div>
	<div class="contentfirst">我是内容2</div>
	<div class="contentfirst">我是内容3</div>
</body>	</span>

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>

? ? ? ? 第二个标签有所不同,是在单击之后,内容区加载相应的页面,加载过程中与server交互须要等待时间,所以实现了"装载中"的友好提示效果.并且,内容区不同于上面的三个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="images/img-loading.gif" />
		<div id="realcontent"></div>
	</div></span>

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也该实现了.

原文地址:https://www.cnblogs.com/llguanli/p/8413129.html

时间: 2024-10-09 23:29:05

实战Jquery(四)--标签页效果的相关文章

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

这两天完成了实战四五六的例子,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗口效果,都是web层常用的效果.越到后面越发觉得技术这东西,就是一种思路的展现,懂了要实现效果的来龙去脉,代码就是表达的一种工具,后台展示的是逻辑,前台展现的是图形. 说一下这个标签页吧,第一个标签由两部分组成,鼠标移到上面标签上,下面对应显示相应的内容.借助CSS实现标签和内容相融合的效果.这次我们先看最终效果. HTML: <span style="font-size:18px;">

jquery实战---标签页效果

在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载哦`(*∩_∩*)′,点击即可下载!我们先来看一下最终的效果图. 如我们上述图片展示的,这个页面当中包含两个部分,上下各有一个标签页,我们经常会在web应用当中,看到标签页效果,主要的作用是在可视区内有限的区域内,在某一个区域内展现一些内容给用户,上面一个标签页,我们称之为滑动门技术,鼠标移动懂某一

jQuery实战4:标签页效果

今天我们来完成<jQuery实战>系列的标签页效果.先来看一看效果图 这里有两部分的内容,上面是一个标签页的效果,下面也是一个标签页的效果.在实际应用中也经常会见到标签页的效果,它的作用主要是在页面可视区有限的情况下展示更多的内容.当用户想看其他内容的时候不需要离开页面,只需要把鼠标移动到某一个标签上就可以看到这个标签里面所对应的内容.门户网站的首页,有很多频道都是标签页的最佳案例,如体育.财经.军事等模块都是位于不同的标签上.上边的标签页一般称为滑动门技术,下面的内容是一次性加载进来,鼠标移

android开发步步为营之53:viewpager+fragment构造可左右滑动标签页效果

可滑动的标签页是很多应用的用来做外面框架的,比如微信,微博等等,我这里实现的效果是下面是主标签页,然后中间一个的标签页里面又可以继续左右滑动,等于是标签页内部再嵌套标签页,用到的组件主要有:用于滑动效果的viewpager,以及用于实现每个tab页功能的fragment,先看看效果图:  第一步:设计页面activity_learn_fragment.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/

Jquery 组 标签页

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title></title> <style> .clearfix:after{ content: ""; display: block; clear: both; } ul{ list-style: none; } ul li{ flo

js实现多标签页效果

点击导航按钮切换div的内容 html代码: <div class="tabs"> <ul id="tab"> <li><a href="#" data-id="#content1" data-toggle="tab">10元套餐</a></li> <li><a href="#" data-id=&

web前端中实现多标签页切换的效果

在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,html和css代码如下: <ul id="tab">    <li id="tab1" onclick="show(1)">10元套餐</li>    <li id="tab2" oncli

标签页(tab)切换的原生js,jquery和bootstrap实现

概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(tab)切换的jquery实现 标签页(tab)切换的bootstrap实现 标签页(tab)切换的原生js实现 说明: 代码是我自己写的,与课程中的不一样. 主要利用display:none来把部分内容隐藏而显示其它内容. 遇到了事件的循环绑定,我是利用添加id使其成为钩子来解决的. 代码: <!DO

15个最佳jQuery的翻页书效果的例子

在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlock: jQuery内容翻转插件 BookBlock是可以将任何内容,如图像或文本创建小册子的组件,允许一个“翻页”的导航. 在线演示 2. imBookFlip : jQuery Page Turning Plugin without Flash imBookFlip可以将iframe加载书本成本