1. 爱易网页
  2. JS特效
  3. 利用类的方法实现的选项卡程序

利用类的方法实现的选项卡程序

日期：2014-05-18　 浏览次数：20138 次

以下是引用片段：
复制内容到剪贴板 
代码:
这个选项卡程序是利用JS的类实现的,所以它的调用也很简单,直接利用一句代码实例化就行了.
var tab1=new tabMenu("tab_container1",{fontSize:"14px",color:"#FFBC44",fontWeight:"bold"},{fontWeight:"normal",color:"#666"});
第一个参数是必选项,第二个和第三个参数是可选项,分别是当前选项卡的样式和其它和其它选项卡的样式,需要注意的是第二个和第三个参数的写法,是以逗号分隔的(因为传递的是对象,所以对象属性之间的分隔符是逗号).另外就是里面的属性名和CSS的写法不同,是javascript中的写法.
<script type="text/javascript">
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
function $(element){
if(arguments.length>1){
  for(var i=0,elements=[],length=arguments.length;i<length;i++)
   elements.push($(arguments[i]));
  return elements;
}
if(typeof element=="string")
  return document.getElementById(element);
else
  return element;
}
var Class={
create:function(){
  return function(){
   this.initialize.apply(this,arguments);
  } 
}
}
Object.extend=function(destination,source){
for(var property in source){
  destination[property]=source[property];
}
return destination;
}
var tabMenu=Class.create();
tabMenu.prototype={
initialize:function(container,selfOpt,otherOpt){
  this.container=$(container);
  /*
   利用Object的extend方法来实现对默认属性的覆盖.
   如果初始化选项卡时,没有设置选项卡的属性,则默认属性
  */
  var selfOptions=Object.extend({fontWeight:"bold",fontSize:"12px",color:"#FFBC44"},selfOpt||{});
  var otherOptions=Object.extend({fontWeight:"normal",fontSize:"12px",color:"#666"},otherOpt||{});
  //用for循环得到objs数组,主要是为了兼容非IE浏览器把空白也当作子对象
  for(var i=0,length=this.container.childNodes.length,objs=[];i<length;i++){
   if(this.container.childNodes[i].nodeType==1)
    objs.push(this.container.childNodes[i]);
  }
  var tabArray=objs[0].getElementsByTagName("li");
  //用for循环得到divArray数组,主要是为了兼容非IE浏览器把空白也当作子对象
  var divArray=new Array();
  for(i=0,length=objs[1].childNodes.length;i<length;i++){
   if(objs[1].childNodes[i].nodeType==1)
    divArray.push(objs[1].childNodes[i]);
  }
  
  for(i=0,length=tabArray.length;i<length;i++){
   tabArray[i].length=length;
   tabArray[i].index=i;
   tabArray[i].onmouseover=function(){
    //其它选项卡样式设置
    for(var j=0;j<this.length;j++){
     tabArray[j].style.backgroundPosition="-"+tabArray[j].offsetWidth+"px 0";
     for(var property in selfOptions){
      tabArray[j].firstChild.style[property]=otherOptions[property];
     }
    }
    //当前选项卡样式
    this.style.backgroundPosition="0 0";
   

相关资料更多>

  1. 第二梯队也PK：当1号店“遇上”京东手机节
  2. 人们为什么总愿尝试新社交网络？
  3. 据消息传百度将要控股携程 整合去哪儿
  4. 迅雷高管解读财报：收购快盘可快速融入小米
  5. 特斯拉将获上海免费牌照 充电桩面临双重标准
  6. 三星手机在国内陷入困境：华为中兴小米紧追
  7. 互联网金融一周年：余额宝最接地气，比特币最作死
  8. 牟贵先挂帅 国美在线“价钱战”昔日开打
  9. “世界杯+618”集体磨刀的本质是绑架全民