注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

为dojo dialog加上resize功能  

2014-04-10 21:36:30|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在使用dojo dialog时候,发现它没有resize功能,这时候该怎莫办呢?
很简单,为其加上dojox.layout.ResizeHandle就行。
看例子,基于《关于dojo dialog和form的最佳用法》的例子,在模板中加上ResizeHandle,注意模板中最后一行

<div data-dojo-type="dijit/form/Form" data-dojo-id="instance_Form" style="width:400px;">
<table class="dijitDialogPaneContentArea">
<tr>
<td><label for="Name">Name:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="Name" id="instance_label"></td>
</tr>
<tr>
<td><label for="Type">Type:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="Type" id="instance_Type"></td>
</tr>
<tr>
<td>Properties:</td><td></td>
</tr>
<tr>
<td><label for="ImageId">ImageId:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="ImageId" id="instance_ImageId"></td>
</tr>
<tr>
<td><label for="InstanceType">InstanceType:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="InstanceType" id="instance_InstanceType"></td>
</tr>
<tr>
<td><label for="KeyName">KeyName:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="KeyName" id="instance_KeyName"></td>
</tr>
<tr>
<td><label for="UserData">UserData:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="UserData" id="instance_UserData"></td>
</tr>
</table>
</div>
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit/form/Button" data-dojo-id="instance_Submit" type="button" id="instance_ok">OK</button>
<button data-dojo-type="dijit/form/Button" data-dojo-id="instance_Cancel" type="button" id="instance_cancel">Cancel</button>
</div>
<div data-dojo-type="dojox.layout.ResizeHandle" data-dojo-id="instance_resize" data-dojo-props="resizeAxis:'xy'"></div>

dialog.js 无任何变化。
实际使用中,我们需要将要改变的元素id注册到Resizehandle实例中

require("myModule/dialog", function(dialogs){
var dialog = dialogs.instance;

//通过children拿到html中各组件
var children = dialog.getChildren();
var form = children[0];

//通过form表达,我们可以setValues和getValues,还可以校验.
var submitButton = children[1];
var cancelButton = children[2];

submitButton.onClick = function(){
var values = form.getValues();
dialog.hide();
};
cancelButton.onClick = function(){
dialog.hide();
};

//注册resize要处理的目标,这里rezise的是form对象,因为button区域和Dialog Title区域不需要放大

var resizeHandler = children[3];
resizeHandler.set("targetId", form.id);


dialog.show();

});

其他注意事项
1.导入resize的CSS:

<link rel="stylesheet" href="path/to/dojo/dojox/layout/resources/ResizeHandle.css" />
2.resize的目标元素的样式 position:relative;

直接看效果吧!
为dojo dialog加上resize功能 - 星期五 - 星期五
 
参考资料:
http://dojotoolkit.org/reference-guide/1.9/dojox/layout/ResizeHandle.html#dojox-layout-resizehandle

  评论这张
 
阅读(530)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017