DWX框架的HTML擴(kuò)展(1)

HTML擴(kuò)展

1.Ajax鏈接擴(kuò)展

<a href=”xxx” target=“ajax” [rel=“boxId”]>

示例: 

<ahref="w_alert.html" target="ajax" rel="container">提示窗口</a>

當(dāng)前navTab中鏈接ajax post擴(kuò)展

<a href="user.do?method=remove"target="ajaxTodo">刪除</a>

或

<a href="user.do?method=remove"target="ajaxTodo"title="確定要?jiǎng)h除嗎?">刪除</a>

Title為可選項(xiàng)，如果設(shè)置，點(diǎn)擊后將調(diào)用alertMsg.confirm與用戶交互確認(rèn)或取消，Title值為提示信息.Target值為ajaxTodo時(shí)會自動關(guān)聯(lián)如下JS。

$("a[target=ajaxTodo]", $p).each(function(){
    $(this).click(function(event){
       var $this = $(this);
       var title = $this.attr("title");
       if (title) {
           alertMsg.confirm(title, {
              okCall: function(){
                  ajaxTodo($this.attr("href"));
              }
           });
       } else {
           ajaxTodo($this.attr("href"));
       }
       event.preventDefault();
    });
});

2.dialog鏈接擴(kuò)展

<a href=”xxx” target=“dialog”[rel=“dialogId”]>

A所指向頁面將會在dialog 彈出層中打開，rel標(biāo)識此彈出層的ID，rel為可選項(xiàng)。
Html標(biāo)簽擴(kuò)展方式示例:

<a href="w_dialog.html" target="dialog"rel="page2">彈出窗口</a>

或

<a href="demo_page1.html"target="dialog" [max=true, mask=true, maxable=true,minable=true, resizable=true,drawable=true] rel="dlg_page1"title="[自定義標(biāo)題]" width="800" height="480">打開窗口一</a>

Max 屬性表示此dialog打開時(shí)默認(rèn)最大化, mask表示打開層后將背景遮蓋. maxable: dialog 是否可最大化，

• minable:   dialog 是否可最小化，
  
• maxable:   dialog 是否可最大化
  
• resizable: dialog 是否可變大小
  
• drawable: dialog 是否可拖動
  
• width:   dialog 打開時(shí)的默認(rèn)寬度
  
• height:    dialog 打開時(shí)默認(rèn)的高度
  
• width,height分別打開dialog時(shí)的寬度與高度．
  
• fresh:   重復(fù)打開dialog時(shí)是否重新載入數(shù)據(jù)，默認(rèn)值true,
  
• close:   關(guān)閉dialog時(shí)的監(jiān)聽函數(shù)，需要有boolean類型的返回值，
  
• param:   close監(jiān)聽函數(shù)的參數(shù)列表，以json格式表示，例{msg:’message’}
  

 
關(guān)閉窗口：
在彈出窗口頁面內(nèi)放置<button class="close" value="關(guān)閉"></button>即可。

JS調(diào)用方式示例:

$.pdialog.open(url, dlgId, title);

或

$.pdialog.open(url, dlgId, title, options);　
 
options:{width:100px,height:100px,max:true,mask:true,mixable:true,minable:true,resizable:true,drawable:true,fresh:true,close:”function”,param:”{msg:’message’}”}, 所有參數(shù)都是可選項(xiàng)。

關(guān)閉dialog層： 

$.pdialog.close(dialog); 參數(shù)dialog可以是彈出層jQuery對象或者是打開dialog層時(shí)的dlgId.

或者

$.pdialog.closeCurrent(); 關(guān)閉當(dāng)前活動層。
 
$.pdialog.reload(url, {data:{}, dialogId:"",callback:null})

刷新dialogId指定的dialog，url：刷新時(shí)可重新指定加載數(shù)據(jù)的url, data：為加載數(shù)據(jù)時(shí)所需的參數(shù)。

3.navTab鏈接擴(kuò)展

<a href=”xxx” target=“navTab”[rel=“tabId”]>

示例:

<a href="url" target="navTab" >默認(rèn)頁面</a>
<a href="url" target="navTab" rel="page1" title="自定義標(biāo)簽名" fresh="false">自定義頁面</a>
<a href="url" target="navTab" external="true">iframe方式打開</a>

target=navTab: 自動關(guān)聯(lián)調(diào)用navTab組件
rel: 為navtab的ID值，后續(xù)可以用來重載該頁面時(shí)使用，如當(dāng)前頁新增或刪除數(shù)據(jù)可以通過該ID進(jìn)行通知JS重載。注意rel的值區(qū)分大小寫.
fresh: 表示重復(fù)打開navTab時(shí)是否重新加載數(shù)據(jù)

external: 為external="true"或者h(yuǎn)ref是外網(wǎng)連接時(shí)，以iframe方式打開navTab頁面

Js調(diào)用

navTab.openTab(tabid, url, { title:”New Tab”, fresh:false, data:{} });

其中data:{} json格式的數(shù)據(jù)