Created
October 20, 2010 15:19
-
-
Save sofish/636619 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>tab</title> | |
| <style type="text/css"> | |
| .tab-content{clear:both;width:360px;} | |
| .tab-content div{border:1px solid #ddd;padding:20px;} | |
| .tab-title li{padding:5px 10px;margin-right:5px;float:left;list-style:none;background:#eee;} | |
| .tab-title .current,.tab-title .current a, .tab-title .hover,.tab-title .hover a{background:#08c;color:#fff;;} | |
| .tab-content .current, div.current, .tab-content .hover, div.hover{display:block;color:#f36;} | |
| .cnt4,.tab-content div{display:none;} | |
| #eg{width:500px;position:fixed;top:30px;left:430px;font:12px courier;padding:20px;background:#eee;border:1px dotted #a3a3a3;} | |
| </style> | |
| </head> | |
| <body> | |
| <pre id="eg"> | |
| <strong>注：默认模式下，不用写 data-tabid 和 id, 那蓝色部分</strong> | |
| <ul id="<span style="background-color: rgb(255, 255, 0);">tab</span>"> | |
| <li data-tabid="<span style="background-color: rgb(173, 216, 230);">id</span>">...</li> | |
| ... | |
| </ul> | |
| <div id="<span style="background-color: rgb(255, 255, 0);">tab</span><span style="background-color: rgb(255, 160, 122);">-Cnt</span>"> | |
| <div id="<span style="background-color: rgb(173, 216, 230);">id</span>">...</div> | |
| ... | |
| </div> | |
| var tab = new aralex.Tab({ | |
| // 必选 | |
| id: '<span style="background-color: rgb(255, 255, 0);">Tab的ID</span>', | |
| // 可选：触发Tab切换的事件 | |
| // 默认为click, 支持 mouseover | |
| eventType: '<span style="background-color: rgb(250, 235, 215);">事件</span>', | |
| //可选： 默认normal, 支持 attr | |
| switchType: '<span style="background-color: rgb(173, 216, 230);">attr</span>', | |
| //可选：页面 onload 后初始化的tab的ID(HTML属性data-tabid) | |
| initId: '<span style="background-color: rgb(250, 235, 215);">要初始化的Tab的data-tabid</span>', | |
| // 可选：默认是current； | |
| // 但有时候你可能想用别的className做当前tab的class，比如hover | |
| currentClass: '<span style="background-color: rgb(250, 235, 215);">定义当前tab样式的className</span>' | |
| }); | |
| </pre> | |
| <h3> hash 切换模</h3> | |
| <ul id="tab" class="tab-title"> | |
| <li data-tabid="cnt1" class="hover"><a href="#">item1</a></li> | |
| <li data-tabid="cnt2">item2</li> | |
| <li data-tabid="cnt3"><a target="_blank" href="http://happinesz.cn/">item3</a></li> | |
| <li data-tabid="cnt4"><span>item4</span></li> | |
| </ul> | |
| <div id="tab-Cnt" class="tab-content"> | |
| <div id="cnt1" class="hover">content1</div> | |
| <div id="cnt2">content2</div> | |
| <div id="cnt3">content3</div> | |
| <div id="cnt4" class="cnt4"> | |
| content4 | |
| </div> | |
| </div> | |
| <script type="text/javascript" charset="utf-8" src="../../arale.js"></script> | |
| <script type="text/javascript" charset="utf-8" src="../Widget.js"></script> | |
| <script type="text/javascript" charset="utf-8" src="tab.js"></script> | |
| <script type="text/javascript" charset="utf-8"> | |
| var tab = new aralex.Tab({ | |
| id: 'tab', | |
| eventType: 'mouseover', | |
| switchType: 'attr', | |
| initId: 'cnt3', | |
| returnDefault: 'true', | |
| currentClass: 'hover' | |
| });/*, | |
| tab1 = new aralex.Tab({ | |
| id: 'tab1' | |
| }), | |
| tab2 = new aralex.Tab({ | |
| id: 'tab2', | |
| initTabId: 'cnt311' | |
| });*/ | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment