codecamp

DWX框架的HTML扩展(1)

HTML扩展

支持HTML扩展方式来调用DWZ组件

1.Ajax链接扩展

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

示例: 

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

当前navTab中链接ajax post扩展
<a href="user.do?method=remove"target="ajaxTodo">删除</a>

<a href="user.do?method=remove"target="ajaxTodo"title="确定要删除吗?">删除</a>
Title为可选项,如果设置,点击后将调用alertMsg.confirm与用户交互确认或取消,Title值为提示信息.Target值为ajaxTodo时会自动关联如下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链接扩展

<a href=”xxx” target=“dialog”[rel=“dialogId”]>
A所指向页面将会在dialog 弹出层中打开,rel标识此弹出层的ID,rel为可选项。
Html标签扩展方式示例:
<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="[自定义标题]" width="800" height="480">打开窗口一</a>
Max 属性表示此dialog打开时默认最大化, mask表示打开层后将背景遮盖. maxable: dialog 是否可最大化,
  • minable:   dialog 是否可最小化,
  • maxable:   dialog 是否可最大化
  • resizable: dialog 是否可变大小
  • drawable: dialog 是否可拖动
  • width:   dialog 打开时的默认宽度
  • height:    dialog 打开时默认的高度
  • width,height分别打开dialog时的宽度与高度.
  • fresh:   重复打开dialog时是否重新载入数据,默认值true,
  • close:   关闭dialog时的监听函数,需要有boolean类型的返回值,
  • param:   close监听函数的参数列表,以json格式表示,例{msg:’message’}
 
关闭窗口:
在弹出窗口页面内放置<button class="close" value="关闭"></button>即可。

JS调用方式示例:
$.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’}”}, 所有参数都是可选项。
关闭dialog层: 
$.pdialog.close(dialog); 参数dialog可以是弹出层jQuery对象或者是打开dialog层时的dlgId.
或者
$.pdialog.closeCurrent(); 关闭当前活动层。
 
$.pdialog.reload(url, {data:{}, dialogId:"",callback:null})
刷新dialogId指定的dialog,url:刷新时可重新指定加载数据的url, data:为加载数据时所需的参数。

3.navTab链接扩展

<a href=”xxx” target=“navTab”[rel=“tabId”]>
示例:
<a href="url" target="navTab" >默认页面</a>
<a href="url" target="navTab" rel="page1" title="自定义标签名" fresh="false">自定义页面</a>
<a href="url" target="navTab" external="true">iframe方式打开</a>
target=navTab: 自动关联调用navTab组件
rel: 为navtab的ID值,后续可以用来重载该页面时使用,如当前页新增或删除数据可以通过该ID进行通知JS重载。注意rel的值区分大小写.
fresh: 表示重复打开navTab时是否重新加载数据

external: 为external="true"或者href是外网连接时,以iframe方式打开navTab页面


Js调用
navTab.openTab(tabid, url, { title:”New Tab”, fresh:false, data:{} });
其中data:{} json格式的数据
DWZ富客户端框架(jUI)-简介
DWX框架的HTML扩展(2)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }