今天用面向对象编程也写了一个tab切换组件!构造函数模式和原型模式封装了一个!本来写个这样的非常简单 但是在写过程中碰到一个问题想了一些时间 就是切换后类怎么加上去的问题!用了下时间去想 这个tab组件不支持自动切换 只支持 要那个直接调用就可以了,代码里面有调用的注释代码!HTMl代码如下:
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <style>
- .tabnav{width:500px;height:25px;margin-left:100px; overflow:hidden;}
- .tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer}
- .tabnav li.hover{background:#047}
- .tabbox{width:500px;border:2px solid #047; overflow:hidden;}
- .tabbox div{margin:10px;line-height:20px}
- .tabbox .hide{ display:none;}
- .tabnav2{width:500px;height:25px;margin-left:100px; overflow:hidden;}
- .tabnav2 li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer}
- .tabnav2 li.hover{background:#047}
- .tabbox2{width:500px;border:2px solid #047; overflow:hidden;}
- .tabbox2 div{margin:10px;line-height:20px}
- .tabbox2 .hide{ display:none;}
- </style>
- <script src="base.js"></script>
- </head>
- <body>
- <ul class="tabnav">
- <li class="list1">jQuery技术</li>
- <li class="list1">CSS技术</li>
- <li class="list1">xhtml技术</li>
- </ul>
- <div class="tabbox">
- <div class="c1"><img src="http://img.ffffound.com/static-data/assets/6/644432cc1eac546463ff2a9ebefc2e81cc861961_m.jpg" /></div>
- <div class="c1 hide"><img src="http://img.ffffound.com/static-data/assets/6/8bd0ae01d96d6caad52ac97044e526edb6bf52f7_m.jpg" /></div>
- <div class="c1 hide"><img src="http://img.ffffound.com/static-data/assets/6/34aff353e8a0c93b1826170035fb8ed6d9de9933_m.png" /></div>
- </div>
- <script type="text/javascript" src="Tab.js"></script>
- <script type="text/javascript">
- var listMenu = getElementsByClassName("list1");
- var contents = getElementsByClassName("c1");
- var test = new Tab(listMenu,contents);
- test.Mouseover();
- </script>
- </body>
- </html>
base.js是封装了一些基本的函数方法 原审javascript当然是没有这些方法的!
- function getElementsByClassName(className,context){
- context = context || document;
- if(context.getElementsByClassName){
- return context.getElementsByClassName(className);
- }
- var nodes = context.getElementsByTagName("*"),ret=[];//获取页面上的所有节点
- for(var i=0;i<nodes.length;i++){ //遍历所有的节点
- if(hasClass(nodes[i],className)) ret.push(nodes[i]);
- }
- return ret;
- }
- //检查有没有类
- function hasClass(node,className){
- var names = node.className.split(/\s+/);//正则表达式所有的类名用空格分开
- //遍历这个类名
- for(var i=0;i<names.length;i++){
- if(names[i]==className)
- return true;
- }
- return false;
- }
- /**
- 参数说明
- curTime 当前时间 即动画已经进行了多长时间 开始时间为0
- start : 开始值
- dur : 动画持续多长时间
- alter : 总的变化量
- */
- function animate(o,start,alter,dur,fx){
- var curTime=0;
- var t = setInterval(function(){
- if(curTime>=dur) clearInterval(t);
- for(var i in start){
- o.style[i] = fx(start[i],alter[i],curTime,dur) + "px";
- }
- curTime+=50;
- },50)
- return function(){
- clearInterval(t);
- };
- }
- function Linear(start,alter,curTime,dur){
- return start + curTime/dur * alter;
- //最简单的线性变化 即匀速运动
- }
- //加速运动
- function Quad(start,alter,curTime,dur){
- return start + Math.pow(curTime/dur,2)*alter;
- }
- function addClass(obj,className){
- obj.className+=" " +className;
- return obj;
- }
- function delClass(obj,className){
- var s = obj.className.split(/\s+/);//正则把类名分开
- for(var i=0;i<s.length;i++){
- if(s[i]==className){
- delete s[i];
- }
- }
- obj.className = s.join(" ");
- return obj;
- }
Tab.js代码如下:
- /**
- * @author tugenhua
- * version V1.0
- * Tab面向对象编程
- * 构造函数Tab传了三个参数 tabMenu指菜单li中的类 tabContent指对应中的内容类 currentClass指鼠标移上去的类 默认情况下为hover
- * 依赖于底层的base.js 此js封装一些javascript没有的方法
- * 此js封装了点击onclick和鼠标移上去onmouseover方法 恩在页面上js调用的方式如下
- * <script type="text/javascript">
- * var listMenu = getElementsByClassName("list1");
- * var contents = getElementsByClassName("c1");
- * var test = new Tab(listMenu,contents);
- * test.Mouseover()或者test.Click();两种调用方式
- × 此js的缺点 就是Click和Mouseover两种方法函数有大量相同的代码 应该用个函数提取出来 直接调用哪个函数即可 目前只能这样吧 以后有空可以去
- × 做做!
- × 函数中用了javascript中的闭包解决参数的传递!注意页面中的this替换成了that 因为在闭包中的this并不是指针指向与当前的对象!
- * </script>
- ×
- */
- function Tab(tabMenu, tabContent, currentClass, time){
- this.tabMenu = tabMenu;
- this.tabContent = tabContent;
- this.currentClass = currentClass || "hover";
- this.time = time || 3000;
- this.tabMenu[0].className +=" " +this.currentClass;
- }
- Tab.prototype = {
- Click : function(){
- for(var j=0;j<this.tabMenu.length;j++){
- var that = this;
- (function(_j){
- that.tabMenu[_j].onclick = function(){
- for(var c=0;c<that.tabContent.length;c++){
- that.tabContent[c].style.display = "none";
- }
- that.clearClass();
- addClass(this,that.currentClass);
- that.tabContent[_j].style.display = "block";
- }
- })(j)
- }
- },
- clearClass : function(){
- for(var k=0;k<this.tabMenu.length;k++){
- if(hasClass(this.tabMenu[k],this.currentClass)){
- delClass(this.tabMenu[k],this.currentClass);
- }
- }
- },
- Mouseover : function(){
- for(var j=0;j<this.tabMenu.length;j++){
- var that = this;
- (function(_j){
- that.tabMenu[_j].onmouseover = function(){
- that.item = _j;
- for(var c=0;c<that.tabContent.length;c++){
- that.tabContent[c].style.display = "none";
- }
- that.clearClass();
- addClass(this,that.currentClass);
- that.tabContent[_j].style.display = "block";
- }
- })(j)
- }
- }
- }
Tab.js代码里面有相应的js注释 及 此js的优点和缺点!及js调用方法!有兴趣的同学可以看看!当然下面提供相应的下载 有不懂的地方可以留言!!
转载于:https://blog.51cto.com/tugenhua/759856