|
热门文章 |
|
|
|
相关文章 |
|
没有相关文章 |
|
|
关于选项卡效果的实现方法 |
来源:百度空间 更新时间:2010/8/4 0:03:13 阅读次数:
字体:[大 中 小大 中 小大 中 小] 我要投稿 |
1、什么是选项卡效果
严格地说,我们所说的选项卡原身是Windows操作系统的一个创意,即通过交换选项,让很多项目信息轮替显示在大小和位置都固定的小块区域里。因此选项卡具有占用篇幅小,辐射内容大的特点。一个典型的例子是你打开IE浏览器,依次点击“工具”-“Internet选项”,这个表单就是一个选项卡典型布局。当然了,这里我说的选项卡效果是要在Web页面实现的,并非应用程序里的菜单选项。
2、选项卡效果原理
说白了,选项卡就是事先准备若干钥匙和门,我们把钥匙串成一串交给浏览者,每把钥匙对应一扇门,浏览者手中掌握钥匙,要打开哪扇门看他自己的兴趣。当然了,每把钥匙对应的门也是网页设计者事先设计好了的。只不过,浏览者只能够每次打开一扇门并观看门里的内容,打开了另一扇门,就关闭了前一扇门。 好了,我们首先要准备若干把钥匙,索性命名为key。我们通常用项目列表<li>表现钥匙: <div id=”key”> <ul> <li id=”key1”>川菜菜谱</li> <li id=”key2”>沪菜菜谱</li> <li id=”key3”>东北菜谱</li> <li id=”key4”>淮扬菜谱</li> </ul> </div>
我们把门命名为detail。因为实际设计会有很多内容,我们把detail放在<div>里面,四把钥匙对应四扇门:
<div id=”detail1”> <ul> <li>雪花鸡淖</li> <li>火爆腰花</li> <li>酸辣臊子蹄筋</li> <li>炝黄瓜</li> <li>麻酱凤尾</li> <li>家常海参</li> <li>鲜花豆腐</li> <li>坛子肉</li> <li>鱼香牛肉丝</li> <li>参麦团鱼</li> </ul> </div> <div id=”detail2”> <ul> <li>八宝辣酱</li> <li>白肚</li> <li>火夹糟青鱼</li> <li>鸡火干丝</li> <li>鸡汁排翅</li> <li>上海锅贴</li> <li>八宝鸭</li> <li>白汁鮰鱼</li> <li>爆鱿鱼卷</li> <li>冰糖甲鱼</li> </ul> </div> <div id=”detail3”> <ul> <li>甩袖汤</li> <li>板栗烧鸡</li> <li>拌肉皮丝</li> <li>红烧肘子</li> <li>花椒嫩醉鸡</li> <li>熘肥肠</li> <li>茄汁草鱼片</li> <li>酸辣萝卜丝</li> <li>瑶柱鱼翅</li> <li>玉箸山珍</li> </ul> </div> <div id=”detail4”> <ul> <li>三丝敲鱼</li> <li>砂锅豆腐</li> <li>鲜豆腐皮炒青蟹肉</li> <li>白烧四宝</li> <li>脆皮卷</li> <li>淡菜炒笋尖</li> <li>冻鸭</li> <li>和合腰子</li> <li>荷花集锦炖</li> <li>红果拌梨丝</li> </ul> </div>
哈哈!搞了一些好吃的,不要流口水啦!我们把key并排排列,关键要用到Display:inline样式,给出全部CSS参考代码:
#key{ Width:410px; margin:0px; } #key ul{ List-type:none; Width:401px; Margin:0px; Padding:0px; } #key li{ background:url(button_bg1.gif) 0px 2px no-repeat; Display:inline; overflow:visible; Width:100px; Margin:0px; Padding:7px 10px; Text-align:center; Font-size:14px; Line-height:14px; letter-spacing:2px; }
因为detail层最开始是不可见的(至多设一个初始的“门”),所以我们用到的关键样式是display:none。给出CSS参考代码如下:
#detail1,#detail2,#detail3,#detail4{ Display:none; Width:400px; Border:1px #C84742 solid; Border-top-width:0px; Padding:10px 0px 0px 0px; Font-size:12px; Line-height:18px; }
钥匙和门都准备好了,下面我们来实现具体效果。当然是用javascript调用样式表了。在写出具体的代码之前,下面的伪代码有助于你理解全部流程:
<代码开始> 定义函数showDetail(层名称){ 首先将选中的钥匙改变为选中样式; var j; var id; var e;//为了以后调用方便,定义三个全局变量 设计一个循环,使得从第一把钥匙到最后一把钥匙轮替时{ id =钥匙+编号; j = 调用各把钥匙的编号; e = 调用的各扇门; 如果(钥匙+编号!= 选中钥匙的编号){ 将这把/些钥匙的样式还原为原始样式; 还要将这把/些钥匙所对应的门设为不可见; } 如果不是这样{ 则打开钥匙对应的门; } }//循环结束 }//函数结束 </代码结束>
希望大家已经看懂了上述伪代码,其实就是一个函数,一个循环,三个全局变量而已。
<script type="text/javascript"> function showDetail(obj){ document.getElementById(obj.id).style.background="url(button_bg2.gif)"; for(var i=1;i<=4;i++){ var id ="key"+i; var keyItem = document.getElementById(id); var detailItem = document.getElementById("detail"+i); if(id != obj.id){ document.getElementById(id).style.background="url(button_bg1.gif) 0px 2px no-repeat"; detailItem.style.display = "none"; } else{ detailItem.style.display = "block"; } } } </script>
做出最精彩的选项卡效果,关键之处是CSS样式,可以把背景做成漂亮的颜色变化的图片。本例侧重于讨论技术,一旦熟知了选项卡的作用原理,相信你会有属于自己的精彩创意! |
上一篇文章: 让HTML页面像ASP页面一样接受参数下一篇文章: 使用JS查找XML内部节点与属性值 |
|
|