这两天完毕了实战四五六的样例,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗体效果,都是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. Comparator 与 Comparable

    转载自 http://www.cnblogs.com/sunflower627/p/3158042.html 1. Comparator 和 Comparable 相同的地方 他们都是java的一个接 ...

  2. tinymce原装插件源码分析(五)-searchreplace

    searchreplace 功能:查找和替换 代码注释见: https://www.xunhanliu.top/static/js/tinymce/plugins/searchreplace/plug ...

  3. luogu P1622 释放囚犯

    题目描述 Caima王国中有一个奇怪的监狱,这个监狱一共有P个牢房,这些牢房一字排开,第i个紧挨着第i+1个(最后一个除外).现在正好牢房是满的. 上级下发了一个释放名单,要求每天释放名单上的一个人. ...

  4. 如何在ssh远程linux服务器时不需要输入密码

    目的: 期望A服务器在对B服务器执行ssh或者scp等命令的时候不需要输入密码 实现方法: 1.通过安装sshpass服务 2.通过密钥验证的方式 操作过程: 一.通过sshpass的方式达到密码非交 ...

  5. 1113: [视频]树形动态规划(TreeDP)8:树(tree)(树形dp状态设计总结)

    根据最近做的几道树形dp题总结一下规律.(从这篇往前到洛谷 P1352 ) 这几道题都是在一颗树上,然后要让整棵树的节点或边 满足一种状态.然后点可以影响到相邻点的这种状态 然后求最小次数 那么要从两 ...

  6. 2016 10 27 考试 dp 向量 乱搞

    目录 20161027考试 T1: T2: T3: 20161027考试 考试时间 7:50 AM to 11:15 AM 题目 考试包 据说这是一套比较正常的考卷,,,嗯,,或许吧, 而且,,整个小 ...

  7. WebView Js注入

    注入前: 注入后: 主界面: package com.example.webviewjsdemo; import android.os.Bundle; import android.app.Activ ...

  8. django 笔记8 url模板 自定义函数 simple_tag

    感谢alex老师~ 知识点: URL - 两个没见 url>路由系统> 函数或类 > 返回字符串 Form表单提交: 提交 >url>函数或类中的方法 -.. HttpR ...

  9. [SDOI2010] 古代猪文 (快速幂+中国剩余定理+欧拉定理+卢卡斯定理) 解题报告

    题目链接:https://www.luogu.org/problemnew/show/P2480 题目背景 “在那山的那边海的那边有一群小肥猪.他们活泼又聪明,他们调皮又灵敏.他们自由自在生活在那绿色 ...

  10. 19.允许重复的unordered_map

    #include <string> #include <iostream> //查询性能最高 //允许重复的,hash_map #include <unordered_m ...