动态显示更多信息(toggle_visible函数的运用)
当你需要显示很多信息,可页面却再没有足够的空间可以容纳的时候,你一般会如何解决类似问题呢?或硬塞进页面而不管是否美观简洁么?还是就让用户不断拉动滚动栏而不管用户是否觉得麻烦?还是增建新页面而迫使用户去不耐烦在不同页面之间跳转呢?我想如果你使真的想作一个美观而简洁的Web网站的话,上述提到的想法应该在你脑海中一闪而过时就应该被否定的!而在同一个页面动态的显示信息的想法无疑是一个不错的主意,在此我提供两种实现类似效果的代码:
<!--简单的动态显示
SimpleToggleVisibleElement.html
-->
<html>
<head>
<script type='text/javascript'>
function toggle_visible (elName) {
var el = document.getElementById (elName);
var isVisible = (el.style.visibility == "hidden") ? true : false;
el.style.visibility = isVisible ? "visible" : "hidden";
el.style.display = isVisible ? "inline" : "none";
}
</script>
</head>
<body>
<table border=0 width="35%" cellpadding="3">
<tr>
<td bgcolor="#404080" onclick="toggle_visible('divQOTD');">
<font color="#FFFFFF">
Quote of the Day
</font>
</td>
</tr>
<tr>
<td bgcolor="#E0E0E0">
<div id="divQOTD">
<em>"Outside of a dog, a book is man's best friend.
Inside of a dog it's too dark to read."</em>
-- Groucho Marx<br>
</div>
</td>
</tr>
</table>
</body>
</html>
注意:上边代码el.style.display必须设置,不然即使你设置了el.style.visibility属性,那原先该块状元素所占有的区域并未释放,虽然它已不可见!而设置了el.style.display则可空出了需要的空间,如此才达到我们的目的! ^_^SimpleToggleVisibleElement.html
-->
<html>
<head>
<script type='text/javascript'>
function toggle_visible (elName) {
var el = document.getElementById (elName);
var isVisible = (el.style.visibility == "hidden") ? true : false;
el.style.visibility = isVisible ? "visible" : "hidden";
el.style.display = isVisible ? "inline" : "none";
}
</script>
</head>
<body>
<table border=0 width="35%" cellpadding="3">
<tr>
<td bgcolor="#404080" onclick="toggle_visible('divQOTD');">
<font color="#FFFFFF">
Quote of the Day
</font>
</td>
</tr>
<tr>
<td bgcolor="#E0E0E0">
<div id="divQOTD">
<em>"Outside of a dog, a book is man's best friend.
Inside of a dog it's too dark to read."</em>
-- Groucho Marx<br>
</div>
</td>
</tr>
</table>
</body>
</html>
<!--利用dl dt dd 及image动态显示信息
ImageToggleVisibleElement.html
-->
<html>
<head>
<style>
dl{margin-top:0px;margin-bottom:0px}
ul{ margin-left:-12px;}
li{ list-style: url("arrow.gif");}
dt{ background-color: #000000;padding-left:5px;padding-top:2px;padding-bottom:2px;color:#ff9900}
</style>
<script type='text/javascript'>
//折叠标题
function toggleTitle(oTitle,oImage,me){
if( oTitle.style.display == "none"){
//oTitle.style.display="inline";
oTitle.style.display="";
oImage.src = "blueup.gif";
me.title = "单击此处可以折叠显示信息";
}else{
oTitle.style.display = "none";
oImage.src = "bluedrop.gif";
me.title = "单击此处可以展开显示信息";
}
}
</script>
</head>
<body>
<table width="35%" bgcolor="#E0E0E0">
<tr>
<td>
<dl>
<dt onclick="toggleTitle(content_01,img_01,this);" title="单击此处可以折叠显示信息">
<img src="blueup.gif" id="img_01">最新书籍
</dt>
<dd id="content_01">
<ul>
<li>Ajax Hacks(Ajax解密)</li>
<li>Ajax in Action(Ajax实战)</li>
<li>Javascript的早餐(英文版)</li>
<li>Pragmatic Ajax(Ajax之道)</li>
</ul>
</dd>
</dl>
</td>
</tr>
</table>
</body>
</html>
代码下载(完整文件):/Files/sunwangji/js.zip
ImageToggleVisibleElement.html
-->
<html>
<head>
<style>
dl{margin-top:0px;margin-bottom:0px}
ul{ margin-left:-12px;}
li{ list-style: url("arrow.gif");}
dt{ background-color: #000000;padding-left:5px;padding-top:2px;padding-bottom:2px;color:#ff9900}
</style>
<script type='text/javascript'>
//折叠标题
function toggleTitle(oTitle,oImage,me){
if( oTitle.style.display == "none"){
//oTitle.style.display="inline";
oTitle.style.display="";
oImage.src = "blueup.gif";
me.title = "单击此处可以折叠显示信息";
}else{
oTitle.style.display = "none";
oImage.src = "bluedrop.gif";
me.title = "单击此处可以展开显示信息";
}
}
</script>
</head>
<body>
<table width="35%" bgcolor="#E0E0E0">
<tr>
<td>
<dl>
<dt onclick="toggleTitle(content_01,img_01,this);" title="单击此处可以折叠显示信息">
<img src="blueup.gif" id="img_01">最新书籍
</dt>
<dd id="content_01">
<ul>
<li>Ajax Hacks(Ajax解密)</li>
<li>Ajax in Action(Ajax实战)</li>
<li>Javascript的早餐(英文版)</li>
<li>Pragmatic Ajax(Ajax之道)</li>
</ul>
</dd>
</dl>
</td>
</tr>
</table>
</body>
</html>
