精简的TabComponent, 几十行的东西没必要搞个几十K
前言, 虽然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 tagfunction 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 tagvar div=new Array();//save container divvar 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);e.onclick=show;e._no=i;}e=document.getElementsByName(tab_div);len=e.length;for(var i=0;i<len;i++){div.push(e);e.style.display="none";}//initial setting, default display 1st tag & divli.className=alterClassName;e.style.display="block";}catch(err){alert(err);}}var show=function(){try{for(i in li){li.className="";}li.className=alterClassName;for(i in div){div.style.display="none";}div.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>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 {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>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了
http://dl.iteye.com/upload/attachment/429914/d87147d7-5b3c-3f15-8861-2b8750941f3f.png
http://dl.iteye.com/upload/attachment/429919/92fa0f6b-bff4-356c-b06a-4bd1ffe90805.png
页:
[1]