jquery-easy dialog對話方塊基本用法
阿新 • • 發佈：2018-11-02
首先引入相關的css 和 js檔案
<link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="css/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="jq/jquery.min.js" type="text/javascript"></script> <script src="jq/jquery.easyui.min.js" type="text/javascript"></script>
然後通過 js 載入的方式 顯示對話方塊
<script type="text/javascript"> $(function () { $('#dia').dialog({ title:'新增資料資訊', iconCls: 'icon-save', width:'500', height: '200', toolbar: [{ text: 'Add', iconCls: 'icon-add', handler: function () { alert('add') } }, '-', { text: 'Save', iconCls: 'icon-save', handler: function () { alert('save') } }], buttons:[{ text:'確定',//按鈕顯示的文字 iconCls:'icon-ok',//按鈕圖示 handler:function(){ alert('ok');//點選按鈕引發的事件 } },{ text:'取消', handler:function(){ alert('cancel');; } }] }); }); </script>
在body標籤中 新增一個div標籤設定ID為dia
<body>
<div id="dia">
</div>
</body>
對話方塊相關屬性與方法
title: 返回string 對話方塊的標題文字。
collapsible：返回true 或 false 是否顯示摺疊按鈕 預設 false
minimizable 返回 true 或 false 定義是否顯示最小化按鈕。 false
maximizable 返回 true 或 false 定義是否顯示最大化按鈕。 false
resizable 返回 true 或 false 定義對話方塊是否可調整尺寸。 false
toolbar 返回一個數組 對話方塊的頂部工具欄，
buttons 返回一個數據 對話方塊的底部按鈕，
$(’#dia’).dialog(‘open’) 開啟對話方塊
$(’#dia’).dialog(‘close’) 關閉對話方塊