精简的TabComponent, 几十行的东西没必要搞个几十K jQuerySQLCSSEXTUI

程序员文章站 2024-02-23 11:58:34

...

前言, 虽然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了

精简的TabComponent, 几十行的东西没必要搞个几十K

jQuerySQLCSSEXTUI

查看图片附件