浏览 4946 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (1)
|
|
---|---|
作者 | 正文 |
发表时间:2011-03-05
最后修改:2011-03-05
但作为一个代码手写者, 多少有些洁癖, 为了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了 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2011-03-06
使用库的目的是为了快速开发~至于楼主的tab控件实在有点简单~仅仅是为了满足切换功能!之所以tab写的复杂的原因是因为tab不仅仅是选项卡,还可以用来做图片展示,内容的延迟加载等~如果你深入的研究就发现它可以做更多的事情,而不是仅仅为了满足一个功能,这样的话你这一次是满足了,但是下一次当你需要其他功能的时候你又要写一次。得不偿失~
|
|
返回顶楼 | |
发表时间:2011-03-07
ls说的有点道理,呵呵。
|
|
返回顶楼 | |
发表时间:2011-03-07
jquery ui 确实有些臃肿,不过jquery可以用啊,可以减少很多开发成本
ui里的tab确实感觉没太大必要,自己会写前端代码的话,自己写也可以实现延迟加载、切换事件、定时切换等等功能,而且效率更高 实际项目中用过ui 的tab,感觉用起来也不是那么省心的,自己还是要做很多后续工作,还不如自己去写 |
|
返回顶楼 | |
发表时间:2011-03-07
楼主这是ylmfos?
|
|
返回顶楼 | |
发表时间:2011-03-07
baiyuxiong 写道 楼主这是ylmfos? 雨林木风系统+netbeans6.9.1 |
|
返回顶楼 | |
发表时间:2011-03-08
bingo
|
|
返回顶楼 | |
发表时间:2011-03-08
jquery tools 的 tab 标签好看又好用。建议去试一下
|
|
返回顶楼 | |
发表时间:2011-03-09
明显不是jquery 的写法
|
|
返回顶楼 | |