JavaScript tinper-sparrow/js/dom makeModal示例

示例#1

文件： neoui-dialog.js 项目： chellking/iuap-design

iframeDialogF.prototype.create = function() {
	var closeStr = '' ,footerStr ='';
	var oThis = this;
	if(this.hasCloseMenu) {
		var closeStr = '<div class="u-msg-close"> <span aria-hidden="true">&times;</span></div>';
	}
	if (this.hasFooter) {
		var footerStr = '<div class="u-msg-footer"><button class="u-msg-ok u-button u-button-primary raised">确定</button><button class="u-msg-cancel u-button">取消</button></div>' +
						'</div>';
	}
	var templateStr = this.template.replace('{close}', closeStr);
	templateStr = templateStr.replace('{url}',this.url);
	templateStr = templateStr.replace('{title}',this.title);
	templateStr = templateStr.replace('{footer}',footerStr);
	templateStr = templateStr.replace('{width}', this.width ? 'width:' + this.width + ';' : '');
	templateStr = templateStr.replace('{height}', this.height ? 'height:' + this.height + ';' : '');
	templateStr = templateStr.replace('{top}', this.top ? 'top:' + this.top + ';' : '');

	this.templateDom = makeDOM(templateStr);
	this.overlayDiv = makeModal(this.templateDom);



	if (this.hasCloseMenu) {
		this.closeDiv = this.templateDom.querySelector('.u-msg-close');
		on(this.closeDiv, 'click', function() {
			if(oThis.onClose() !== false) {
				oThis.close();
			}
		});
	}

	if (this.hasFooter) {
		var okBtn = this.templateDom.querySelector('.u-msg-ok');
		var cancelBtn = this.templateDom.querySelector('.u-msg-cancel');
		var closeBtn =
		new Button({
			el: okBtn
		});
		new Button({
			el: cancelBtn
		});
		on(okBtn, 'click', function() {
			if(oThis.onOk() !== false) {
				oThis.close();
			}
		})
		on(cancelBtn, 'click', function() {
			if(oThis.onCancel() !== false) {
				oThis.close();
			}
		})
	}

	document.body.appendChild(this.templateDom);
	this.isClosed = false;
};

示例#2

文件： neoui-dialog.js 项目： chellking/iuap-design

