自己写的一个简单的Tab类
//------------- PS_DOM 功能函数 start----------------
var PS_DOM ={
indexOf: function(arr, e){
for(var i= 0; i<arr.length; i++){
if(arr[i]===e) return i;
}
return -1;
},
addClass: function(o,cls){
var arrCls = o.className.split(" ");
if( this.indexOf(arrCls,cls)==-1) {arrCls.push(cls); o.className =arrCls.join(" ").replace(/(^\s*|\s*$)/g,"");}
},
removeClass: function(o, cls){
var arrCls = o.className.split(" "),i;
if( (i=this.indexOf(arrCls,cls))!== -1){
arrCls[i]="";
o.className = arrCls.join(" ");
}
},
hasClass: function(o,cls){
var arrCls = o.className.split(" ");
return (this.indexOf(arrCls,cls)==-1) ? false : true;
},
$byClass: function(clsName,root,tag){
if(root){
if(typeof root=='string') root=document.getElementById(root);
}else{
root=document.body;
}
tag=tag||'*';
var arr=[],eles;
eles=root.getElementsByTagName(tag);
for(var i=0,n=eles.length;i<n;i++){
if(this.hasClass(eles[i], clsName)) arr.push(eles[i]);
}
return arr;
}
};
//------------- PS_DOM 功能函数 end ----------------
//--------------------- Tab类 start ------------------
function Tab(config){
this.root=config.root;
this.active_class=config.active_class;
var trigger=config.trigger?config.trigger:'click';
var tabCls = config.tabCls || 'tab-menu',
tabConCls = config.tabConCls || 'tab-content',
tabTag = config.tabTag || '*',
tabConTag = config.tabConTag || '*';
//获得tab_menus tab_contents
this.tab_menus=PS_DOM.$byClass(tabCls,this.root, tabTag);
this.tab_contents=PS_DOM.$byClass(tabConCls,this.root, tabConTag);
var len=this.tab_menus.length;
var menu_active=config.menu_active;
//若指定了默认激活的选项卡 则激活之
if(menu_active>1 && menu_active<=len){
this.activeMenu(menu_active-1); //index=menu_active-1
this.menu_active_index=menu_active-1;
}else{
this.menu_active_index=0;
}
var that=this;
//循环遍历 设置 tab-menu _index属性 和 点击事件监听器
for(var j=0;j<len;j++){
this.tab_menus[j]._index=j;
this.tab_menus[j]['on'+trigger]=(function(k){return function(){that.activeMenu(k)};})(j);}
}
Tab.prototype={
activeMenu:function(index){
for(var m=0;m<this.tab_menus.length;m++){
if(m!=index && PS_DOM.hasClass(this.tab_menus[m],this.active_class[0])){
PS_DOM.removeClass(this.tab_menus[m],this.active_class[0]);
PS_DOM.removeClass(this.tab_contents[m],this.active_class[1]);
}
if(index==m && (! PS_DOM.hasClass(this.tab_menus[m],this.active_class[0]) ) ){
PS_DOM.addClass(this.tab_menus[m],this.active_class[0]);
PS_DOM.addClass(this.tab_contents[m],this.active_class[1]);
}
}
}
};
// 调用示例:var mytab=new Tab({root:$id('mytab'),tabCls:'tab', tabConCls:'con', tabTag:'a', tabConTag:'div', trigger:'click',menu_active:1,active_class:['tab_menu_active','tab_content_active']});
//----------------------------------------------------- jQuery版本的Tab -----------------------------
function Tab(config){
var tabDiv = config.tabDivSelector || 'mytab',
tabCls = config.tabCls || 'tab',
conCls = config.conCls || 'con',
activeCls = config.activeCls || 'on';
trigger = config.trigger || 'click';
var tabs = $('.' +tabCls, tabDiv).eq(0).siblings('.'+tabCls).andSelf(), // ~~~当tabCon内再嵌套一个 选项卡 则会有问题,这里修正一下
cons = $('.'+conCls, tabDiv).eq(0).siblings('.'+conCls).andSelf();
//定义事件处理函数
tabs.bind(trigger,function(){
var clkIdx = $('.' +tabCls, tabDiv).index(this);
$(this).addClass(activeCls).siblings().removeClass(activeCls);
cons.eq(clkIdx).addClass(activeCls).siblings().removeClass(activeCls);
});
}
$.extend({'Tab':Tab});
$.Tab({tabDiv:'#tabDiv', tabCls:'tab', conCls:'tabCon',activeCls:'on'});
自己写的一个简单的Tab类的更多相关文章
- 用PHP写的一个简单的分页类 1.0版
<?php /* 分页类 用于实现对多条数据分页显示 version:1.0 author:Knight E-Mail:S.Knight.Work@gmail.com Date:2013-10- ...
- 用PHP写的一个简单的分页类 2.0版
<?php /* 分页类 用于实现对多条数据分页显示 version:2.0 //基于1.0 数据库查询用mysqli实现 author:Knight E-Mail:S.Knight.Work@ ...
- 只是一个用EF写的一个简单的分页方法而已
只是一个用EF写的一个简单的分页方法而已 慢慢的写吧.比如,第一步,先把所有数据查询出来吧. //第一步. public IQueryable<UserInfo> LoadPagesFor ...
- Python之自定义封装一个简单的Log类
参考:http://www.jb51.net/article/42626.htm 参考:http://blog.csdn.net/u011541946/article/details/70198676 ...
- 写了一个简单可用的IOC
根据<架构探险从零开始写javaweb框架>内容写的一个简单的 IOC 学习记录 只说明了主要的类,从上到下执行的流程,需要分清主次,无法每个类都说明,只是把整个主线流程说清楚,避免 ...
- 写了一个简单的 Mybatis
写了一个简单的 Mybatis,取名 SimpleMybatis . 具备增删改查的基本功能,后续还要添加剩下的基本数据类型和Java集合类型的处理. 脑图中有完整的源码和测试的地址 http://n ...
- VC++ 一个简单的Log类
在软件开发中,为程序建立Log日志是很必要的,它可以记录程序运行的状态以及出错信息,方便维护和调试. 下面实现了一个简单的Log类,使用非常简单,仅供参考. // CLogHelper.h : hea ...
- 写了一个简单的CGI Server
之前看过一些开源程序的源码,也略微知道些Apache的CGI处理程序架构,于是用了一周时间,用C写了一个简单的CGI Server,代码算上头文件,一共1200行左右,难度中等偏上,小伙伴可以仔细看看 ...
- python+selenium之自定义封装一个简单的Log类
python+selenium之自定义封装一个简单的Log类 一. 问题分析: 我们需要封装一个简单的日志类,主要有以下内容: 1. 生成的日志文件格式是 年月日时分秒.log 2. 生成的xxx.l ...
随机推荐
- Java图形化界面设计——布局管理器之FlowLayout(流式布局)
一.布局管理器所属类包 所属类包 布局管理器名称 说明 Java.awt FlowLayout(流式布局) 组件按照加入的先后顺序按照设置的对齐方式从左向右排列,一行排满到下一行开始继续排列 Bord ...
- SMACSS:一个关于CSS的最佳实践-2.Base Rules
回顾 在上一篇SMACSS:一个关于CSS的最佳实践-Overview中,讲到SMACSS将CSS Rules分为5个Categories: Base Layout Module State Them ...
- 视频媒体播放,最好的 HTML 解决方法
最好的 HTML 解决方法 HTML 5 + <object> + <embed> <video width="320" height="2 ...
- 面试题之HTML 的 form 提交之前如何验证数值文本框的内容全 部为数字? 否则的话提示用户并终止提交?
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title ...
- (转)CreateThread与_beginthreadex本质区别
本文将带领你与多线程作第一次亲密接触,并深入分析CreateThread与_beginthreadex的本质区别,相信阅读本文后你能轻松的使用多线程并能流畅准确的回答CreateThread与_beg ...
- [C#绘图]Matrix类
想要从入门到精通一门语言,最好的学习文档就是官方提供的文档,比如说OpenCV的学习,最权威的学习资料还是其官方的学习文档,C#和.net的最好的学习入门文档还是MSDN.但是好多人一开始真的不会用, ...
- (asp.net MVC学习)System.Web.Mvc.UrlHelper的学习与使用
上一次学习了HtmlHelper帮助类,这次我们学习一下UrlHelper帮 助类,看类名也都知道这个类是用来帮我们生成URL在ASP.NET MVC应用程序中.让我们来看看该类给我们带来了哪些方便的 ...
- perl5 第二章 简单变量
第二章 简单变量 by flamephoenix 一.整型 二.浮点数 三.字符串 基本上,简单变量就是一个数据单元,这个单元可以是数字或字符串.一.整型 1.整型 PERL最常用的简单变量,由 ...
- windows上放弃使用PyGTK
windows上放弃使用PyGTK - riag的专栏 - 博客频道 - CSDN.NET windows上放弃使用PyGTK 分类: python 2010-03-31 16:47 1054人阅读 ...
- Spring技术内幕:Spring AOP的实现原理(一)
一.SpringAOP的概述 1.AOP概念 AOP是Aspect-Oriented Programming(面向切面编程)的简称.维基百科的解释例如以下: Aspect是一种新的模块化机制,用来描写 ...