Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

API 文档 - Dialog（弹框） #3

Open
cssmagic opened this issue Feb 16, 2017 · 0 comments
Open

API 文档 - Dialog（弹框） #3

cssmagic opened this issue Feb 16, 2017 · 0 comments
Labels
doc

Comments

@cssmagic
Copy link
Member

cssmagic commented Feb 16, 2017 •
edited

API 文档 - Dialog（弹框）

API 设计

CMUI.dialog.show(elem, {
	autoHideDelay: <num>,	//(ms), default 0. 小于等于 0 的值表示不会自动隐藏
	//removeCloseBtn: <bool>,	// default false
	//clickMaskToHideDialog: <bool>, // default false
	//beforeShow: <fn>, // callback
	//afterShow: <fn>,
	//beforeHide: <fn>,
	//afterHide: <fn>,
})

CMUI.dialog.hide()

CMUI.dialog.create({
	tag: <string>,	// default 'div'
	id: <string>,	// default ''
	img: <url>,	//default '', no img
	title: <html>, // default '提示', no content
	content: <html>, // default '', no content
	btn: {
		primary: {
			tag: <string>, // default 'button', 可选 'a'
			innerHTML: <html>, // default '确定', 支持 HTML
			link: <url>, // default '', no link; if `action` presents or `tag` is not 'a', `link` takes on effect.
			className: [''], // default ['cm-btn', 'cm-btn-primary']
			action: <string>, // default '', no action
			canHideDialog: <bool>, // default false
		},
		minor: {
			className: [''], // default ['cm-btn', 'cm-btn-primary', 'cm-btn-bordered']
			/* 其它同上 */
		},
	},

})

// CMUI.dialog.replaceWith(elem, options) // 暂未实现

手工测试用例

// 啥都不指定，会有默认标题
CMUI.dialog.show(CMUI.dialog.create({}))

// 指定 ID
CMUI.dialog.show(CMUI.dialog.create({
	id: 'test-dialog',
}))

// 仅指定头图
CMUI.dialog.show(CMUI.dialog.create({
	img: 'http://file.baixing.net/201701/cmui-demo-dialog-img.png',
}))

// 仅指定标题
CMUI.dialog.show(CMUI.dialog.create({
	title: '<strong>粗体</strong>测试弹框标题',
}))

// 仅指定内容，会有默认标题
CMUI.dialog.show(CMUI.dialog.create({
	content: '<strong>粗体</strong>文字',
}))

// 指定头图、标题
CMUI.dialog.show(CMUI.dialog.create({
	img: 'http://file.baixing.net/201701/cmui-demo-dialog-img.png',
	title: '<strong>粗体</strong>测试弹框标题',
}))
// 指定头图、内容
CMUI.dialog.show(CMUI.dialog.create({
	img: 'http://file.baixing.net/201701/cmui-demo-dialog-img.png',
	content: '<strong>粗体</strong>文字',
}))

// 标题 + 内容
CMUI.dialog.show(CMUI.dialog.create({
	title: '<strong>粗体</strong>测试弹框标题',
	content: '<strong>粗体</strong>文字',
}))

// 主按钮不指定细节：有默认文字
CMUI.dialog.show(CMUI.dialog.create({
	btn: {
		primary: {},
	}
}))
// 主按钮指定标签：button
CMUI.dialog.show(CMUI.dialog.create({
	btn: {
		primary: {
			tag: 'button',
			action: 'test-action',
			className: 'cm-btn cm-btn-warning',
			link: 'http://www.abc.com/',
			innerHTML: '<strong>粗体</strong>文字',
			canHideDialog: true,
		},
	}
}))
// 主按钮指定标签：a
CMUI.dialog.show(CMUI.dialog.create({
	btn: {
		primary: {
			tag: 'a',
			action: 'test-action',
			className: 'cm-btn cm-btn-warning',
			link: 'http://www.abc.com/',
			innerHTML: '<strong>粗体</strong>文字',
			canHideDialog: true,
		},
	}
}))


// 次按钮不指定细节：有默认文字
CMUI.dialog.show(CMUI.dialog.create({
	btn: {
		minor: {},
	}
}))
// 次按钮指定标签：button
CMUI.dialog.show(CMUI.dialog.create({
	btn: {
		minor: {
			tag: 'button',
			action: 'test-action',
			className: 'cm-btn cm-btn-warning cm-btn-bordered',
			link: 'http://www.abc.com/',
			innerHTML: '<strong>粗体</strong>文字',
			canHideDialog: true,
		},
	}
}))
// 次按钮指定标签：a
CMUI.dialog.show(CMUI.dialog.create({
	btn: {
		minor: {
			tag: 'a',
			action: 'test-action',
			className: 'cm-btn cm-btn-warning cm-btn-bordered',
			link: 'http://www.abc.com/',
			innerHTML: '<strong>粗体</strong>文字',
			canHideDialog: true,
		},
	}
}))


// 指定头图时传入一个配置对象
CMUI.dialog.show(CMUI.dialog.create({
	img: {
		url: 'http://file.baixing.net/201701/cmui-demo-dialog-img.png',
	}
}))
CMUI.dialog.show(CMUI.dialog.create({
	img: {
		url: 'http://file.baixing.net/201701/cmui-demo-dialog-img.png',
		width: 100,
	}
}))
CMUI.dialog.show(CMUI.dialog.create({
	img: {
		url: 'http://file.baixing.net/201701/cmui-demo-dialog-img.png',
		height: 100,
	}
}))
CMUI.dialog.show(CMUI.dialog.create({
	img: {
		url: 'http://file.baixing.net/201701/cmui-demo-dialog-img.png',
		width: 100,
		height: 100,
	}
}))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
doc
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@cssmagic