阿林`alinBlog

 侧栏的显隐

阿林, 发表于:2009-01-07 17:20:09, 分类:asp 浏览( ) 评论( )  收藏这篇日志

<!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>

 暂无标签
正在读取日志的评论数据,请稍后……
正在加载日志评论签写框,请稍后……
成员登录通道
正在载入成员登录通道...
添加文章到网摘

添加到网摘:

BLOG 日历助手
正在载入日历助手...
BLOG 分类列表
BLOG 统计信息
正在载入统计信息...
BLOG 站内搜索

BLOG 日志归档
BLOG 最新评论
{$SideComment}
BLOG 最新留言
{$SideGB}
BLOG 友情链接