Div 布局，实现侧栏的显隐
看到不少人的 Blog 中已经应用到了现实或者隐藏侧栏的功能，例如 http://www.momocn.com/blog/ ，自己也尝试来实现这样一个功能。
首先考虑这个功能的实现思路。
假设整个页面分为左右两栏，通过菜单上的一个按钮来控制左侧栏的显示和隐藏，右侧主栏宽度也要根据左侧栏的显隐来自动调节。实现此功能，无非就是通过脚本来设置左侧栏宽度，同时根据页面宽度来计算右边的主侧栏动态宽度。
要了解页面的宽度，可以通过 document.body.clientWidth 来获得。而各栏的宽度通过 object.style.width 可以获得。
同时，我们要考虑另外一个情况，就是当用户更改窗口大小的时候，页面的布局也应该随之改变。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>侧栏显隐控制</title>
<style type="text/css">
<!--
body {
padding: 0;
/*margin: 0;*/
}
body, table, td, th, input, textarea, p, select, div, span {
font-size: 12px;
}
#ctrl {
line-height: 22px;
text-align: center;
width: 80px;
height: 22px;
/*margin-left: 12px;*/
border: 1px solid #DCDCDC;
cursor: default;
}
#box {
display: inline;
}
#sidebar {
background: #A3B2CC;
width: 200px;
float: left;
}
#contenter {
background: #D0D0D0;
width: 0;
float: left;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
var s;
var objCtrl;
var objSideBar;
var objContenter;
function showHideBar() {
if (parseInt(objSideBar.style.width) != 0) {
objSideBar.style.width = "0px";
objSideBar.innerHTML = "";
objCtrl.innerHTML = "显示侧栏";
}
else {
objSideBar.style.width = "200px";
objSideBar.innerHTML = s;
objCtrl.innerHTML = "隐藏侧栏";
}
objContenter.style.width = parseInt(document.body.clientWidth) - parseInt(objSideBar.style.width) + "px";
}
function initSideBar() {
objSideBar = document.getElementById("sidebar");
objCtrl = document.getElementById("ctrl");
objContenter = document.getElementById("contenter");
s = objSideBar.innerHTML;
objSideBar.style.width = "200px";
objSideBar.innerHTML = s;
objContenter.style.width = parseInt(document.body.clientWidth) - parseInt(objSideBar.style.width) + "px";
}
function resizeWindow() {
objContenter.style.width = parseInt(document.body.clientWidth) - parseInt(objSideBar.style.width) + "px";
}
-->
</script>
</head>
<body onload="initSideBar();" onresize="resizeWindow();">
<p id="ctrl" onclick="showHideBar();">隐藏侧栏</p>
<div id="box">
<div id="sidebar">
<ul>
<li><a href="http://www.purewhite.cn/archives/2005/09/post_4.html">站长资讯 新版论坛</a></li>
<li><a href="http://www.purewhite.cn/archives/2005/09/xmlhttprequest.html">XMLHttpRequest 和 AJAX</a></li>
<li><a href="http://www.purewhite.cn/archives/2005/08/opera.html">Opera 十周年庆，注册码免费提供</a></li>
<li><a href="
http://www.purewhite.cn/archives/2005/08/post_3.html">颜色选择器</a></li>
<li><a href="http://www.purewhite.cn/archives/2005/08/google_talk_v10.html">Google Talk V1.0.0.64 汉化版</a></li>
<li><a href="http://www.purewhite.cn/archives/2005/08/css_autoscroll.html">CSS 定制自动滚动(autoscroll)图片</a></li>
<li><a href="http://www.purewhite.cn/archives/2005/08/_v4.html">苹果树下 V4</a></li>
<li><a href="http://www.purewhite.cn/archives/2005/08/w3_schools.html">W3 Schools</a></li>
<li><a href="http://www.purewhite.cn/archives/2005/08/ado.html">ADO 中的数据库连接</a></li>
<li><a href="http://www.purewhite.cn/archives/2005/08/_w3orgcn.html">关于 w3.org.cn</a></li>
</ul>
</div>
<div id="contenter">
<p>颜色选择器(Color Picker)，在 Web 开发中应用应该是比较广泛的。在网上看过的颜色选择器也有很多种，而且很多功能相当强大。我这里制作这个最简单的颜色选择器，只是最为自己制作尝试的一部分——这个大概是因为我习惯于使用自己的东西的癖好有关。</p>
<p>实现过程很简单，因为总共是 216 种颜色，即 6 * 6 * 6，采用三层循环就可以实现了。演示中的代码，是本地的 ASP 程序生成的，其实也完全可以采用 JavaScript 来实现，可以减少代码量。我没有采用表格，而是利用“无序列表”结合 <acronym title="Cascading Style Sheets">CSS</acronym> 来实现的。加上一些控制的 JavaScript 。</p>
<p>示例：<a href="http://www.purewhite.cn/demo/showcolor.html" title="查看示例">颜色选择器</a></p>
<p>顺便提一个想法：当上传图片的时候，是否可以分析图片包含的色彩信息，计算出其中出现频率最高的一种色彩，从而作为该图片的主体色，以实现图片按照主体色分类？！</p>
</div>
</div>
</body>
</html>
声明：此文章部分或者全部内容来源于网络，如果侵犯到您的权利，请电邮我(dushizhuma(a)163.com)，我将在第一时间内删除此文章并送出我的歉意！
浙公网安备 33010602011771号