dojo小例子（36）ResizableDialog widget可缩放对话框

最新推荐文章于 2021-12-20 16:49:28 发布

earthhour

最新推荐文章于 2021-12-20 16:49:28 发布

阅读量1.5k

点赞数

分类专栏： dojo 文章标签： dojo Resizable Dialog widget

本文链接：https://blog.csdn.net/earthhour/article/details/49185193

版权

dojo 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

给dialog增加缩放功能

define([
	"dojo/_base/declare",
	"dijit/_WidgetBase",
	"dijit/_TemplatedMixin",
	"dijit/_WidgetsInTemplateMixin",
	"dojox/layout/ResizeHandle",
	"dojox/widget/DialogSimple"
],function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, ResizeHandle, DialogSimple){

	return declare([DialogSimple], {
		templateString: '<div class="dijitDialog" role="dialog" aria-labelledby="${id}_title">	<div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">		<span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="${id}_title"				role="heading" level="1"></span>		<span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="${buttonCancel}" role="button" tabindex="-1">			<span data-dojo-attach-point="closeText" class="closeText" title="${buttonCancel}">x</span>		</span>	</div>	<div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent"></div>	<span dojoAttachPoint="resizeHandle" class="dojoxFloatingResizeHandle"></span></div>',
		
		resizable: false,
		
		resizeAxis: "xy",
		
		postCreate: function(){
			this.inherited(arguments);
			if(!this.resizable){
				this.resizeHandle.style.display = "none"; 	
			}
		},
		
		startup: function(){
			this.inherited(arguments);
			if (this.resizable) {
				this.containerNode.style.overflow = "auto";
				this._resizeHandle = new ResizeHandle({
					targetId: this.id,
					resizeAxis: this.resizeAxis
				},this.resizeHandle);
			}
		},
		
		hide: function() {
			this.onHide();
			this.inherited(arguments);
		},
			
		onHide: function () {
			
		}
		
	});
});

<div data-dojo-type="my/ResizableDialog" id="selectDlg" data-dojo-props="title:'选择', resizable:true, href:'mot/selectDlg.html'"></div>
<button type="button" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitIconSearch'" οnclick="dijit.byId('selectDlg').show();">选择</button>