dhTabStrip 2.0发布

最新推荐文章于 2009-04-29 09:05:00 发布
最新推荐文章于 2009-04-29 09:05:00 发布
阅读量1.3k 收藏
点赞数
分类专栏： 技术文档 文章标签： button input function internet javascript tcl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dh20156/article/details/1464491
版权

For IE, fireFox

在线演示：http://www.jxxg.com/dh20156/dhtabstrip/dhtabstrip.htm

dhtabstrip.js

function dhtabStrip(){
 //author:dh20156;
 this.width = 400;
 this.height = 300;
 this.tabwidth = 76;
 this.fontSize = "12px";
 this.background = "buttonface";
 this.border = "2px outset";

 var dhts = this;
 var tabsplit = null;
 var tabcontent = null;
 var splitObj = [];
 var length = 0;
 var currenttab = 0;
 var currentlist = [];
 var showmore = false;

 var lb = document.createElement("BUTTON");
 lb.innerHTML = "<";
 lb.style.width = "15px";
 lb.style.height = "18px";
 lb.style.fontSize = "12px";
 lb.onclick = function(){viewpre();}

 var rb = document.createElement("BUTTON");
 rb.innerHTML = ">";
 rb.style.width = "15px";
 rb.style.height = "18px";
 rb.style.fontSize = "12px";
 rb.onclick = function(){viewnext();}

 var mb = document.createElement("LI");
 mb.style.styleFloat = "left";
 mb.style.cssFloat = "left";
 mb.style.position = "relative";
 mb.style.left = "2px";
 mb.style.padding = "0px";
 mb.style.background = "none";
 mb.style.border = "none";
 mb.style.width = "32px";
 mb.style.height = "20px";

 mb.appendChild(lb);
 mb.appendChild(rb);

 this.showTab = function(index){
  if(0<=index && length>0){
   splitObj[currenttab].ts.style.top = "0px";
   splitObj[currenttab].ts.style.left = "2px";
   splitObj[currenttab].ts.style.zIndex = "0";
   splitObj[currenttab].ts.style.paddingLeft = "5px";

   if(index!=currenttab){
    tabcontent.innerHTML = splitObj[index].tc;
   }

   splitObj[index].ts.style.paddingLeft = "7px";
   splitObj[index].ts.style.top = "-1px";
   splitObj[index].ts.style.left = "0px";
   splitObj[index].ts.style.zIndex = "3";

   currenttab = index;
  }
 }

 function viewpre(){
  var cl = parseInt(currentlist.length);
  if(currentlist[0]!=0){
   var tcl = currentlist;
   currentlist = [];
   for(var i=0;i<cl;i++){
    var ni = parseInt(tcl[i])-1;
    tabsplit.replaceChild(splitObj[ni].ts,tabsplit.childNodes[i]);
    currentlist.push(ni);
   }
   rb.removeAttribute("disabled");
   if(currentlist[0]==0){
    lb.setAttribute("disabled","true");
   }
  }
 }

 function viewnext(){
  var cl = parseInt(currentlist.length);
  if(currentlist[cl-1]!=parseInt(length)-1){
   var tcl = currentlist;
   currentlist = [];
   for(var i=cl-1;i>-1;i--){
    var ni = parseInt(tcl[i])+1;
    tabsplit.replaceChild(splitObj[ni].ts,tabsplit.childNodes[i]);
    currentlist.push(ni);
   }
   currentlist.sort();
   lb.removeAttribute("disabled");
   if(currentlist[cl-1]==parseInt(length)-1){
    rb.setAttribute("disabled","true");
   }
  }
 }

 this.init = function(targetObj){
  var tabstrip = document.createElement("DIV");
  tabstrip.style.width = this.width+26+"px";
  tabstrip.style.height = this.height+26+"px";
  tabstrip.style.fontSize = this.fontSize;
  tabstrip.style.cursor = "default";

  var ts = document.createElement("UL");
  ts.style.margin = "0px";
  ts.style.padding = "0px";
  ts.style.width = this.width+"px";
  ts.style.listStyle = "none";

  var tc = document.createElement("UL");
  tc.style.border = this.border;
  tc.style.margin = "0px";
  tc.style.padding = "10px";
  tc.style.position = "relative";
  var bp = parseInt(tc.style.borderTopWidth);
  tc.style.top = -(bp+1)+"px";
  tc.style.left = "0px";
  tc.style.zIndex = "1";
  tc.style.background = this.background;
  tc.style.width = this.width+"px";
  tc.height = this.height-20+"px";
  tc.style.listStyle = "none";
  tc.style.clear = "both";

  var tcil = document.createElement("LI");
  tcil.style.width = this.width+"px";
  tcil.style.height = this.height-20+"px";
  tcil.style.overflow = "auto";

  tc.appendChild(tcil);

  tabstrip.appendChild(ts);
  tabstrip.appendChild(tc);
  targetObj.appendChild(tabstrip);

  tabsplit = ts;
  tabcontent = tcil;
 }

 this.addTab = function(tab,content){
  var tempint = length;
  var tsil = document.createElement("LI");
  tsil.setAttribute("index",length);
  tsil.style.position = "relative";
  tsil.style.top = "0px";
  tsil.style.left = "2px";
  tsil.style.styleFloat = "left";
  tsil.style.cssFloat = "left";
  tsil.style.zIndex = "0";
  tsil.style.height = "20px";
  tsil.style.lineHeight = "20px";
  tsil.style.overflow = "hidden";
  tsil.style.background = this.background;
  tsil.style.padding = "0 5px";
  tsil.style.borderLeft = this.border;
  tsil.style.width = this.tabwidth+"px";
  tsil.style.borderTop = this.border;
  tsil.style.borderRight = this.border;
  tsil.title = tab;
  tsil.innerHTML = tab;
  tsil.onclick = function(){dhts.showTab(this.getAttribute("index"));}
  if(0 == length){
   tsil.style.padding = "0 5px 0 7px";
   tsil.style.top = "-1px";
   tsil.style.left = "0px";
   tsil.style.zIndex = "3";

   tabcontent.innerHTML = content;
  }

  splitObj[length] = {"ts":tsil,"tc":content};

  length += 1;

  if(length*(this.tabwidth+14)<this.width){
   tabsplit.appendChild(tsil);
   currentlist.push(length-1);
  }else{
   if(!showmore){
    lb.setAttribute("disabled","true");
    tabsplit.appendChild(mb);
    showmore = true;
   }else{
    rb.removeAttribute("disabled");
   }
  }
 }

 this.removeTab = function(index){
  if(0<=index && index<length){

   var rindex = splitObj[index].ts.getAttribute("index");

   splitObj.splice(index,1);

   var atb = null;
   currentlist.sort();
   for(var i=0;i<currentlist.length;i++){
    if(rindex==currentlist[i]){
     atb = i;
    }
   }

   if(showmore){
    for(var s=0;s<splitObj.length;s++){
     splitObj[s].ts.setAttribute("index",s);
    }
    if(atb!=null){
     if(0==index){
      for(var n=currentlist.length-1;n>atb-1;n--){
       var ni = parseInt(currentlist[n]);
       tabsplit.replaceChild(splitObj[ni].ts,tabsplit.childNodes[n]);
       currentlist[n] = ni;
      }
      currentlist.sort();
     }else if (index==length-1){
      for(var n=0;n<currentlist.length;n++){
       var ni = parseInt(currentlist[n])-1;
       tabsplit.replaceChild(splitObj[ni].ts,tabsplit.childNodes[n]);
       currentlist[n] = ni;
      }
     }else{
      if(currentlist[0]>0){
       for(var n=0;n<currentlist.length;n++){
        var ni = parseInt(currentlist[n])-1;
        if(n<atb+1){
         tabsplit.replaceChild(splitObj[ni].ts,tabsplit.childNodes[n]);
        }
        currentlist[n] = ni;
       }
      }else{
       for(var n=currentlist.length-1;n>atb-1;n--){
        var ni = parseInt(currentlist[n]);
        tabsplit.replaceChild(splitObj[ni].ts,tabsplit.childNodes[n]);
        currentlist[n] = ni;
       }
       currentlist.sort();
      }
     }
    }else{
     for(var p=0;p<currentlist.length;p++){
      currentlist[p] = p;
     }
    }
   }else{
    if(atb!=null){
     tabsplit.removeChild(tabsplit.childNodes[atb]); 
     currentlist.splice(atb,1);
     for(var b=0;b<currentlist.length;b++){
      currentlist[b] = b;
      splitObj[b].ts.setAttribute("index",b);
     }
    }
   }

//alert("current:"+currenttab+"- index:"+index);
   if(0==splitObj.length){
    currenttab = 0;
   }else{
    if(currenttab==index){
     if(currenttab<length-1){
      currenttab = index;
     }else{
      currenttab -= 1;
     }
    }else{
     if(currenttab>0 && currenttab>index){
      currenttab -= 1;
     }
    }
   }

   if(length>1){
    tabcontent.innerHTML = splitObj[currenttab].tc;
    splitObj[currenttab].ts.style.paddingLeft = "7px";
    splitObj[currenttab].ts.style.top = "-1px";
    splitObj[currenttab].ts.style.left = "0px";
    splitObj[currenttab].ts.style.zIndex = "3";
   }else{
    tabcontent.innerHTML = "";
   }

   if(showmore){
    if((length-1)*(this.tabwidth+14)<=this.width){
     tabsplit.removeChild(tabsplit.childNodes[tabsplit.childNodes.length-1]);
     rb.removeAttribute("disabled");
     showmore = false;
    }
   }

   length -= 1;
  }
 }

 this.getChildNodes = function(){
  return splitObj;
 }
}

 

 

