- 浏览: 699973 次
- 性别:
- 来自: 南宁
文章分类
最新评论
-
如果我爱上你的笑容:
牛腩老师讲的课很棒 目前新闻发系统学习中 `(*∩_∩*)′
64位win8.1系统安装intelhaxm -
k04110411:
jhlovett 写道牛哥,想问下 public void P ...
ASP.NET通过HTML的上传文件标签来上传文件 -
liuzhijie3:
我也留个脚印用到了,讲的不错
.NET中获取字符串的MD5码 -
han_yankun2009:
,楠老师不错呀
在一堆数中查询相加得某个数的组合 -
allstara609:
请问牛老师,datalist中如何去掉数字中多余的0?
去掉数字中多余的0(ASP.NET)
很多天前就已经看完jQuery实战第四讲了,不过一直没有时间做笔记,呵呵,趁着今天有点空,上来记录记录...
这一讲的内容是制作tab菜单,所谓的tab菜单,也就是类似于OFFICE2007的界面菜单那样子的,当然,用在网页上面的话我们只是需要鼠标滑过就显示相应的内容而不必点击了,效果图如下:
在这节课里讲到了二个tab菜单的制作,第一个没有用到AJAX,每个菜单对应的内容都是事先已经在网页里的,只是把他们隐藏了而已,而第二个就用到了AJAX实时的提取内容数据.其实整个JS代码的编写也并不是很复杂,本人觉得难的主要在于CSS的编写上,如何才能让菜单与内容进行无缝结合...
以下是tab.aspx的源码:
以下是tab.css的源码:
以下是tab.js的源码:
在这里我们还使用了loading图片,让他绑定jQuery提供给我们的ajaxStart和ajaxStop事件.
为了能让我们的loading看到更好的效果,我在handler里用了线程,让他暂停3秒后再执行输出代码,以下是tab.ashx的源码:
另外还有一个静态页面用于测试第二个tab菜单的第一项和第二项-载入静态页面,以下是tab.htm的源码:
其实不只是静态页,即使是动态页如ASPX等,jQuery里的load方法也能载入,jQuery中的load方法其实也就是相当于一个简化了的AJAX提交而已...
以上就是这节课的内容,我会附上源码的,我是在vs2008下测试的!
以上代码兼容ie6,7,8,opera,ff,chrome
这一讲的内容是制作tab菜单,所谓的tab菜单,也就是类似于OFFICE2007的界面菜单那样子的,当然,用在网页上面的话我们只是需要鼠标滑过就显示相应的内容而不必点击了,效果图如下:
在这节课里讲到了二个tab菜单的制作,第一个没有用到AJAX,每个菜单对应的内容都是事先已经在网页里的,只是把他们隐藏了而已,而第二个就用到了AJAX实时的提取内容数据.其实整个JS代码的编写也并不是很复杂,本人觉得难的主要在于CSS的编写上,如何才能让菜单与内容进行无缝结合...
以下是tab.aspx的源码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>jQuery实战-tab菜单</title> <link href="css/tab.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/tab.js" type="text/javascript"></script> </head> <body> <div id="tab1"> <ul> <li class="tabin first">菜单一</li> <li>菜单二</li> <li>菜单三</li> </ul> <div class="contentin"> 菜单一的内容</div> <div> 菜单二的内容</div> <div> 菜单三的内容</div> </div> <br /> <br /> <br /> <div id="tab2"> <ul> <li class="tabin first">获取整个网页内容</li> <li>获取网页部分内容</li> <li>获取handler输入的内容</li> </ul> <div id="container"> <div id="loading"><img src="images/loading.gif" alt="loading" /> 数据提取中,请稍候...</div> <div id="content"></div> </div> </div> </body> </html>
以下是tab.css的源码:
body { font-size:14px; } ul, li { list-style:none; padding: 0; margin: 0; } #tab1 li { width: 50px; height: 25px; line-height: 25px; background-color: #8A4B04; float: left; margin-right: 2px; border: 2px solid #fff; text-align: center; cursor: pointer; /* 移上该元素上时鼠标为手形 */ } #tab1 div { width: 300px; height: 100px; background-color: #8A4B04; display: none; /* 默认不显示 */ padding: 10px; clear: left; } .first { /* 第一个tab菜单 */ margin-left:10px; } #tab1 .contentin { /* 当前菜单对应的DIV的样式 */ display: block; } #tab1 .tabin { /* 当前菜单的样式 */ border-bottom-color: #8A4B04; } #tab2 li { width: 150px; height: 25px; line-height: 25px; border: 1px solid #9EC9FE; float: left; text-align:center; margin-right: 10px; cursor: pointer; /* 移上该元素上时鼠标为手形 */ } #tab2 #container { width: 600px; height: 200px; border: 1px solid #9EC9FE; /* margin-top: -1px; 如果用这条样式的话那只是在IE里能出现缺口*/ padding: 20px; position: relative; top: -1px; clear: left; } #tab2 .tabin { border-bottom: 1px solid #fff; position:relative; /* 要让z-index产生效果,则必须把元素的position设置为relative或者absolute */ z-index: 100; }
以下是tab.js的源码:
var timeoutid; // 延迟处理时使用 $(function() { $("#tab1 li").each(function(index) { // index为当前菜单的索引,从0开始 var liNode = $(this); liNode.mouseover(function() { timeoutid = setTimeout(function() { // 延迟处理 $("#tab1 .contentin").removeClass("contentin"); // 原来含有contentin样式的DIV块去除contentin样式 $("#tab1 .tabin").removeClass("tabin"); // 原来含有tabin样式的菜单去除tabin样式 $("#tab1 div").eq(index).addClass("contentin"); // 显示相应的DIV块的内容 liNode.addClass("tabin"); // 给当前菜单加上tabin样式 }, 300); }); }).mouseout(function() { clearTimeout(timeoutid); }); //在整个页面装入完成后,标签效果2的内容区域需要装入静态的html页面内容 $("#tab2 #container #content").load("tab.htm"); $("#tab2 li").each(function(index) { $(this).mouseover(function() { var liNode = $(this); timeoutid = setTimeout(function() { $("#tab2 .tabin").removeClass("tabin"); // 原来含有tabin样式的菜单去除tabin样式 liNode.addClass("tabin"); // 给当前菜单加上tabin样式 switch (index) { case 0: $("#tab2 #container #content").load("tab.htm"); // 提取网页全部内容 break; case 1: $("#tab2 #container #content").load("tab.htm h2"); // 提取网页部分内容 break; case 2: // 提取handler的输出内容, 加个参数防止页面缓存 $("#tab2 #container #content").load("handler/tab.ashx?t=" + new Date().getTime()); break; } }, 300); }).mouseout(function() { clearTimeout(timeoutid); }); }); //对于loading图片绑定ajax请求开始和交互结束的事件 $("#tab2 #loading").bind("ajaxStart", function() { $("#tab2 #container #content").text(""); $(this).show(); }).bind("ajaxStop", function() { $(this).hide(); }); });
在这里我们还使用了loading图片,让他绑定jQuery提供给我们的ajaxStart和ajaxStop事件.
为了能让我们的loading看到更好的效果,我在handler里用了线程,让他暂停3秒后再执行输出代码,以下是tab.ashx的源码:
<%@ WebHandler Language="C#" Class="tab" %> using System; using System.Web; public class tab : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; System.Threading.Thread.Sleep(3000); // 暂停3秒后再执行以下代码 context.Response.Write("这是Handler输出的内容!"); } public bool IsReusable { get { return false; } } }
另外还有一个静态页面用于测试第二个tab菜单的第一项和第二项-载入静态页面,以下是tab.htm的源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>第4讲的测试网页</title> </head> <body> <h2>第4讲的测试网页</h2> <p>今晚打老虎!!!</p> </body> </html>
其实不只是静态页,即使是动态页如ASPX等,jQuery里的load方法也能载入,jQuery中的load方法其实也就是相当于一个简化了的AJAX提交而已...
以上就是这节课的内容,我会附上源码的,我是在vs2008下测试的!
以上代码兼容ie6,7,8,opera,ff,chrome
- jQueryTest.rar (22.2 KB)
- 下载次数: 123
评论
1 楼
asd300
2009-01-14
你好牛腩兄,jQuery实战第四讲的视频我没有看过,我只是看了你的代码,有一个问题我想问你一下那个tab1菜单:
tab1里面的三个div事先是隐藏起来的。请问:在不隐藏起来的情况下,3个div是按标准流排列,也就是3个div各占一行,纵向排成一列,,我不明的地方就是:鼠标滑过第二个菜单或第三个菜单时,下面对应的第二个(或第三个)div怎么跑上来,捏在第二个(或第三个)菜单的下面了?
tab1里面的三个div事先是隐藏起来的。请问:在不隐藏起来的情况下,3个div是按标准流排列,也就是3个div各占一行,纵向排成一列,,我不明的地方就是:鼠标滑过第二个菜单或第三个菜单时,下面对应的第二个(或第三个)div怎么跑上来,捏在第二个(或第三个)菜单的下面了?
发表评论
-
jquery制作select列表双向选择
2010-06-15 12:43 1849做项目的时候要用到的一个小功能,以前做过的,用的纯JS ... -
锋利的jQuery实例-图片滚动
2009-11-15 16:02 2744效果看图: 点击按钮后的动画思路倒很容易弄懂,主要就是开始的 ... -
jquery访中关村商城排行榜特效
2009-08-08 11:04 1711目前公司的网站上要用到的效果,其实也算不上什么特效,无非 ... -
框架frame自适应内容高度
2009-07-31 16:17 2976让框架frame自动适应内容的高度 在每个框架子页面中加入如下 ... -
jQuery插件—获取URL参数
2009-06-20 12:44 3975做的项目中需要用到通过JS获取GET参数,上网找了一下,找到如 ... -
中关村网站产品参数页的参数纠错的制作
2009-06-16 21:20 993今天突然想在正在做的网站中加上个像中关村一样的参数纠错的功能, ... -
鼠标移到某一元素则在元素旁边出现弹出框
2009-05-12 20:54 1854类似于当当网的发货以后的那个发货反馈,鼠标移上去后自动会 ... -
JQuery控制图片无缝滚动
2009-05-10 21:05 6398经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目 ... -
jquery xpath详解
2009-02-17 11:27 3141比如下面html代码 <ul> <li cl ... -
jQuery中使用插件解决ie6下selectfqg元素设置z-index无效的问题!
2009-02-11 11:05 3975没用插件时的效果如下,这是在IE6下预览的结果,层 ... -
jQuery控制元素间隔滚动!
2009-01-12 12:14 1854只记录了本人需要用到的,转载自http://www.yaosa ... -
jquery中筛选表格的特定行数后进行操作
2009-01-06 11:55 3027项目中有个地方,一个页面显示两种商品,显示商品参数的时 ... -
jQuery插件_jcarousel(用于图片滚动)
2008-12-26 14:17 7601效果图如下: 目前制作的项目中用到,先记下来,以备不时之需 ... -
制作多级滑动tab菜单
2008-11-26 11:47 4385效果演示网站:http://kr.shopping.yahoo ... -
jQuery实战(三)
2008-11-16 15:37 2036刚刚看完第三讲,是用jQuery制作下拉菜单,自己也试着做了一 ... -
只能输入数字的文本框(兼容ie6,7,8,opera,ff,chrome)
2008-11-16 10:36 5625星期天上班真不知道干什么事哦,只好随便看看之前下载的电子书了, ... -
jQuery实战(二)
2008-11-06 11:06 2982很久不上来写文章了,嘿嘿,最近在做一个简单的新闻发布系 ... -
制作符合WEB标准的QQ弹出消息(jQuery)
2008-10-29 11:49 4863这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这 ... -
jQuery实战(一)
2008-10-27 12:02 5098从ITCAST上看到出了个jQuery实战的视频(ht ... -
符合WEB标准的浮动层(jQuery版)!
2008-10-26 15:10 11283网上有好多的浮动层之类的代码,所谓的浮动层,就是层里的 ...
相关推荐
jquery-tab-menu滑动选项非常好,
jquery插件jquery-ui-1.8.2.custom.min.js
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
jquery-tab-image-text.zip
JavaScript和jQuery实战手册-麦克法兰..一本很好的js书籍
jquery-ui-1.9.2.custom.min.js
jquery-migrate-1.2.1.min.js 可以更好的帮助 jqury-jqprint 兼容性问题
JavaScript和jQuery实战手册-麦克法兰
jquery-1.11.0 + jquery-UI-1.10.4
下拉菜单jquery.editable-select-master,下拉菜单jquery.editable-select-master
jquery-ui-1.9.2.(免费),适合javascript开发者参考,包含各种美观的用户交互界面
jquery插件jquery-ui-timepicker-addon.j
jquery-ui-1.10.3.min.js
jquery-ui-1.8.16.custom.min.js jquery-ui-1.8.16.custom.min.js jquery-ui-1.8.16.custom.min.js jquery-ui-1.8.16.custom.min.js
jQuery-File-Upload上传插件
效果超cool 的导航 jQuery---标签式导航菜单.
jquery-1.4.2.js jquery-1.4.2.min.js jquery-1.4.2-vsdoc.js 中文版vsdoc jquery-1.4.2-vsdoc_en.js jquery.cookie.js