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

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

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

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="data: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也该实现了.

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

  1. jquery实战---标签页效果

    在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...

  2. DevExpress navBarControl 和 xtraTabbedMdiManager实现浏览器标签页效果

    一:navBarControl 属性设置 工具箱中的Navigation & Layout选项卡下找到NavBarControl,拖到窗体中 工具箱中添加2个imageCollection.分 ...

  3. [置顶] JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

  4. JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

  5. Angular实现多标签页效果(路由重用)

    1.需求 做了几年的MES系统,从ASP.NET WebForm至MVC,系统决定了用户界面必须为标签页方式实现,因为用户在进行一项操作的时候很有可能会进行其它的操作,比如查询之类的.如果按MVC的方 ...

  6. JS实现标签页效果(配合css)不同标签下对应不同div

    显示页面tab.jsp </ div ></ body > </ html >   tab.css ul ,li { margin:0px; padding:0px ...

  7. Jquery 实现标签切换效果

    1.效果图 2.HTML代码如下 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> & ...

  8. JQuery简单标签页实现

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  9. 类似Jquery ui 标签页(Tabs)

    <div class="indexnew_tit"> <a href="javascript:;" class="on"& ...

随机推荐

  1. luogu P1405 苦恼的小明（欧拉定理）

    题意 求a1^a2^a3^...^an(mod10007)n<=1000000,a[i]<=10000 题解 明眼人一眼就可以看出是欧拉定理的推论. 首先这个题是错的,没说保证互质. 然而 ...

  2. sort排序到底怎么排序

    sort()方法 sort() 方法在适当的位置对数组的元素进行排序,并返回数组. <!DOCTYPE html> <html> <head> <meta c ...

  3. js img图片加载失败，重新加载+断网检查

    我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...

  4. Android五天乐（第三天）ListFragment与ViewPager

    1ListFragment 今天首先学习了一种很经常使用的展示场景:列表展示. 昨天学习了使用Fragmet来取代activity进行设计.今天在托管单个fragment的基础上,掌握托管一个布局li ...

  5. Material Design学习之 Button（具体分析，传说中的水滴动画）

    转载请注明出处:王亟亟的大牛之路 上一篇大致介绍了Material Design的一些基本概念传送门:http://blog.csdn.net/ddwhan0123/article/details/5 ...

  6. APP-午饭去哪吃

    走到这个快节奏的城市中.部门聚餐.朋友吃饭这些都是日常生活中时有发生的事情,往往吃的东西都是千篇一律,图的也仅仅剩下的是环境了.那么.非常纠结常常去的地方,怎么办呢?来吧.我们随机摇一个吧! wate ...

  7. 在EA中将画出的ER图转换成SQL脚本

    在进行数据库设计的时候,想着正好安装着EA软件呢,看能不能用EA画ER模型.结果发现不仅能画.并且还能进行整套数据库设计(生成SQL脚本). 以下以机房收费系统用户--学生为例.学生能够查看剩余金额. ...

  8. 【每日一记】unity3d 图片置灰shader

    项目须要.參考了一下网上的资料,写了一个shader,给button置灰. shader详细实现例如以下: 2016.07.25补充,支持mask剪裁 Shader "Transparent ...

  9. 1.MySQL与MongoDB的操作对比，以及区别

    转自:https://www.cnblogs.com/chris-oil/p/4982490.html MySQL与MongoDB都是开源的常用数据库,但是MySQL是传统的关系型数据库,MongoD ...

  10. WEB前端开发工程师成长计划

    今天看到一篇文章,感觉很不错,于是转了过来,同时也给自己规划一个方向. [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提 ...