jquery实战---标签页效果
2015-06-18 08:18
681 查看
在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载哦`(*∩_∩*)′,点击即可下载!我们先来看一下最终的效果图。
![](http://img.blog.csdn.net/20150610154635140)
如我们上述图片展示的,这个页面当中包含两个部分,上下各有一个标签页,我们经常会在web应用当中,看到标签页效果,主要的作用是在可视区内有限的区域内,在某一个区域内展现一些内容给用户,上面一个标签页,我们称之为滑动门技术,鼠标移动懂某一个标签的时候,内容会跟着变动,好了,对于这个小例子的实现效果小编就先介绍到这里,接着,我们开始来编写我们的代码,首先,我们来看html的代码该如何编写nie,代码如下所示:
![](http://img.blog.csdn.net/20150610155258475)
可以发现,经过编写html代码后,我们的运行效果如上图所示,但是这个效果和我们最终需要实现的效果,相差了十万八千里,但是html的工作已经完成了,因为页面上只有这些内容,至于如何展现一个标签页的效果,是css的工作,接着,我们来编写css的代码,如下所示:
![](http://img.blog.csdn.net/20150610164320112)
至此,我们css代码的编写工作已经完成了,css保证了在没有js的情况下,标签页的效果依然可以展现给用户,接着,我们来编写js的代码, 相应的,在js中我们也要建立两个文件,一个jquery一个tab,鉴于jquery的代码较多,所以小编已经上传相关资源,有需要的小伙伴可以到该链接下载,接着,我们来编写tab的代码,来给整理页面添加行为能力,代码如下所示:
![](http://img.blog.csdn.net/20150612092606713)
至此,我们的第一个标签页的效果就已经编写完成了,接着,我们来编写第二个标签页的效果,在此,小编温馨提醒一下,第二个标签页的代码,小编是在第一个标签页效果的基础上添加的,好的,来看看我们第二个标签页的效果是如何实现的nie,首先,我们来看html的代码,如下所示:
![](http://img.blog.csdn.net/20150612093251551)
小编寄语:jquery实战,标签页效果的讲解,到这里就要和小伙伴们说再见了,相关源码,小编已经上传,有需要的小伙伴可以点击下载哦`(*∩_∩*)′,通过这个小例子的学习,我们知道z-index可以控制元素在页面中的层高,值越大就会在页面的层越靠前,也就会覆盖住一些z-index值较低的元素,只有position的值为relative或者是absolute的元素,z-index才会生效。jquery中的load方法十分强大,可以把一个指定的静态、动态页面或服务器端程序输出的数据装入到执行load方法的jquery对象包装的元素中。除此之外,我们还学习到bind可以用于给指定的节点绑定js的事件或jquery中定义的事件,对于jquery中没有直接提供注册方法的事件,可以用这种方式注册,方法的第二个参数可以是事件执行的方法定义。通过一个小例子的学习,我们收获了很多,也懂得了很多,但是所有的收获和懂得,都需要我们自己亲自去动手,去实践!
如我们上述图片展示的,这个页面当中包含两个部分,上下各有一个标签页,我们经常会在web应用当中,看到标签页效果,主要的作用是在可视区内有限的区域内,在某一个区域内展现一些内容给用户,上面一个标签页,我们称之为滑动门技术,鼠标移动懂某一个标签的时候,内容会跟着变动,好了,对于这个小例子的实现效果小编就先介绍到这里,接着,我们开始来编写我们的代码,首先,我们来看html的代码该如何编写nie,代码如下所示:
<!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"> <link type="text/css" rel="stylesheet" href="css/tab.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/tab.js"></script> </head> <body> <ul> <li>标签1</li> <li>标签2</li> <li>标签3</li> </ul> <div>我是内容1</div> <div>我是内容2</div> <div>我是内容3</div> </body> </html>我们来看一下运行的效果,会有怎样的惊喜等着我们?
可以发现,经过编写html代码后,我们的运行效果如上图所示,但是这个效果和我们最终需要实现的效果,相差了十万八千里,但是html的工作已经完成了,因为页面上只有这些内容,至于如何展现一个标签页的效果,是css的工作,接着,我们来编写css的代码,如下所示:
ul,li{ margin: 0; padding: 0; list-style: none; } li{ float:left; background-color:#868686; color:white; padding:5px; margin-right:2px; border:1px solid white; } li.tabin{ background-color:#6E6E6E; border:1px solid white; } div{ clear: left; background-color: #6E6E6E; color: white; width: 300px; height: 100px; padding: 10px; display: none; } div.contentin { display: block; }我们来分析一下上面的代码,我们发现一组标签用一个ul来管理,每一个标签是ul中的一个li,标签下面的内容就是用div来管理。编写了css之后的效果会是什么样子呢?我们来看一下运行效果:
至此,我们css代码的编写工作已经完成了,css保证了在没有js的情况下,标签页的效果依然可以展现给用户,接着,我们来编写js的代码, 相应的,在js中我们也要建立两个文件,一个jquery一个tab,鉴于jquery的代码较多,所以小编已经上传相关资源,有需要的小伙伴可以到该链接下载,接着,我们来编写tab的代码,来给整理页面添加行为能力,代码如下所示:
var timoutid; $(document).ready(function(){ //找到所有的标签 /* $("li").mouseover(function(){ //将原来显示的内容区域进行隐藏 $("div.contentin").hide(); //当前标签所对应的内容区域显示出来 }); */ $("#tabfirst li").each(function(index){ //每一个包装li的jquery对象都会执行function中的代码 //index是当前执行这个function代码的li对应在所有li组成的数组中的索引值 //有了index的值之后,就可以找到当前标签对应的内容区域 $(this).mouseover(function(){ var liNode = $(this); timoutid = setTimeout(function(){ //将原来显示的内容区域进行隐藏 $("div.contentin").removeClass("contentin"); //对有tabin的class定义的li清除tabin的class $("#tabfirst li.tabin").removeClass("tabin"); //当前标签所对应的内容区域显示出来 //$("div").eq(index).addClass("contentin"); $("div.contentfirst:eq(" + index + ")").addClass("contentin"); liNode.addClass("tabin"); },300); }).mouseout(function(){ clearTimeout(timoutid); }); });我们来看一下运行效果,如下图所示:
至此,我们的第一个标签页的效果就已经编写完成了,接着,我们来编写第二个标签页的效果,在此,小编温馨提醒一下,第二个标签页的代码,小编是在第一个标签页效果的基础上添加的,好的,来看看我们第二个标签页的效果是如何实现的nie,首先,我们来看html的代码,如下所示:
<!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"> <link type="text/css" rel="stylesheet" href="css/tab.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/tab.js"></script> </head> <body> <ul id="tabfirst"> <li class="tabin">科技</li> <li>经济</li> <li>体育</li> </ul> <div class="contentin contentfirst">科技新闻</div> <div class="contentfirst">经济新闻</div> <div class="contentfirst">体育新闻</div> <br /> <br /> <br /> <ul id="tabsecond"> <li class="tabin">装入完整页面</li> <li>装入部分页面</li> <li>从远程获取数据</li> </ul> <div id="contentsecond" display="block"> <img alt="装载中" src="images/img-loading.gif" /> <div id="realcontent"></div> </div> </body> </html>接着,我们来编写CSS的代码,如下所示:
ul,li { margin: 0; padding: 0; list-style: none; } #tabfirst li { float: left; background-color: #868686; color: white; padding: 5px; margin-right: 2px; border: 1px solid white; } #tabfirst li.tabin { background-color: #6E6E6E; border: 1px solid #6E6E6E; } div.contentfirst { clear: left; background-color: #6E6E6E; color: white; width: 300px; height: 100px; padding: 10px; display: none; } div.contentin { display: block; } #tabsecond li { float: left; background-color: white; color: blue; padding: 5px; margin-right: 2px; cursor: pointer; } #tabsecond li.tabin { background-color: #F2F6FB; border: 1px solid black; border-bottom: 0; z-index: 100; position: relative; } #contentsecond { width: 500px; height: 200px; padding: 10px; background-color: #F2F6FB; clear: left; border: 1px solid black; position: relative; top: -1px; } img { display: none; }最后,编写js的代码,具体代码如下所示;
var timoutid; $(document).ready(function(){ //找到所有的标签 /* $("li").mouseover(function(){ //将原来显示的内容区域进行隐藏 $("div.contentin").hide(); //当前标签所对应的内容区域显示出来 }); */ $("#tabfirst li").each(function(index){ //每一个包装li的jquery对象都会执行function中的代码 //index是当前执行这个function代码的li对应在所有li组成的数组中的索引值 //有了index的值之后,就可以找到当前标签对应的内容区域 $(this).mouseover(function(){ var liNode = $(this); timoutid = setTimeout(function(){ //将原来显示的内容区域进行隐藏 $("div.contentin").removeClass("contentin"); //对有tabin的class定义的li清除tabin的class $("#tabfirst li.tabin").removeClass("tabin"); //当前标签所对应的内容区域显示出来 //$("div").eq(index).addClass("contentin"); $("div.contentfirst:eq(" + index + ")").addClass("contentin"); liNode.addClass("tabin"); },300); }).mouseout(function(){ clearTimeout(timoutid); }); });最后,我们来看一下运行效果,如下图所示:
//在整个页面装入完成后,标签效果2的内容区域需要装入静态的html页面内容
$("#realcontent").load("allTab.html");
//找到标签2效果对应的三个标签,注册鼠标点击事件
$("#tabsecond li").each(function(index){
$(this).click(function(){
$("#tabsecond li.tabin").removeClass("tabin");
$(this).addClass("tabin");
if (index == 0) {
//装入静态完成页面
$("#realcontent").load("allTab.html");
} else if (index == 1) {
//装入动态部分页面
$("#realcontent").load("allTab.html h2");
} else if (index == 2) {
//装入远程数据(这里也是一个动态页面输出的数据)
$("#realcontent").load("allTab.html span")
}
});
});
//对于loading图片绑定ajax请求开始和交互结束的事件
$("#contentsecond img").bind("ajaxStart",function(){
//把div里面的内容清空
$("#realcontent").html("");
//整个页面中任意ajax交互开始前,function中的内容会被执行
$(this).show();
}).bind("ajaxStop",function(){
//整个页面中任意ajax交互结束后,function中的内容会被执行
$(this).slideUp("1000");
});
});
小编寄语:jquery实战,标签页效果的讲解,到这里就要和小伙伴们说再见了,相关源码,小编已经上传,有需要的小伙伴可以点击下载哦`(*∩_∩*)′,通过这个小例子的学习,我们知道z-index可以控制元素在页面中的层高,值越大就会在页面的层越靠前,也就会覆盖住一些z-index值较低的元素,只有position的值为relative或者是absolute的元素,z-index才会生效。jquery中的load方法十分强大,可以把一个指定的静态、动态页面或服务器端程序输出的数据装入到执行load方法的jquery对象包装的元素中。除此之外,我们还学习到bind可以用于给指定的节点绑定js的事件或jquery中定义的事件,对于jquery中没有直接提供注册方法的事件,可以用这种方式注册,方法的第二个参数可以是事件执行的方法定义。通过一个小例子的学习,我们收获了很多,也懂得了很多,但是所有的收获和懂得,都需要我们自己亲自去动手,去实践!
相关文章推荐
- jquery实战---标签页效果
- jquery动画
- 浅谈Jquery核心函数
- 初步认识JavaScript函数库jQuery
- jQuery中$.fn的用法示例介绍
- jQuery 如何获取何设置 redio标签的值
- jquery $(document).ready() 与window.onload的区别
- jquery mobile页面事件
- Jquery预处理函数方法理解
- jquery操作属性 attr()和 prop()兼容性问题
- jQuery EasyUI API 中文文档 - ComboBox组合框
- jQuery File Upload
- jquery使用jsonp跨域请求问题
- jQuery tips
- 三、jQuery中的DOM操作
- (jQuery||Zepto).extend 的一个小问题
- js/jQuery实现类似百度搜索功能
- img超出div width时, jQuery动态改变图片显示大小
- jQuery——AJAX(一)
- js学习笔记(二):JQuery中的On绑定事件的方法