快捷導(dǎo)航

發(fā)一個(gè)比較漂亮的選項(xiàng)卡動(dòng)態(tài)增刪的效果

更新時(shí)間：2007年09月28日 20:04:16 作者：

先放個(gè)圖片，我改下代碼。

<html> <head>     <title>163郵箱選項(xiàng)卡效果</title>          <style>         ul,li         {             margin:0;             padding:0;             list-style:none;             /*for close location*/             position:relative;             }         li         {             display:block;             width:130px;             height:25px;             float:left;             cursor:pointer;             overflow:hidden;         }         span         {             font-size:10pt;             color:#22b5d9;             font-weight:bold;             display:block;         }         #asgardCard li         {             font-size:10pt;             font-weight:bold;             color:#22b5d9;             border:1px solid #22b5d9;             margin:10px;             text-align:center;             line-height:1.5;         }     </style>          <style>         /*Asgard CardProgram Css Start*/         #itemsPanel,#itemsPanel li         {             margin:0;             padding:0;             list-style:none;             /*for close location*/             position:relative;             }         /*Clear Float：Referrence-->http://www.blueidea.com/tech/web/2005/3065.asp*/         /*There is defect:the attribute-content hold one line place.*/         ul:after         {             content: ".";              display: block;             height: 0;              clear: both;              visibility: hidden;         }         #cardContent         {             height:auto;             min-height:300px;             border:2px solid #cccccc;             clear:both;         }         #itemsPanel li         {             display:block;             width:130px;             height:25px;             float:left;             cursor:pointer;             overflow:hidden;         }         #cardFrame         {             width:100%;height:100%;border:1px solid #ffffff;margin:0;         }         .active         {                         background:url('http://www.fzitv.net//upload/20070928200415937.jpg') 0 0 no-repeat;         }                 .default         {             background:url('http://www.fzitv.net//upload/20070928200415937.jpg') 0 -25px no-repeat;         }         .title         {             font-size:10pt;             font-weight:bold;             line-height:2;             padding-left:10px;             display:block;             width:105px;             height:25px;         }         li .close         {                         position:absolute;             top:9px;             left:115px;             display:block;             width:10px;             height:10px;             overflow:hidden;         }         .active .close         {             background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') 0 -50px no-repeat;         }         .default .title         {             color:#999999;         }         .active .title         {             color:#000000;         }         .active .close:hover         {             background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -10px -50px no-repeat;         }         .default .close         {             background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -20px -50px no-repeat;         }         .default .close:hover         {             background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -30px -50px no-repeat;         }         /*Asgard CardProgram Css End*/     </style> </head> <body> <span>1.代碼效果示例：</span> <ul>         <li id="wppm3vysvbp"    class="active">         <nobr class="title">Kiss</nobr>         <a href="#nogo" class="close" title="關(guān)閉"></a>     </li>     <li id="wppm3vysvbp"    class="default">         <nobr class="title">Andy</nobr>         <a href="#nogo" class="close" title="關(guān)閉"></a>     </li>     </ul> <p /> <span>注：以上代碼為DOM動(dòng)態(tài)組織的代碼參考<span> <p style="clear:both;"/> <p /> <span>2.點(diǎn)擊下表，更換內(nèi)容</span> <ul id="asgardCard"> <li title="blueidea">藍(lán)色理想</li> <li title="google">Google中國(guó)</li> <li title="email126">Email-126</li> <li title="ngacn">艾澤拉斯</li> </ul> <p style="clear:both;"/> <span>3.以下為動(dòng)態(tài)創(chuàng)建：</span> <div>     <ul id="itemsPanel">     </ul>     <div   class="wppm3vysvbp"   id="cardContent">     <iframe id="cardFrame">     </iframe>     </div> </div> </body>   </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

代碼說(shuō)明
1.我的CSS分割為2段了，第一段為此演視用，可自己定制，第二段為此框架必須。
2.script我也分割為2段，第一段為必須，第二段為客戶定制的，我這里的代碼是給一個(gè)實(shí)現(xiàn)參考。
3.以下的HTML代碼為參考實(shí)現(xiàn)的必須容器代碼

復(fù)制代碼代碼如下:

<ul id="itemsPanel"> 
</ul> 
<div id="cardContent"> 
    <iframe id="cardFrame"> 
    </iframe> 
</div>

使用介紹:
1.ItemsPanel對(duì)象
   構(gòu)造方法：new Asgard.CardProgram.ItemsPanel("itemsPanel","cardFrame").
   接受的2個(gè)參數(shù)，第一個(gè)為ul容器ID，第二個(gè)為我們需要展現(xiàn)標(biāo)簽對(duì)應(yīng)的內(nèi)容的irame的ID 。
   ItemPanel對(duì)象使用addItem方法添加Item。
   如果你需要?jiǎng)?chuàng)建多個(gè)ItemsPanel，可以自己參考我的范例來(lái)進(jìn)行。
2.Item對(duì)象
   構(gòu)造方法：new Asgard.CardProgram.Item("index","時(shí)空創(chuàng)意","http://www.skst.com.cn",true)接受4個(gè)參數(shù)
   第一個(gè)為打算創(chuàng)建的選項(xiàng)卡的id，第二個(gè)為打算創(chuàng)建的選項(xiàng)卡的標(biāo)題，第三個(gè)為此選項(xiàng)卡對(duì)應(yīng)的URL，第四個(gè)為是否為首頁(yè)，因?yàn)槲覀円苍S會(huì)打算創(chuàng)建一個(gè)默認(rèn)頁(yè)面不允許關(guān)閉。當(dāng)然如果你全部設(shè)置為true，那么也就是正常的選項(xiàng)卡效果了。