divcss布局:Div 布局 实现侧栏的显隐来源: 发布时间:星期日, 2008年12月14日 浏览:20次 评论:0
首先考虑这个功能
 实现思路 假设整个页面分为左右两栏  通过菜单上 个按钮来控制左侧栏显示和隐藏右侧主栏宽度也要根据左侧栏显隐来自动调节实现此功能无非就是通过脚本来设置左侧栏宽度同时根据页面宽度来计算右边主侧栏动态宽度要了解页面 宽度可以通过 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; char  =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 { (parseInt(objSideBar.style.width) != 0) {objSideBar.style.width = \"0px\";objSideBar.innerHTML = \"\";objCtrl.innerHTML = \"显示侧栏\";} {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 _disibledevent=\"查看举例\">颜色选择器</a></p><p>顺便提个想法:当上传图片时候是否可以分析图片包含色彩信息计算出其中出现频率最高种色彩从而作为该图片主体色以实现图片按照主体色分类？！</p></div></div></body></html>0
相关文章
读者评论
发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
