分页文档显示
[译者序]
几天前因工作需要做一些web页面的prototype,需要使用这个技术,在 http://www.dynamicdrive.com/看到这个脚本,将其翻译成中文。
本文将随原文更新而更新,或者因修正翻译失误而更新,因此,请尽量不要转载,避免其它人因为看到不同的版本而产生迷惑。
如确需转载,请保留译者序部分。
英文原文链接:
http://www.dynamicdrive.com/dynamicindex3/tabdocviewer.htm
译文原文链接:
英文水平有限,如发现存在翻译错误,请反馈给我,我将及时修改。
联系方式: easwy.yang - at - gmail.com
Easwy
2006/7/31
描述
通过使用多页接口,这个DHTML脚本允许你在页面中嵌入外部web页面(使用了IFRAME标记)。我们还引入一个新特性,允许用户在需要时在整个浏览器中载入页面。这个脚本支持IE 5及更高版本、Firefox 1.0及更高版本、Netscape 6及更高版本、Oper 7及更高版本,Firefox beta版本应该也可以支持。在其它不支持的浏览器中分页会显示成正常的链接。非常 酷!
示例
(请选择英文链接,观看示例 --- 译者注)
步骤
1. 将下面的CSS和DHTML脚本加入页面的<HEAD>部分:
如果想更改分页标签的外观(也就是颜色),编辑CSS就可以了。没有必要更改DHTML脚本。
2. 把下面的代码加入到<BODY>部分:
上面的HTML代码描述了tab的链接和IFRAME标记,用以载入外部页面。把URL改成你需要的。
现在,如果你有很多的分页链接,你可以增加一个分隔符,把它们显示在不同的行上。
[译者序]
几天前因工作需要做一些web页面的prototype,需要使用这个技术,在 http://www.dynamicdrive.com/看到这个脚本,将其翻译成中文。
本文将随原文更新而更新,或者因修正翻译失误而更新,因此,请尽量不要转载,避免其它人因为看到不同的版本而产生迷惑。
如确需转载,请保留译者序部分。
英文原文链接:
http://www.dynamicdrive.com/dynamicindex3/tabdocviewer.htm
译文原文链接:
英文水平有限,如发现存在翻译错误,请反馈给我,我将及时修改。
联系方式: easwy.yang - at - gmail.com
Easwy
2006/7/31
描述
通过使用多页接口,这个DHTML脚本允许你在页面中嵌入外部web页面(使用了IFRAME标记)。我们还引入一个新特性,允许用户在需要时在整个浏览器中载入页面。这个脚本支持IE 5及更高版本、Firefox 1.0及更高版本、Netscape 6及更高版本、Oper 7及更高版本,Firefox beta版本应该也可以支持。在其它不支持的浏览器中分页会显示成正常的链接。非常 酷!
示例
(请选择英文链接,观看示例 --- 译者注)
步骤
1. 将下面的CSS和DHTML脚本加入页面的<HEAD>部分:
<style type="text/css">
/* Eric Meyer's based CSS tab */
#tablist {
padding : 3px 0 ;
margin-left : 0 ;
margin-bottom : 0 ;
margin-top : 0.1em ;
font : bold 12px Verdana ;
}
#tablist li {
list-style : none ;
display : inline ;
margin : 0 ;
}
#tablist li a {
text-decoration : none ;
padding : 3px 0.5em ;
margin-left : 3px ;
border : 1px solid #778 ;
border-bottom : none ;
background : white ;
}
#tablist li a:link, #tablist li a:visited {
color : navy ;
}
#tablist li a:hover {
color : #000000 ;
background : #C1C1FF ;
border-color : #227 ;
}
#tablist li a.current {
background : lightyellow ;
}
</style>
/* Eric Meyer's based CSS tab */
#tablist {
padding : 3px 0 ;
margin-left : 0 ;
margin-bottom : 0 ;
margin-top : 0.1em ;
font : bold 12px Verdana ;
}
#tablist li {
list-style : none ;
display : inline ;
margin : 0 ;
}
#tablist li a {
text-decoration : none ;
padding : 3px 0.5em ;
margin-left : 3px ;
border : 1px solid #778 ;
border-bottom : none ;
background : white ;
}
#tablist li a:link, #tablist li a:visited {
color : navy ;
}
#tablist li a:hover {
color : #000000 ;
background : #C1C1FF ;
border-color : #227 ;
}
#tablist li a.current {
background : lightyellow ;
}
</style>
<
script type
=
"
text/javascript
"
>
/* **********************************************
* Tabbed Document Viewer script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
********************************************** */
var selectedtablink = ""
var tcischecked = false
function handlelink(aobject){
selectedtablink = aobject.href
tcischecked = (document.tabcontrol && document.tabcontrol.tabcheck.checked) ? true : false
if (document.getElementById && ! tcischecked){
var tabobj = document.getElementById( " tablist " )
var tabobjlinks = tabobj.getElementsByTagName( " A " )
for (i = 0 ; i < tabobjlinks.length; i ++ )
tabobjlinks[i].className = ""
aobject.className = " current "
document.getElementById( " tabiframe " ).src = selectedtablink
return false
}
else
return true
}
function handleview(){
tcischecked = document.tabcontrol.tabcheck.checked
if (document.getElementById && tcischecked){
if (selectedtablink != "" )
window.location = selectedtablink
}
}
</ script >
/* **********************************************
* Tabbed Document Viewer script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
********************************************** */
var selectedtablink = ""
var tcischecked = false
function handlelink(aobject){
selectedtablink = aobject.href
tcischecked = (document.tabcontrol && document.tabcontrol.tabcheck.checked) ? true : false
if (document.getElementById && ! tcischecked){
var tabobj = document.getElementById( " tablist " )
var tabobjlinks = tabobj.getElementsByTagName( " A " )
for (i = 0 ; i < tabobjlinks.length; i ++ )
tabobjlinks[i].className = ""
aobject.className = " current "
document.getElementById( " tabiframe " ).src = selectedtablink
return false
}
else
return true
}
function handleview(){
tcischecked = document.tabcontrol.tabcheck.checked
if (document.getElementById && tcischecked){
if (selectedtablink != "" )
window.location = selectedtablink
}
}
</ script >
如果想更改分页标签的外观(也就是颜色),编辑CSS就可以了。没有必要更改DHTML脚本。
2. 把下面的代码加入到<BODY>部分:
<
ul
id
="tablist"
>
< li >< a class ="current" href ="http://www.google.com" onClick ="return handlelink(this)" > Google </ a ></ li >
< li >< a href ="http://www.yahoo.com" onClick ="return handlelink(this)" > Yahoo </ a ></ li >
< li >< a href ="http://www.msn.com" onClick ="return handlelink(this)" > MSN </ a ></ li >
< li >< a href ="http://www.news.com" onClick ="return handlelink(this)" > News.com </ a ></ li >
< li >< a href ="http://www.dynamicdrive.com" onClick ="return handlelink(this)" > Dynamic Drive </ a ></ li >
</ ul >
< iframe id ="tabiframe" src ="http://www.google.com" width ="98%" height ="350px" ></ iframe >
< form name ="tabcontrol" style ="margin-top:0" >
< input name ="tabcheck" type ="checkbox" onClick ="handleview()" > Open tab links in browser window instead.
</ form >
< li >< a class ="current" href ="http://www.google.com" onClick ="return handlelink(this)" > Google </ a ></ li >
< li >< a href ="http://www.yahoo.com" onClick ="return handlelink(this)" > Yahoo </ a ></ li >
< li >< a href ="http://www.msn.com" onClick ="return handlelink(this)" > MSN </ a ></ li >
< li >< a href ="http://www.news.com" onClick ="return handlelink(this)" > News.com </ a ></ li >
< li >< a href ="http://www.dynamicdrive.com" onClick ="return handlelink(this)" > Dynamic Drive </ a ></ li >
</ ul >
< iframe id ="tabiframe" src ="http://www.google.com" width ="98%" height ="350px" ></ iframe >
< form name ="tabcontrol" style ="margin-top:0" >
< input name ="tabcheck" type ="checkbox" onClick ="handleview()" > Open tab links in browser window instead.
</ form >
上面的HTML代码描述了tab的链接和IFRAME标记,用以载入外部页面。把URL改成你需要的。
现在,如果你有很多的分页链接,你可以增加一个分隔符,把它们显示在不同的行上。
<ul id="tablist">
<li><a class="current" href="#">Google</a></li>
<li><a href="#">Yahoo</a></li>
<li><a href="#">MSN</a></li>
<div style="margin-bottom: 8px"></div>
<li><a href="#">News.com</a></li>
<li><a href="#">Dynamic Drive</a></li>
</ul>
<li><a class="current" href="#">Google</a></li>
<li><a href="#">Yahoo</a></li>
<li><a href="#">MSN</a></li>
<div style="margin-bottom: 8px"></div>
<li><a href="#">News.com</a></li>
<li><a href="#">Dynamic Drive</a></li>
</ul>