手动实现jQuery Tools里面tab功能
平时开发中用的Javascript类库都是jQuery，用到插件或者第三方类库能从jQuery Tools里面找到，基本不用其他的。当然有时同事喜欢使用jQuery UI里面的插件。并且jQuery Tools里面的插件和jQuery UI里面的插件还会出现冲突。这个事情就不舒服了。不过基本开发之前就确定好用哪个类库，免得后期开发中因为冲突的增加，增加项目的开发周期和开发成本。当然如果你掌握好jQuery Tools里面的插件，有些功能和效果很快就开发好了。之前一个项目，就只使用了jQuery Tools里面的tab插件和scrollable功能就完成了。线上地址：http://whirlpoolkitchen.msn.com/ 。
说明：公司一个项目使用的ASP.NET MVC 1.0，jQuery版本是visual studio创建项目时自带的版本。1.4.2。然后项目中使用到一个拖拽功能，以前开发的同事估计也只找到了基于jQuery 1.4.2的第三方类库，我没有具体去分析这个拖拽插件。现在项目要进行改版升级，增加了一个tab功能，我平时用jQuery Tools用的多，首先想到是用jQuery Tools里面的tab插件。但是jQuery Tools版本升级到v1.2.7时把默认的要求的jQuery的版本也提高了。要基于jQuery 1.7.2。大家可以去它的下载地址看一下：http://jquerytools.org/download/ 。先说明一下，我之前也没有解决过一个项目中用到不同版本的jQuery问题，然后我就在网上搜索解决方法。但是基本上是把老版本放在一个变量中，然后使用$.noConflict(true)方法。但是特殊的是jQuery Tools貌似用不了这个方法把高版本的jQuery传入到类库中。
其实前端开发中tab功能很简单，当然自己写成jQuery Tools中tab一样强大，还是需要不少代码和分析的。我这里写出一个最简单，也是最粗糙的版本。jQuery Tools中tab功能演示地址：http://jquerytools.org/demos/tabs/index.html。截图如下：
点击不同tab，高亮当前的tab背景，然后下面显示相对应的内容。样式和布局尽可能利用jQuery Toolst提供的，代码如下所示，这里主要说一下this的使用和jQuery中index()和eq()函数的使用。
<html>
<head>
<title>手动实现tab功能</title>
<style type="text/css">
body {
font-family: 微软雅黑;
font-size: 14px;
} .tabs {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid #666;
height: 30px;
width:659px;
} ul.tabs li {
float: left;
text-indent: 0;
padding: 0;
margin: 0;
list-style-image: none;
} .panes div {
display: none;
padding: 15px 10px;
border: 1px solid #999;
border-top: 0;
height: 100px;
font-size: 14px;
background-color: #fff;
} .tabs a {
background: url(http://jquerytools.org/media/img/tabs/blue.png) no-repeat -420px 0;
font-size: 11px;
display: block;
height: 30px;
line-height: 30px;
width: 134px;
text-align: center;
text-decoration: none;
color: #333;
padding: 0px;
margin: 0px;
position: relative;
top: 1px;
} ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
background-position: -420px -62px;
cursor: default !important;
color: #000;
}
ul.tabs a:hover {
background-position: -420px -31px;
color:#fff;
}
.panes {
width: 659px;
height: 131px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//tab切换
$(".tabs a").click(function () {
$(".tabs li a").removeClass("current");
$(this).addClass("current");
//获取点击a标签父级元素在当前li中index值
var currenttab = $(this).parent().index(); $(".panes .panesitem").css({ "display": "none" });
$(".panes .panesitem").eq(currenttab).css({ "display": "block" });
});
}); </script>
</head>
<body>
<!-- the tabs -->
<ul class="tabs">
<li><a href="#" class="current">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul> <!-- tab "panes" -->
<div class="panes">
<div class="panesitem" style="display: block;">First tab content. Tab1</div>
<div class="panesitem">Second tab content.Tab2</div>
<div class="panesitem">Third tab content.Tab3</div>
</div>
</body>
</html>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
代码相对比较简单。在开发过程有2个问题，第一需要知道当前点击了那个tab，也就是最上面的a标签。第二个如何去指定的内容div显示。$(this)就是表明当前点击的哪个元素，所以此时就是当前点击的哪个a标签。$(this).parent()就是当前点击a标签的父级元素。通过Chrome查看如下图所示：
$(this).parent().index()，这段代码可能有点难理解。我们看一下jQuery中index()函数的用法。在线地址：http://www.w3school.com.cn/tiy/t.asp?f=jquery_dom_element_methods_index 获得第一个匹配元素相对于同胞元素的index位置，从0开始计数。在这里就反映为当前点击a的父级li元素在三个li的中的位置。我截图是因为我点击的第二个tab，所以此时的$(this).parent().index()的值为1。然后
$(".panes .panesitem").eq(currenttab).css({ "display": "block" });
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
eq()选择器介绍：http://www.w3school.com.cn/jquery/selector_eq.asp
$(".panes .panesitem").eq(currenttab)此时currenttab为1，所以代码相当于$(".panes .panesitem").eq(1)，其实$(".panes .panesitem")返回的是一个元素集合，eq(1)表明从0开始计算，为1的元素被选中。这也正是我要达到的效果。点击上面的tab，显示下面对应的tab content。
参考网址：
解决项目中多个版本jQuery冲突问题：http://www.cnblogs.com/liyunqi007/archive/2011/10/22/2221178.html
jQuery Tools项目首页：http://jquerytools.org/demos/tabs/index.html
手动实现jQuery Tools里面tab功能的更多相关文章
- jquery 回车切换 tab功能
挺有趣的,Jquery 回车切换tab功能的实现哦 <html> <head><!--jquery库.js--></head> <body> ...
- jQuery+css实现tab功能
点击我我会消失 Click me 点击按钮我会消失,再点击我会出现 演示tab tab1 tab2 tab3 [环球时报记者 郭芳] “中国秘密发射新快速响应火箭”,25日,在中国官方媒体报道我国“快 ...
- jQuery Tools：Web开发必备的 jQuery UI 库
基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡).Tooltip(信息提示).Overlay(遮罩.弹窗).Scrollable(滚动控制 ...
- 自己在项目中写的一个Jquery插件和Jquery tab 功能
后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")] public class PDFSearch ...
- easyui实现树形菜单Tab功能、layout布局
一:常见三种前端ui框架 在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面 ...
- 虚拟机复制问题：如何解决“无法手动启动VMware Tools安装”问题
摘录网址:https://jingyan.baidu.com/article/3c48dd348c4504e10ae35810.html 环境描述: VMware Workstation Ubuntu ...
- 如何在myeclipse中实现jquery的自动提示功能
在web开发过程中,myeclipse中jsp可以实现自动提示功能,但是jquery代码却无法实现自动提示,需要自己一个个手动去输入,效率过低,怎么办? 工具/原料 jquery 1.8.3.js ...
- 用jquery编写的tab插件
用jquery编写的tab插件 源码 $.fn.ss_tab = function (options) { var box = $(this); var btns = $(this).find(&qu ...
- Android UI ActionBar功能-自定义Tab功能
还可以使用ActionBar实现Tab选项卡功能: 官方帮助文档:http://wear.techbrood.com/training/basics/actionbar/styling.html#Cu ...
随机推荐
- JavaFX 教程资料收集
1. JavaFX中文资料 http://www.javafxchina.net/blog/docs/tutorial1/ 2. JavaFX入门教程 http://www.xrpmoon.com/c ...
- How to make your assembly more secure from referencing by unauthorized bits
Now the security has a trend to become more and more important in our daily work, hence I did some r ...
- WeX5学习笔记
目录 WeX5学习笔记... 1 1.轻松看透WeX5产品能力和技术... 1 2.WeX5可以怎么玩?... 3 一.纯本地App. 3 二.关联一个网站,希望默认就打开某页... 4 三.UI设计 ...
- SEO网站内链匹配工具
最近在弄一个网站,想体验一下SEO方面的工作. 虽然自己是从事.NET方面工作的,但时间有限,所以用了DEDECMS作为网站的程序. 而SEO里面最重要的一项就是内链.但DEDECMS没有直接的内链匹 ...
- Spring MVC篇一、搭建Spring MVC框架
本项目旨在搭建一个简单的Spring MVC框架,了解Spring MVC的基础配置等内容. 一.项目结构 本项目使用idea intellij创建,配合maven管理.整体的目录结构如图: 其中ja ...
- Log4Net异常日志记录在asp.net mvc3.0的应用
前言 log4net是.Net下一个非常优秀的开源日志记录组件.log4net记录日志的功能非常强大.它可以将日志分不同的等级,以不同的格式,输出到不同的媒介.本文主要是简单的介绍如何在Visual ...
- css解决display:inline-block;产生的缝隙（间隙）
今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是 ...
- Akka-remote使用入门
在上一篇文章中讲了akka-actor的简单使用,那主要是展现了akka在一台机器上的并发应用,这一篇接着介绍akka-remote使用,简单了解akka在不同机器上的并发应用.我们知道,在一台机器上 ...
- 【Python】引用计数
一.概述 要保持追踪内存中的对象,Python使用了引用计数这一简单的技术. 二.引用计数的增减 2.1 增加引用计数 当对象被创建并(将其引用)赋值给变量时,该对象的引用计数被设置为1. 对象的引用 ...
- Centos 编写 service 启动
Centos 系统服务脚本目录: [html] view plaincopyprint? /usr/lib/systemd/ 有系统(system)和用户(user)之分, 如需要开机没有登陆情况 ...