1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

Web Tabs(Z)

本帖由 不学无术2005-10-28 发布。版面名称:前端开发

  1. 不学无术

    不学无术 Ulysses 的元神

    注册:
    2005-08-31
    帖子:
    16,714
    赞:
    39
    文章来源:http://www.51windows.net/data/?url=/data/files/file_557.asp?frame=no

    演示:http://www.51windows.net/51windows_files/js/webtabs/webtabs.htm

    HTML 代码

    HTML:
    <html>
      <head>
        <title>Web Tabs Demo - 51windows.net</title>
        <style>
          body { background: buttonface; font-family: Tahoma; font-size: 12px; margin: 0px }
    	  div,td{font-size:9pt;}
        </style>
        <script type="text/javascript" src="webtabs.js"></script>
    	<script language=javascript>
    	function f_start() {
    		var Widget = new WebTabs_widget(480, 320, 10, 10, "absolute")
    		Widget.add(new WebTabs_tab("51windows", "page_1", "http://www.51windows.Net/favicon.ico"))
    		Widget.add(new WebTabs_tab("Blueidea", "page_2", "http://www.Blueidea.com/favicon.ico"))
    		Widget.add(new WebTabs_tab("Google", "page_3", "http://www.google.com/favicon.ico"))
    		Widget.add(new WebTabs_tab("Msn", "page_4", "http://www.Msn.com/favicon.ico"))
    		Widget.add(new WebTabs_tab("Yahoo", "page_5", "http://www.Yahoo.com/favicon.ico"))
    		document.getElementById("WebTabs_container").innerHTML = Widget
    		Widget.f_init_tabs()
    		//Widget.f_move_to(120, 20)
    		Widget.f_move_by(20, 20)
    		Widget.f_activate_tab(3)
    	}
    	</script>
      </head>
      <body>
    
    <div id=WebTabs_container></div>
    
    <div id=page_1 class=WebTabs-external-page-container>
    	<div class=WebTabs-internal-page-container>
    		<table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%">
    			<tr>
    				<td width="100%" align="center">www.51windows.Net</td>
    			</tr>
    		</table>
    	</div>
    </div>
    
    <div id=page_2 class=WebTabs-external-page-container>
    	<div class=WebTabs-internal-page-container>
    		<table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%">
    			<tr>
    				<td width="100%" align="center">www.blueidea.com</td>
    			</tr>
    		</table>
    	</div>
    </div>
    
    <div id=page_3 class=WebTabs-external-page-container>
    	<div class=WebTabs-internal-page-container>
    		<table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%">
    			<tr>
    				<td width="100%" align="center">www.Google.com</td>
    			</tr>
    		</table>
    	</div>
    </div>
    
    <div id=page_4 class=WebTabs-external-page-container>
    	<div class=WebTabs-internal-page-container>
    		<table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%">
    			<tr>
    				<td width="100%" align="center">www.Msn.com</td>
    			</tr>
    		</table>
    	</div>
    </div>
    
    <div id=page_5 class=WebTabs-external-page-container>
    	<div class=WebTabs-internal-page-container>
    		<table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%">
    			<tr>
    				<td width="100%" align="center">www.Yahoo.com</td>
    			</tr>
    		</table>
    	</div>
    </div>
    
    <script>f_start();</script>
    </body>
    </html>
    JS 部分,因为字数限制不好发布,直接看:

    http://www.51windows.net/51windows_files/js/webtabs/webtabs.js