Use of Jquery EasyUI Dialog, jqueryeasyui
The jquery easyui Setting dialog box is displayed as follows:
First, you must first create a new JSP page (skip)
The second step is to introduce the required js and css files:
<% -- EsayUI style sheet -- %> <link rel = "stylesheet" type = "text/css" href = ".. /themes/default/easyui.css "> <% -- image style in EasyUI -- %> <link rel =" stylesheet "type =" text/css "href = ".. /themes/icon.css "> <% -- jquery basic library -- %> <script type =" text/javascript "src = ".. /jquery-1.4.2.min.js "> </script> <% -- EasyUI base library -- %> <script type =" text/javascript "src = ".. /jquery. easyui. min. js "> </script> <% -- EasyUI's International Chinese package -- %> <script src = ".. /locale/easyui-lang-zh_CN.js "type =" text/javascript "> </script>
Step 3: html code:
<body>
Step 4 jquery code:
<P> <script> $ (function () {$ ('# dd '). dialog ({title: 'Dialog box ', collapsible: true, // set foldable minimizable: true, maximizable: true, resizable: true, </p> <p> toolbar: [{// set the toolbar array text: 'add', iconCls: 'icon-add', handler: function () {alert ('add ');}}, '-', {text: 'save', iconCls: 'icon-save', handler: function () {alert ('save') ;}}], buttons: [{// set the text: 'OK', iconCls: 'icon-OK ', handler: function () {alert (' OK ');}}, {text: 'cancel', handler: function () {$ ('# dd '). dialog ('close') ;}}]}) ;}); function open1 () {1 ('# dd '). dialog ('open');} function close1 () {$ ('# dd '). dialog ('close') ;}</script> </p>
:
Event
The Dialog event is the same as the Window event.
Method
The Dialog function method is the same as the Window function method.