调用 dhtabstrip.htm

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>dhTabStrip 1.0</title>
<script language="javascript" type="text/javascript" src="dhtabstrip.js"></script>
</head>
<body>

<div id="daa" style="display:none;">
<fieldset>
<legend>主页</legend>
可以更改主页。<br/>
地址：<input type="text" style="width:300px;"><br/>
<input type="button" value="使用当前页(C)" style="width:120px;">
<input type="button" value="使用默认页(D)" style="width:120px;">
<input type="button" value="使用空白页(B)" style="width:120px;">
</fieldset>
</div>

<div id="dab" style="display:none;">
<fieldset>
<legend>该区域的安全级别</legend>
移动滑块设置该区域的安全级别。<br/>
<b>安全级 - 中</b><br/>
<input type="button" value="自定义级别(C)..." style="width:120px;">
<input type="button" value="默认级别(D)" style="width:120px;" disabled>
</fieldset>
</div>

<div id="dac" style="display:none;">
<fieldset>
<legend>设置</legend>
要使用滑块设置隐私等级而不使用自定义设置，请单击“默认”按钮。<br/>
<b>自定义</b><br/>
- 高级或导入的设置<br/>
<input type="button" value="导入(I)..." style="width:100px;">
<input type="button" value="高级(V)..." style="width:100px;">
<input type="button" value="默认(D)" style="width:100px;">
</fieldset>
</div>

