jBox的使用

最新推荐文章于 2024-11-08 11:55:28 发布

闪耀星星

最新推荐文章于 2024-11-08 11:55:28 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： jBox

本文链接：https://blog.youkuaiyun.com/zhchfsky/article/details/77776587

JS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个名为 jBox 的弹窗组件的使用方法，包括 Notice 提示框、Modal 对话框及 Confirm 确认框的具体配置选项与应用实例。通过 JavaScript 实现丰富的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载地址：https://github.com/StephanWagner/jBox

Notice

var box = new jBox('Notice', {
            overlay: false,
            color: "green",
            attributes: {
                x: 'left',
                y: 'top'
            },
            autoClose: false,
            content: "正在拉取分类……"
 });

autoClose可以是毫秒时间，false表示显示调用box.close()

Modal

页面

<div id="itemContainer" style="display:none;">弹出层内容</div>

productList.editBox = new jBox('Modal', {
	closeButton: 'title',
	title: "编辑商品",
	content: $("#itemContainer"),//页面元素 display:none
	draggable: 'title',//可以拖动
	width: 750,
	height: 260,
	maxWidth: 750,
	maxheight: 260,
	closeOnClick: false,
	ajax: {
		url: '/admin/getitem',
		data: {
			itemid: productId
		},
		dataType: "json",
		type: "POST",
		reload: 'strict',
		setContent: false,
		success: function (response) {
			if (response && response.item) {
				productList._initItem(response.item);
			}
			else {
				productList.editBox.close();
				new jBox('Notice', {
					overlay: false,
					color: "black",
					attributes: {
						x: 'left',
						y: 'top'
					},
					autoClose: 2000,
					content: "商品不存在"
				});

			}
		}
	},
	onclose: function () {
		productList.editBox = null;
	}
}).open();

//显示调用open

Confirm

productList.editBox = new jBox('Confirm', {
	content: $("#itemContainer"),
	adjustTracker: false,
	adjustPosition: false,
	reposition: false,
	draggable: 'title',
	width: productList._eidtBoxSize.width,
	height: productList._eidtBoxSize.height,
	maxWidth: productList._eidtBoxSize.width,
	maxheight: productList._eidtBoxSize.height,
	closeButton: 'title',
	attributes: {              
		x: 'left',
		y: 'top'
	},
	position: {
		x: 'center',
		y: 'center'
	},
	title: '编辑商品',
	closeOnConfirm:false,
	cancelButton: '关闭',
	confirmButton: '保存',
	confirm: function () {
		productList._saveProduct();
	},
	ajax: {
		url: '/admin/getitem',
		data: {
			itemid:productId
		},
		dataType: "json",
		type:"POST",
		reload: 'strict',
		setContent: false,
		success: function (response) {
			if (response && response.result) {
				productList._initProductInfo(response.result);
			}
			else {
				productList.editBox.close();
				new jBox('Notice', {
					overlay: false,
					color: "black",
					attributes: {
						x: 'left',
						y: 'top'
					},
					autoClose: 3000,
					content: "服务器忙，请稍后重试"
				});
			}
		},
		error: function () {
			productList.editBox.close();
			new jBox('Notice', {
				overlay: false,
				color: "black",
				attributes: {
					x: 'left',
					y: 'top'
				},
				autoClose: 3000,
				content: "服务器忙，请稍后重试"
			});
		}
	}
}).open();
//open需要显示调用