这个Hack叫Combo-Box Viewer ，名字听起来很酷，其实是很简单的代码。它是由两部分组成，一个下拉菜单，一个内容框，通过选择菜单里不同的项目，内容框里会相应地显示不同的信息。一个css一个js就可以实现。具体效果可以看这里。
实现方法：
1：备份模板
2：在<head></head>间添加下列代码，以引用脚本文件（其中的脚本文件建议自己保存并上传到自己的网络硬盘里）<script src='http://bryant0315.googlepages.com/combobox.js' type='text/javascript'/>3：添加一个css以控制内容框的样式，代码如下.dropcontent{4：保存模版
width: 300px;
height: 140px;
border: 1px solid black;
background-color: #FFECC6;
display:block;
}
5：现在添加具体内容
添加一个widget，代码如下<form name="dropmsgform">6：保存
<select name="dropmsgoption" style="width:300" onChange="expandone()">
<option selected>What is JavaScript?</option>
<option>Difference betwen Java and JavaScript</option>
<option>What is DHTML?</option>
</select>
<br>
<div id="dropmsg0" class="dropcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>
<div id="dropmsg1" class="dropcontent">
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.
</div>
<div id="dropmsg2" class="dropcontent">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>
</form>
代码讲解：1：widget的第一部分是一个表单，<option>和</option>之间是菜单里每个项目的标题，这里共有三个项目。第一个<option>不同，由于是预先要显示的，所以要加一个selected
2：第二部分是三个内容框，被<div>包围着，每个内容框都有一个唯一的ID，如代码橘黄色部分。<div>和</div>之间是要显示的内容。
这个Hack大致就是这样，比较简单，你可以把它放在侧边栏，不需要占用太大空间，就可以通过菜单选择不同的内容浏览。十分方便，大家不妨试一试。
CSS精彩实例(四)——Combo-Box Viewer
|
标签：
CSS
|
|
订阅：
博文评论 (Atom)
0 评论:
发表评论