發(fā)一個(gè)比較漂亮的選項(xiàng)卡動(dòng)態(tài)增刪的效果
更新時(shí)間:2007年09月28日 20:04:16 作者:
先放個(gè)圖片,我改下代碼。

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
代碼說(shuō)明
1.我的CSS分割為2段了,第一段為此演視用,可自己定制,第二段為此框架必須。
2.script我也分割為2段,第一段為必須,第二段為客戶定制的,我這里的代碼是給一個(gè)實(shí)現(xiàn)參考。
3.以下的HTML代碼為參考實(shí)現(xiàn)的必須容器代碼
<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)卡效果了。

[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)卡效果了。
相關(guān)文章
用dtree實(shí)現(xiàn)樹(shù)形菜單 dtree使用說(shuō)明
本節(jié)主要介紹用dtree來(lái)實(shí)現(xiàn)樹(shù)形的菜單,需要的朋友可以參考下。2011-10-10新版本susymenu樹(shù)形菜單,請(qǐng)大家指教、分享
新版本susymenu樹(shù)形菜單,請(qǐng)大家指教、分享...2007-09-09幾個(gè)不錯(cuò)的自動(dòng)收縮菜單導(dǎo)航效果
幾個(gè)不錯(cuò)的自動(dòng)收縮菜單導(dǎo)航效果...2007-10-10