前言, 虽然jQuery的tab已经做得很好了,
但作为一个代码手写者, 多少有些洁癖,
为了1,2个小功能就要在打开的网页里下载几十乃至几百K的js lib, 心里不是滋味, 想想我自身的代码才多少, 本末倒置
但jquery的风格着实不错, 就参照写了个类似的, 以备日后自己回顾
//load custom lib
<script type="tetext/javascript" src="YS_Util.tab.js"></script>
//invoke
//parameter: name of select tag, name of container tag, className of selected tag
function demo(){
$YS_Util.tab.createTab("tab_li", "tab_div", "selected");
}
其实要实现tab控件并不难, 就是几个title的选择点击, 然后下面一个容器里, 选择对应的block, 其余的none
比较花时间的是, 有个好的封装, 和漂亮的UI, 但漂亮的UI主要是靠图片, 把时间耗在JS上还不如用PS和AI
(function(){
var Tab=new Object();
$YS_Util=new Object();
$YS_Util.tab=Tab;
var li=new Array(); //save select tag
var div=new Array(); //save container div
var alterClassName; //className of selected
/**
* perform tab component in js like GUI tabcomponent
* @param tab_lbl name attribute of select button
* @param tab_div containers' name attribute
* @param className
*/
Tab.createTab=function(tab_lbl, tab_div, className){
try{
alterClassName=className;
var e=document.getElementsByName(tab_lbl);
var len=e.length;
for(var i=0;i<len;i++){
li.push(e[i]);
e[i].onclick=show;
e[i]._no=i;
}
e=document.getElementsByName(tab_div);
len=e.length;
for(var i=0;i<len;i++){
div.push(e[i]);
e[i].style.display="none";
}
//initial setting, default display 1st tag & div
li[0].className=alterClassName;
e[0].style.display="block";
}catch(err){
alert(err);
}
}
var show=function(){
try{
for(i in li){
li[i].className="";
}
li[this._no].className=alterClassName;
for(i in div){
div[i].style.display="none";
}
div[this._no].style.display="block";
}catch(err){
alert(err);
}
}
})();
html demo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tab Conponent Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="YS_Util.tab.js"></script>
<style type="text/css">
#tab li
{
display: table-cell;
padding-left: 20px;
padding-right: 20px;
background-color: bisque;
cursor: pointer;
}
#tab li.selected {background-color: burlywood;}
#tab>div
{
border: solid #777 0px;
background-color: burlywood;
}
</style>
<script type="text/javascript" >
function demo(){
$YS_Util.tab.createTab("tab_li", "tab_div", "selected");
}
</script>
</head>
<body onload="demo()" >
Tab Conponent Demo<br /><br />
<div id="tab">
<li name="tab_li" >JS</li>
<li name="tab_li" >CSS</li>
<li name="tab_li" >JAVA</li>
<li name="tab_li" >SQL</li>
<div>
<br />
<div name="tab_div">jquery<br />EXT<br />regular<br /></div>
<div name="tab_div">table<br />list<br />layout<br />border<br />selector</div>
<div name="tab_div">String<br />Integer<br />Collection<br /></div>
<div name="tab_div">PL-SQL<br />T-SQL</div>
</div>
</div>
</body>
</html>
其实不一定要li+div, 用table实现也是不错的, 第一行做title, 第二行合并全部单元格做container,
对于设置标签和容器等宽很方便
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="YS_Util.tab.js"></script>
<style type="text/css">
table {table-layout: fixed; border-collapse: collapse; width: 400px}
table tr.title td {border: solid #777 1px; text-align: center; background-color: burlywood; cursor: pointer;}
table tr.title td.selected {border-bottom: 0px; background-color: bisque;}
table td[colspan="4"] {border: solid #777 1px; border-top: 0px; background-color: bisque;}
</style>
<script>
function demo(){
$YS_Util.tab.createTab("tab_td", "tab_div", "selected");
}
</script>
</head>
<body onload="demo()" >
TAB COMPONENT DEMO2<br /><br />
<table>
<tr class="title" >
<td name="tab_td">JS</td>
<td name="tab_td">CSS</td>
<td name="tab_td">JAVA</td>
<td name="tab_td">SQL</td>
</tr>
<tr>
<td colspan="4">
<div name="tab_div">jquery<br />EXT<br />regular<br /></div>
<div name="tab_div">table<br />list<br />layout<br />border<br />selector</div>
<div name="tab_div">String<br />Integer<br />Collection<br /></div>
<div name="tab_div">PL-SQL<br />T-SQL</div>
</td>
</tr>
</table>
</body>
</html>
效果如图, 只简单写了点CSS配色, 笔记就懒得PS了
- 大小: 191 KB
- 大小: 168 KB
分享到：
相关推荐
在标题中提到的“几十k大小的虚拟光驱”，指的是这款软件的体积非常小巧，只有几十KB，这在软件领域是非常罕见的，通常意味着它具有高度的优化和精简设计。 虚拟光驱的主要功能包括读取和写入光盘映像文件（如ISO、...
最近在写一个小程序，jre1.8.0_181整整有199mb，对于一个只有400多k的程序来说，完全没必要，于是就进行精简，把jre精简到40M、左右，程序也能正常运行。如果你急需使用精简的jre，可以下载试试。
【精简版】十四五规划精简版.rar
3. 精简：意味着这个版本移除了非必要的功能和组件，仅保留了基本的开发工具集，以实现更快的安装速度和更小的硬盘占用。 【压缩包子文件的文件名称列表】：TCMsc可能是一个包含Visual Studio 2010绿色精简版所需...
这种精简过程可能涉及以下几个方面： 1. **只包含核心类库**：保留最基础的Java类库，移除非必要的API，以减少体积和内存占用。 2. **定制JVM**：选择适合特定平台或性能需求的JVM实现，如HotSpot、OpenJ9等，并...
标题中的“PPC手机 SU2U键盘锁 (精简版) 只有600多K”指的是一个专为PPC（Pocket PC）手机设计的轻量级键盘锁定软件，名为SU2U键盘锁的精简版本。这款软件的体积非常小巧，大小约为600KB，对于手机用户来说，这意味...
标题中的“震撼只有几十KB的3D动画demo”揭示了一个非常引人注目的技术成就，即在极小的文件尺寸下实现了3D动画效果。在IT领域，这通常涉及到高效的数据压缩、轻量级的图形渲染技术和优化的编程实践。在描述中提到了...
本压缩包包含三个文件： ①RT 7 Lite的配置文件；（X86/X64系统通用） ②手动精简Win 7的驱动； ③Win SXS的再精简批处理。 使用方法： ①首先使用Rt7 Lite加载配置文件对提取出来的ISO文件进行精简； ②加载...
VC10 精简版(只有编译器,标准库,必要的lib) 从VS2010 beta版提取
《VB6.0精简版：轻量级编程利器》 Visual Basic 6.0（简称VB6.0）是微软公司推出的一款经典的可视化编程工具，它的精简版更是为那些追求高效、简洁的开发者提供了理想的开发环境。在这个版本中，VB6.0的核心功能...
Sam机架精简版+精选插件 精简后再加几十个精选插件 精简版运行速度快
国行官方2.3.6精简列表.xls 精简使用很方便
"Win2003精简版.7z"这个压缩包文件，包含了对Windows Server 2003进行精简处理后的版本，旨在提供一个轻量级的系统环境，适用于测试、学习或特定用途。 首先，我们来了解一下这个文件的核心——"Win2003 mini.qcow2...
没有必要为改一下游戏再去安装一个庞大的东西了，只有几百K哦！"这句话强调了金山游侠V精简版的实用性与高效性。它不需要用户为了一个简单的游戏修改功能而安装体积庞大的全套软件，几百K的大小表明其占用硬盘空间极...
6. **文件名解析**: "PADS 9.5 Update2 For D.exe" 这个文件名表明它是PADS 9.5的第二个更新版本，针对D盘的安装设计，可能包含了安装程序的所有必要文件。 总的来说，PADS 9.5三合一精简版是一个为用户量身定制的...
最近在写一个java开发的游戏，jre1.8.0_181整整有199mb，对于一个只有400多k的游戏来说，完全没必要，于是就进行精简，把jre精简到22.5mb，游戏也能正常运行。如果你急需使用精简的jre，可以下载试试。本来想精简到...
JRE主要由以下几个部分组成： - Java虚拟机（JVM）：负责解释并执行Java字节码。 - 类库：包括Java基础类库、Swing GUI库、网络库等，提供各种功能支持。 - 安全组件：确保Java程序在运行时的安全性。 - 国际化...
这个“CAJViewer绿色精简版”是针对原版软件进行优化和精简后的版本，主要特点是体积小巧，无需安装，便于用户快速使用。 在描述中提到的“少了两个DLL文件”，DLL（Dynamic Link Library）是Windows操作系统中的...
**Windows 10/11 专业版64位22H2正式版与NTLite精简配置文件详解** 在IT领域，操作系统是至关重要的组成部分，尤其是对于个人用户和企业来说。本文将深入探讨Windows 10专业版64位22H2（又称为22H2更新）和Windows ...