easyui自定義工具欄
easyui的彈出框上有工具欄(上方)和按鈕欄(下方),
工具欄的按鈕默認靠左,自己沒找到調整位置的屬性。
為了在右上角放一個關閉按鈕,只能使用easyui的屬性自定義一個工具欄,主要的實現為:
-
創建一個div作為工具欄,在div中放要顯示的按鈕,按鈕在div中向右靠齊
-
在彈窗框div中添加屬性
data-options="toolbar:'#tb'"
代碼如下:
<div id="editDialog" style="overflow: auto; overflow-x: auto;" data-options="toolbar:'#tb'">
<div id="box" >
<pre id="showMessage" style="font-size: 15px">
</pre>
</div>
</div>
<div id="tb" class="dialog-button2" style="background:#f2f4f6; height: 30px">
<a href="javascript:closeDialog()" class="l-btn" id="" style="float: right; margin-right: 2px ; vertical-align: middle"><span class="l-btn-left"><span class="l-btn-text">關閉</span></span></a>
</div>
js代碼如下:
function editRemind(editId) {
$('#editDialog').dialog({
width: 1000,
height: 700,
title: '異常詳細信息',
modal: true,
/* toolbar:[{
text:'關閉'
}],*/
/* buttons: [{
text: '關閉',
handler: function () {
$('#editDialog').dialog('close');
}
}],*/
onBeforeOpen:function(){
},
onOpen:function(){
$('#showMessage').text('hello world');
},
cache: false
});
}
為了工具欄好看點,樣式都去easyui封裝好的toolbar和buttons欄中扣去吧