首先考虑这个功能的实现思路。
假设整个页面分为左右两栏,通过菜单上的一个按钮来控制左侧栏的显示和隐藏,右侧主栏宽度也要根据左侧栏的显隐来自动调节。实现此功能,无非就是通过脚本来设置左侧栏宽度,同时根据页面宽度来计算右边的主侧栏动态宽度。
要了解页面的宽度,可以通过 document.body.clientWidth 来获得。而各栏的宽度通过 object.style.width 可以获得。
同时,我们要考虑另外一个情况,就是当用户更改窗口大小的时候,页面的布局也应该随之改变。
演示请看:http://www.purewhite.cn/demo/showHideBar.html
代码很简单,全部如下:
隐藏侧栏
颜色选择器(Color Picker),在 Web 开发中应用应该是比较广泛的。在网上看过的颜色选择器也有很多种,而且很多功能相当强大。我这里制作这个最简单的颜色选择器,只是最为自己制作尝试的一部分——这个大概是因为我习惯于使用自己的东西的癖好有关。
实现过程很简单,因为总共是 216 种颜色,即 6 * 6 * 6,采用三层循环就可以实现了。演示中的代码,是本地的 ASP 程序生成的,其实也完全可以采用 JavaScript 来实现,可以减少代码量。我没有采用表格,而是利用“无序列表”结合 CSS 来实现的。加上一些控制的 JavaScript 。
示例:颜色选择器
顺便提一个想法:当上传图片的时候,是否可以分析图片包含的色彩信息,计算出其中出现频率最高的一种色彩,从而作为该图片的主体色,以实现图片按照主体色分类?!
演示:http://www.purewhite.cn/demo/20060421001/
这个是通过 JavaScript 结合 CSS 实现的,简单明了。
IE 6 和 FF 1.5 下面测试均有效。