Dialog（對話方塊視窗）
阿新 • • 發佈：2018-12-15
該對話方塊是一種特殊型別的視窗，它在頂部有一個工具欄，在底部有一個按鈕欄。對話方塊視窗右上角只有一個關閉按鈕使用者可以配置對話方塊的行為顯示其他工具,如collapsible,minimizable,maximizable工具等。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Dialog</title> <!-- 引入easyUI:JQuery檔案支援 --> <script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script> <!-- 引入easyUI --> <script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script> <!-- 引入中文支援 --> <script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script> <!-- 引入easyUI主題css檔案 --> <link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link> <!-- 引入easyUI 圖示導航檔案 --> <link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head> <body> <% /* resizable:是否可以改變對話方塊視窗大小 modal:是否將窗體顯示為模式化視窗 toolbar:對話方塊視窗頂部工具欄 buttons:對話方塊視窗底部按鈕 */ %> <div id="dd" class="easyui-dialog" title="對話方塊視窗" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:false"> 會當凌絕頂,一覽眾山小 </div> </body> </html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Dialog</title> <!-- 引入easyUI:JQuery檔案支援 --> <script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script> <!-- 引入easyUI --> <script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script> <!-- 引入中文支援 --> <script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script> <!-- 引入easyUI主題css檔案 --> <link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link> <!-- 引入easyUI 圖示導航檔案 --> <link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head> <body> <% /* resizable:是否可以改變對話方塊視窗大小 modal:是否將窗體顯示為模式化視窗 toolbar:對話方塊視窗頂部工具欄 buttons:對話方塊視窗底部按鈕 */ %> <!-- ----------------------------------選擇器-------------------------------------------------------- --> <div id="dd" class="easyui-dialog" title="對話方塊視窗" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:false,toolbar:'#tb'"> 會當凌絕頂,一覽眾山小 </div> <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a> </div> <!-- ----------------------------------陣列-------------------------------------------------------- --> <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',modal:true, toolbar:[{ text:'編輯', iconCls:'icon-edit', handler:function(){alert('edit')} },{ text:'幫助', iconCls:'icon-help', handler:function(){alert('help')} }]"> 歡迎關注 </div> </body> </html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Dialog</title> <!-- 引入easyUI:JQuery檔案支援 --> <script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script> <!-- 引入easyUI --> <script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script> <!-- 引入中文支援 --> <script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script> <!-- 引入easyUI主題css檔案 --> <link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link> <!-- 引入easyUI 圖示導航檔案 --> <link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head> <body> <% /* resizable:是否可以改變對話方塊視窗大小 modal:是否將窗體顯示為模式化視窗 toolbar:對話方塊視窗頂部工具欄 buttons:對話方塊視窗底部按鈕 */ %> <!-- -----------------------------選擇器--------------------------------- --> <div id="dd" class="easyui-dialog" title="對話方塊視窗" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:false,buttons:'#bb'"> 會當凌絕頂,一覽眾山小 </div> <div id="bb"> <a href="#" class="easyui-linkbutton">儲存</a> <a href="#" class="easyui-linkbutton">關閉</a> </div> <!-- -----------------------------陣列--------------------------------- --> <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'我的對話方塊',modal:true, buttons:[{ text:'儲存', handler:function(){alert('儲存');} },{ text:'關閉', handler:function(){alert('關閉');} }]"> 墨漸生微 </div> </body> </html>