<div id="dad" style="display:none;">
<fieldset>
<legend>分级审查</legend>
分级系统可帮助您控制在该计算机上看到的 Internet 内容。<br/>
<input type="button" value="启用(E)..." style="width:100px;">
<input type="button" value="设置(T)..." style="width:100px;" disabled>
</fieldset>
</div>

第一个TabStrip<br/>
getChildNodes()方法获得dhTabStrip节点对象<select id="showelement" style="width:200px;" οnchange="dt.showTab(this.value);alert(this.options[this.selectedIndex].getAttribute('ntext'));"></select>可以选择不同的选项进行切换！<br/>
<input type="button" value="remove1" οnclick="dt.removeTab(0);"><input type="button" value="remove2" οnclick="dt.removeTab(1);"><input type="button" value="remove3" οnclick="dt.removeTab(2);"><input type="button" value="remove4" οnclick="dt.removeTab(3);"><input type="button" value="remove5" οnclick="dt.removeTab(4);"><br/>
<input type="button" value="给第一个TabStrip添加一个新的标签" οnclick="dt.addTab('newTab','this  is newTab');"><br/><br/>
<script language="javascript" type="text/javascript">
 var dt = new dhtabStrip();
 dt.border = "2px outset";
 dt.init(document.body);
 dt.addTab("常规",document.getElementById("daa").innerHTML);
 dt.addTab("安全",document.getElementById("dab").innerHTML);
 dt.addTab("隐私",document.getElementById("dac").innerHTML);
 dt.addTab("内容",document.getElementById("dad").innerHTML);
</script>

第二个TabStrip

<script language="javascript" type="text/javascript">
 var dt2 = new dhtabStrip();
 dt2.tabwidth = 70;
 dt2.width = 200;
 dt2.height = 150;
 dt2.border = "1px solid #808080";
 dt2.init(document.body);
 dt2.addTab("常规常规常规常规","常规要设置一个 Internet 连接，单击“设置”。");
 dt2.addTab("安全安全安全安全","安全检查 Internet Explorer 是否为默认的浏览器(<u>I</u>)");
 dt2.addTab("隐私隐私隐私隐私","隐私还原默认设置(<u>R</u>)");
 dt2.addTab("内容内容内容内容","内容要设置一个 Internet 连接，单击“设置”。");
 dt2.addTab("连接连接连接连接","连接要设置一个 Internet 连接，单击“设置”。");
 dt2.addTab("程序程序程序程序","程序检查 Internet Explorer 是否为默认的浏览器(<u>I</u>)");
 dt2.addTab("高级高级高级高级","高级还原默认设置(<u>R</u>)");
