扩展Google Closure的UI库:支持z-index的Dialog

上头一句命令,J工程由jQuery转到Google closure,于是挨踢民工的命运就是在每天在xxx库/xxx技术的海洋里沉浮

首先拿jQuery+bootstrap写的W工程中的一个功能练手,使用closure重写作为Demo
几点感想:
1. closure API超级罗嗦,jQuery的ID选择功能$('#some-id'),到closure就变成goog.dom.getElement('some-id')
这个还算短的呢,创建一个OK按钮:goog.ui.Dialog.ButtonSet.createOk(),想使用一个常量:goog.ui.Dialog.EventType.SELECT
2. closure很大,功能也很完善,第三方的库到目前为止还没需要
3. closure compiler还没试,但有maven上的plugin,这个超级棒,在打war包时同时完成编译和压缩js
4. closure的UI构造风格和jQuery UI/bootstrap不一样,jQuery UI/bootstrap对设计师更加友好,设计师不懂代码也可以写html和css,有利于分工,而closure UI的html由程序生成,写代码的人还要兼顾设计
5. closure的实现还是写得很明了的,也不亏它的命名又长又臭。从Dialog扩展一个支持z-index的ZindexDialog,余看了一下源码就能猜到是怎么回事。closure的源码比ExtJS的容易看懂

支持z-index的ZindexDialog源码:

/**
 * @author kuyur@kuyur.info
 */

goog.provide('justblog.ui.ZindexDialog');

goog.require('goog.ui.Dialog');

/**
 * @constructor
 * @param {string=} opt_class CSS class name for the dialog element, also used
 *     as a class name prefix for related elements; defaults to modal-dialog.
 * @param {boolean=} opt_useIframeMask Work around windowed controls z-index
 *     issue by using an iframe instead of a div for bg element.
 * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper; see {@link
 *     goog.ui.Component} for semantics.
 * @extends {goog.ui.Dialog}
 */
justblog.ui.ZindexDialog = function(opt_class, opt_useIframeMask, opt_domHelper) {
	goog.base(this, opt_class, opt_useIframeMask, opt_domHelper);
	this.zindex_ = 0;
};
goog.inherits(justblog.ui.ZindexDialog, goog.ui.Dialog);

/**
 * @type {number}
 * @private
 */
justblog.ui.ZindexDialog.prototype.zindex_;

/**
 * Set z-index for the dialog.
 * @param {number} zindex
 */
justblog.ui.ZindexDialog.prototype.setZindex = function(zindex) {
	if (zindex == this.zindex_) {
		return;
	}
	this.zindex_ = zindex;
	this.renderIfNoDom_();

	var dlgEl = this.getElement();
	if (dlgEl) {
		var bgEl = this.getBackgroundElement();
		if (bgEl) {
			bgEl.style.zIndex = zindex;
		}
		dlgEl.style.zIndex = zindex;
	}
};

使用:
自定义模块的调用需要一些工作,可以参考:http://stackoverflow.com/questions/1918996/how-can-i-load-my-own-js-module-with-goog-provide-and-goog-require

在deps.js添加

goog.addDependency('pathToCustomUI/zindexdialog.js', ['justblog.ui.ZindexDialog'], ['goog.ui.Dialog']);

或者制作自己deps.js

demo代码:

goog.require('goog.ui.CustomButton');
goog.require('goog.ui.Dialog');
goog.require('goog.ui.Dialog.ButtonSet');
goog.require('justblog.ui.ZindexDialog');

var dlg = new justblog.ui.ZindexDialog();
dlg.setTitle('用户管理');
dlg.setContent('确定要删除用户吗?');
var buttons = new goog.ui.Dialog.ButtonSet();
buttons.addButton({caption: '取消', key: 'cancel'}, true, true);
buttons.addButton({caption: '确定', key: 'yes'});
dlg.setButtonSet(buttons);
dlg.createDom();
dlg.setZindex(1);
goog.dom.classes.add(dlg.getElement(), 'width-430px');
dlg.addEventListener(goog.ui.Dialog.EventType.SELECT, function(e) {
	if (e.key === "yes") {
		e.preventDefault();
		onYesClick();
	}
});

// ...

dlg.setVisible(true);

当有几个窗口同时处于弹出状态,又希望能控制遮盖关系时,使用setZindex即可设置堆叠顺序。
数字越大越在前。0是内置的默认值,设置成小于0,窗口将会被document覆盖

2013年2月21日 | 归档于 技术, 程序
  1. 2013年4月14日 14:10 | #1

    好详细的内容,学习一下

发表评论

XHTML: 您可以使用这些标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: