jBox的使用
下载地址:https://github.com/StephanWagner/jBoxNoticevar box = new jBox('Notice', {overlay: false,color: "green",attributes: {x: 'left',
·
下载地址: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>
js
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需要显示调用
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献2条内容
所有评论(0)