</script>

<script language="javascript" type="text/javascript">
function getdtelement(){
 var str = "";
 var o = dt.getChildNodes();
 for(var i=0;i<o.length;i++){
  var oOption = document.createElement("OPTION");
  oOption.innerHTML = i+1+" "+o[i].ts.innerHTML;
  oOption.value = i;
  oOption.setAttribute("ntext",o[i].tc);
  document.getElementById("showelement").appendChild(oOption);
 }
}
getdtelement();
</script>
</body>
</html>

 

 

在线演示：http://www.jxxg.com/dh20156/dhtabstrip/dhtabstrip.htm

dh20156
关注
专栏目录
用PHP写的POS软件
01-28
2. `dhtabstrip.css` 是CSS（层叠样式表）文件，定义了用户界面的样式和布局，特别是可能涉及到表格或选项卡式界面的设计，提高用户体验。 3. `readme.html` 通常包含软件的使用说明、许可信息和安装指南，是用户...
dhCode
11-27
6）dhtabstrip，标签页控件，内置windows经典，XP及126邮箱等多种皮肤； 7）dhxmltreeview，比较早前写的一个通过加载XML文档生成的树； 8）dhadshow，广告轮显； 9）dhScroll系列，几种无缝滚动的实现...
tabstrip和multipage使用心得
xcplates的专栏
12-26 3657
手头有一个项目，其中一个页面需要分别用树和表的形式来显示会员信息，在网上搜索了一下，找到了一个控件包，其中有一个  tabstrip 和 multipage，这两个控件相结合就能达到 多页框功能，下面是一个例子：在页面上放一个  tabstrip，再加两个tab ，text分别写：会员树和会员表，TargetID设为 下面的MultiPage1     TabHoverStyle="bac
php pos 店铺管理
09-13
- dhtabstrip.css 是一个CSS文件，用于定义系统的样式和布局，可能涉及UI设计。 - __users_ok__ed.csv 可能是用户数据的导出文件，包含店铺的客户或员工信息。 - readme.html 提供系统使用说明或安装指南。 - right_...
浏览器缩放不触发window.onresize事件的BUG
热门推荐
dh20156风之石的专栏
04-29 1万+
在帮同事处理一个页面缩放BUG的时候惊奇的发现各种浏览器的缩放不触发window.onresize的BUG，太坏了！我理解的能正常工作的浏览器有：IE6FF3以下浏览器Ctrl+和Ctrl-时均不触发window.onresize事件，只在窗口大小改变时才触发：IE8 Beta2，无论是Ctrl+，Ctrl-还是最大化最小化，拖拽改变窗口大小，都无法触发wind
可输入、自动匹配的下拉框
dh20156风之石的专栏
10-16 6539
最近做一B/S项目，客户习惯了速达里边的COMBOBOX控件的使用，输入产品编号然后自动提示匹配产品信息，为了实现这个功能想了很多办法，原本在无技可施的时候准备用ActiveX控件凑合一下算了，好在JK兄出手相助，给偶一个类似的参考，终于了解了实现的方法，不过由于那套方案无法应对一些控件的遮挡，所以还不能完全达到要求，于是偶用POPUP方法改了下，终于大功告成，可以很好的实现客户的要求了，现将源公
WEB打印经验交流
dh20156风之石的专栏
12-23 5646
WEB打印一直困扰着大家，小弟最近做一项目，稍有心得，特来跟大家交流交流。我在那个项目中是利用ScriptX.cab这个控件来解决问题的，包括各种汇总表，详细清单等等，不过最大弊端就是打印的格式是死的，你要打印出怎样的格式必须自己来做，还有就是打印分页，它是按你设置的纸张大小来分的，所以必须人为控制，我已经搞定了。ScriptX.cab大家可以到网上去DOWN一个。好了，废话不多说了，
支持IE、跨域(FRAME)的POPUP菜单栏
dh20156风之石的专栏
12-13 4397
支持IE、跨域(FRAME)的POPUP菜单栏一直研究B/S结构的东东，菜单栏一直有欠缺。原来有见过一个模仿的比较好的，不过不是POPUP方式的，不能跨域（FRAME），所以没有办法，只有继续研究。一次看到宝玉的无限级菜单雏形，研究了一下，简单改了改，实现了显示子菜单的功能，然后偶又加上了对菜单点击显示的逻辑判断，现在大概的一个比较强大的POPUP菜单栏就出来了。效果如下：以下
EasyUI API
dh20156风之石的专栏
04-15 3644
EasyUI来自DHTML精英俱乐部的简单易用功能强大的轻量级JavaScript Framework前端框架原文：http://www.v-ec.com/easyui/ EasyUI的组成EasyUI.js核心文件可扩展的附加组件EasyUI打包下载EasyUI APIeasyUI.fpbind()自执行方法,为Function.prototype添加bind方法，用
可输入、自动匹配的下拉框更新版dhCombobox
dh20156风之石的专栏
06-08 3449
全新写了一遍,全部用Array Join方式实现的类似Combobox,真心讨教更高效合理的方法.dhCombobox testfunction dhCombobox(){ //author:dh20156; var dh = this; //返回实例名 this.clsName = null; //定义目标对象 this.targetObj = null; //定义提示框属性 t
遍历XML文档返回二维数组(ASP)(更新版)
dh20156风之石的专栏
05-12 3054
   问题没处理   xmlfile = Server.MapPath("???.xml")   Set xml = Server.CreateObject("MSXML.DOMDocument")   xml.async = false   xml.load(xmlfile)Public Function PrettyPrint(node,tabLevel)on error resume
AJAX+POPUP+数据库,实现动态无限级栏目BETA
dh20156风之石的专栏
07-09 2981
为了减轻未来开发压力及缩短开发周期， 贴出最近研究模块化开发中的一点积累。这是一个无限级的栏目模块，使用到了数据库，ASP，JSON数据类型转换，AJAX加载栏目，无限级POPUP显示等技术手段。现在贴出该实例的所有组成要素：1、数据库（本例用数据库为ACCESS2000）2、服务器端加载栏目(文件保存为UTF8格式)getMenu.aspdim menuidm
JS版数字转中文货币金额大写
dh20156风之石的专栏
04-07 2922
在CSDN回复的一个帖子！JS里将数字转换为中文的货币大写模式！function i2c(n){ if(typeof(n) == "number"){  if(-1 == n.toString().indexOf(".")){   return seti2c(n);  }else{   var i,istr,f,fstr,a,rstr;   a = n.toString().split("."
汉字与unicode字符互相转换处理乱码
dh20156风之石的专栏
04-07 2887
汉字与unicode字符转换//unicode to chinesevar s = "&#20013";var s = s.substr(2);//去掉&#document.write(String.fromCharCode(parseInt(s,10)));//从Unicode字符值中返回一个字符串a = "沈阳a,b,c."b = a.replace(/&#x/
dhDataGrid Ver2.0.0发布
dh20156风之石的专栏
02-08 2652
针对dhDataGrid的前一版本Ver1.0.0而做的更新！1、标题栏、左边边栏固定方式更新，取消expression方式；2、排序方式更新，同时支持数字、字符、日期、数字字符混合、中文汉字的排序；3、支持换肤，您可以自己定制该控件样式；4、预留[双击]、[右键]功能；5、支持IE、FF；DEMO（演示）：http://www.jxxg.com/dh20156/dhdat
遍历XML文档的所有节点及属性（ASP）
dh20156风之石的专栏
05-10 2091
无聊写了个遍历XML文件的文档，还有一些不够完美，大家如果有更好的可以贴出来一起研究一下!   问题没处理   xmlfile = Server.MapPath("???.xml")   Set xml = Server.CreateObject("MSXML.DOMDocument")   xml.async = false   xml.load(xmlfile)   private
支持IE、Firefox的popupMenu
dh20156风之石的专栏
11-14 2087
dhLayer.htm支持IE、Firefox的popupMenuhtml {width:100%;height:100%;margin:0px;}body {width:100%;height:100%;min-height:100%;margin:0px;}//判断浏览器类型var isMSIE = (navigator.appName == "Microsoft Internet Exp
发现POPUP中的一点问题
dh20156风之石的专栏
10-20 2073
最近在使用POPUP的时候不小心发现一个问题，在POPUP中的inerHTML如果是隐藏的话，那么里边调用外部的FUNCTION不需要加parent。如：STYLE="display:none;" onclick="edit(gys_addkj.asp?gysid=[index0],600,400,window.location.href);">FirstRunonclick="parent.
ASP版CDONTS和Jmail发邮件实例
dh20156风之石的专栏
05-19 1990
 CDONTS: 　　　　username="dh20156" 　　userpass="123456" 　　realname="杜欢"　　email="dh20156@126.com" 　　　　dim objCDOMail 　　Set objCDOMail = Server.CreateObject("CDONTS.NewMail") 　　objCDOMail.From ="webmaster
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值