messageDialogF.prototype.create = function () {
	var self = this,
		closeStr = '';
	if (this.hasFooter) {
		var footerStr = '<div class="u-msg-footer only-one-btn"><button class="u-msg-ok u-button u-button-primary raised">' + this.bthText + '</button></div>' +
						'</div>';
	}
	var templateStr = this.template.replace('{id}', this.id).replace('{id}', this.id);
	templateStr = templateStr.replace('{width}', this.width ? 'width:' + this.width + ';' : '');
	templateStr = templateStr.replace('{height}', this.height ? 'height:' + this.height + ';' : '');
	templateStr = templateStr.replace('{top}', this.top ? 'top:' + this.top + ';' : '');
	templateStr = templateStr.replace('{title}', this.title);
	templateStr = templateStr.replace('{footer}', footerStr);
	var htmlReg = /^(\s*)?<[a-zA-Z]+/ig;
	var selectReg = /^(\.|#)/;
	if(htmlReg.test(this.content)){
		this.contentDom= makeDOM(this.content);
		this.contentDomParent = this.contentDom.parentNode;
		this.contentDom.style.display = 'block';
	}else if(selectReg.test(this.content)){
		this.contentDom = document.querySelector(this.content);
		this.contentDomParent = this.contentDom.parentNode;
		this.contentDom.style.display = 'block';
	}else{
		this.contentDom = makeDOM('<p>' + this.content + '</p>');
	}
	this.templateDom = makeDOM(templateStr);


	this.templateDom.querySelector('.u-msg-content').appendChild(this.contentDom);
	this.overlayDiv = makeModal(this.templateDom);

		this.okDiv = this.templateDom.querySelector('.u-msg-ok');
		on(this.okDiv, 'click', function() {
			self.close();
		});

	if(this.lazyShow) {
		this.templateDom.style.display = 'none';
		this.overlayDiv.style.display = 'none';
	}
	document.body.appendChild(this.templateDom);
	disable_mouseWheel();
	this.isClosed = false;
};

示例#3

文件： neoui-dialog.js 项目： chellking/iuap-design

dialogMode.prototype.create = function() {
	var closeStr = '',oThis = this;
	if(this.hasCloseMenu) {
		var closeStr = '<div class="u-msg-close"> <span aria-hidden="true">&times;</span></div>';
	}
	var templateStr = this.template.replace('{id}', this.id).replace('{id}', this.id);
	templateStr = templateStr.replace('{close}', closeStr);
	templateStr = templateStr.replace('{width}', this.width ? 'width:' + this.width + ';' : '');
	templateStr = templateStr.replace('{height}', this.height ? 'height:' + this.height + ';' : '');

	var htmlReg = /^(\s*)?<[a-zA-Z]+/ig;
	var selectReg = /^(\.|#)/;
	if(htmlReg.test(this.content)){
		this.contentDom= makeDOM(this.content);
		this.contentDomParent = this.contentDom.parentNode;
		this.contentDom.style.display = 'block';
	}else if(selectReg.test(this.content)){
		this.contentDom = document.querySelector(this.content);
		this.contentDomParent = this.contentDom.parentNode;
		this.contentDom.style.display = 'block';
	}else{
		this.contentDom = makeDOM('<div><div class="u-msg-content"><p>' + this.content + '</p></div></div>');
	}
	this.templateDom = makeDOM(templateStr);


	this.templateDom.querySelector('.u-msg-dialog-content').appendChild(this.contentDom);
	this.overlayDiv = makeModal(this.templateDom);
	if(this.hasCloseMenu) {
		this.closeDiv = this.templateDom.querySelector('.u-msg-close');
		on(this.closeDiv, 'click', function() {
			oThis.close();
		});
	}
	if(this.lazyShow) {
		this.templateDom.style.display = 'none';
		this.overlayDiv.style.display = 'none';
	}
	document.body.appendChild(this.templateDom);
	disable_mouseWheel();
	this.isClosed = false;
};

示例#4

文件： neoui-loader.js 项目： chellking/iuap-design

var showLoader = function(options) {
	// hasback:是否含有遮罩层，centerContent加载图标中的内容，parEle加载图标的父元素,hasDesc加载条说明
	var hasback, centerContent, template, parEle, templateDom, loadDesc;
	options = options || {};
	hasback = options["hasback"];
	centerContent = options["centerContent"] || '';
	// hasDesc=options["hasDesc"];
	template = loadTemplate.replace('{centerContent}', centerContent);
	loadDesc = options["hasDesc"] ? "<div class='u-loader-desc'>页面加载中，请稍候。。。</div>" : " ";

	template = template.replace("{loadDesc}", loadDesc);

	templateDom = makeDOM(template);
	parEle = options["parEle"] || document.body;
	if(hasback) {
		var overlayDiv = makeModal(templateDom, parEle);
	}
	addClass(overlayDiv, 'u-loader-back');
	if(parEle == document.body) {
		templateDom.style.position = 'fixed';
	}
	parEle.appendChild(templateDom);
};

示例#5

文件： neoui-dialog.js 项目： chellking/iuap-design

confirmDialogF.prototype.create = function () {
	var footerStr = '',oThis = this;
	if (this.hasFooter) {
	var footerStr = '<div class="u-msg-footer"><button class="u-msg-ok u-button u-button-primary raised">{okText}</button><button class="u-msg-cancel u-button u-grey">{cancelText}</button></div>' +
					'</div>';
				}
		var templateStr = this.template.replace('{id}', this.id).replace('{id}', this.id);
		templateStr = templateStr.replace('{title}',this.title);
		templateStr = templateStr.replace('{width}', this.width ? 'width:' + this.width + ';' : '');
		templateStr = templateStr.replace('{height}', this.height ? 'height:' + this.height + ';' : '');
		templateStr = templateStr.replace('{top}', this.top ? 'top:' + this.top + ';' : '');
		templateStr = templateStr.replace('{footer}',footerStr);
		templateStr = templateStr.replace('{okText}',this.okText);
		templateStr = templateStr.replace('{cancelText}',this.cancelText);
		var htmlReg = /^(\s*)?<[a-zA-Z]+/ig;
		var selectReg = /^(\.|#)/;
		if(htmlReg.test(this.content)){
			this.contentDom= makeDOM(this.content);
			this.contentDomParent = this.contentDom.parentNode;
			this.contentDom.style.display = 'block';
		}else if(selectReg.test(this.content)){
			this.contentDom = document.querySelector(this.content);
			this.contentDomParent = this.contentDom.parentNode;
			this.contentDom.style.display = 'block';
		}else{
			this.contentDom = makeDOM('<p>' + this.content + '</p>');
		}
	    /*头部只用图标 <a><i class="uf uf-"></i></a>*/
	    // this.titleIconDom = makeDOM('<a><i class="' + this.titleIcon + '"></i></a>');
		this.templateDom = makeDOM(templateStr);

        // this.templateDom.querySelector('.u-msg-title').appendChild(this.titleIconDom);
		this.templateDom.querySelector('.u-msg-content').appendChild(this.contentDom);
		this.overlayDiv = makeModal(this.templateDom);

		if(this.lazyShow) {
			this.templateDom.style.display = 'none';
			this.overlayDiv.style.display = 'none';
		}

		if (this.hasFooter) {
				var okBtn = this.templateDom.querySelector('.u-msg-ok');
				var cancelBtn = this.templateDom.querySelector('.u-msg-cancel');
				var closeBtn =
				new Button({
					el: okBtn
				});
				new Button({
					el: cancelBtn
				});
				on(okBtn, 'click', function() {
					if(oThis.onOk() !== false) {
						oThis.close();
					}
				})
				on(cancelBtn, 'click', function() {
					if(oThis.onCancel() !== false) {
						oThis.close();
					}
				})
			}

		document.body.appendChild(this.templateDom);
		disable_mouseWheel();
		this.isClosed = false;
};