脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-初试JqueryEasyUI（附Demo），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 1，准备
http://www.jeasyui.COM/download/index.php下载最新的easyui包，里面有个demo文件夹，开发的时候尽量别删了，我们在做的过程中可以参照里面的demo示例，使用easyui需要引用下面四个css和js：
1 <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
2 <link href="EasyUI/themes/icon.css" rel="stylesheet" />
3 <script src="EasyUI/jquery.min.js"></script>
4 <script src="EasyUI/jquery.easyui.min.js"></script>
第一个easyui.css是基本的样式，我们在themes文件夹下会发现有几种皮肤，可以切换样式更换不同的控件风格。
第二个icon.css是图标样式，增加图标按照已有规则创建，下面两个js引用就不多说了。
2，布局Layout
后台管理系统一般都是分为四个部分，上部是LOGo或标题，左部是菜单，下部是版权信息，右部是内容信息。在easyui中我们可以使用Layout进行布局，在demo文件夹-Layout文件夹下的basic.htML，基本上是我们需要的效果，复制一下，把高度和宽度修改一下（设置百分比）：
但是浏览一下会发现页面什么也没有，当时很莫名奇妙，试了好久才发现，class="easyui-layout"必须放在body标签里面，通过上面截图可以看到north、south、west、east和center分别代表五个部分，我们不需要east导航可以直接删掉，简单修改下就是我们想要的效果，示例代码：
复制代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" InherITs="EasyUIDemo.WebForm2" %>
2
3 <!DOCTYPE html>
4
5 <html XMlns="http://www.w3.org/1999/xhtml">
6 <head id="Head1" runat="server">
7 <;meta http-equiv="Content-type" content="text/html; charset=utf-8" />
8 <title></title>
9 <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
10 <link href="EasyUI/themes/icon.css" rel="stylesheet" />
11 <link href="css/admin.css" rel="stylesheet" />
12 <script src="EasyUI/jquery.min.js"></script>
13 <script src="EasyUI/jquery.easyui.min.js"></script>
14 </head>
15 <body class="easyui-layout">
16 <p data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px">
17 <img src="images/logo.png" />EasyUIDemo
18 </p>
19 <p data-options="region:'south',border:false" style="height: 23px;">
20 <p class="footer">EasyUIDemo</p>
21 </p>
22 <p data-options="region:'west',split:true" title="West" style="width: 170px;"></p>
23 <p data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
24 <table class="easyui-datagrid"
25 data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
26 <thead>
27 <tr>
28 <th data-options="field:'itemid'" width="80">Item ID</th>
29 <th data-options="field:'PRoductid'" width="100">Product ID</th>
30 <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
31 <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
32 <th data-options="field:'attr'" width="150">Attribute</th>
33 <th data-options="field:'status',align:'center'" width="50">Status</th>
34 </tr>
35 </thead>
36 </table>
37 </p>
38 </body>
39 </html>
3，菜单树Tree
基本的布局创建好了之后，我们需要在左部添加菜单树，我们选取的是demo文件夹-tree文件夹下的lines.html，复制一下添加在west左部p下，lines示例是从json文件中读取树的，我们可以从basic.html中看到创建tree的格式，state:'closed'表示此接单关闭，默认是打开。
关于tree自定义节点图标，icons.html是自定义节点图标示例，但是从json读取的，格式为："iconCls":"icon-remove"；运行可以看到源代码：
当时设置以为在span标签设置图标样式，但是并不起作用，花了很多时间尝试，发现原来要在li标签设置，通过这个示例需要提醒大家的是，在用easyui布局的时候，不要查看样式布局，因为运行后都是easyui生成的源代码，并不是原始的，按照这个设置起来会有些问题。
简单设置一下，就是我们要的效果，示例代码：
4，内容页Tabs
菜单tree创建好了，接下来就是center部分的内容页，我们选取的是demo文件夹-tabs文件夹下的tabstools.html，此示例有tools方便我们扩展，在做添加tabs的时候花了很多时间，一个是tabs添加center里面，另一个是tools样式问题，关于第一个还好，经过多次尝试，嵌套里面去了，第二个问题我们先看下截图：
不知怎的？在ie是可以，谷歌和火狐不行，去掉样式height: 26px;就是好的，但高度就不对了，尝试了好久，最后没办法，创建一个新的webform，一段一段代码贴过去测试，最后发现是头部标签：<!DOCTYPE html PubLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">问题，新建的webform：<!DOCTYPE html>就是好的，真没想到是这样的原因导致。
下面示例代码中的addPanel()和removePanel()是添加tab的js方法，当然也可以在页面加载的时候动态的创建tab，需要注意的是在tabs_p中有data-options="tools:'#tab-tools'"属性，tab-tools要和下面tools的id对应，表示tabs对应的tools，设置好了自动设置样式，不需要你手动的设置。
示例代码：
复制代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="EasyUIDemo.WebForm1" %>
2
3 <!DOCTYPE html>
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 <title></title>
9 <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
10 <link href="EasyUI/themes/icon.css" rel="stylesheet" />
11 <link href="css/admin.css" rel="stylesheet" />
12 <script src="EasyUI/jquery.min.js"></script>
13 <script src="EasyUI/jquery.easyui.min.js"></script>
14 </head>
15 <body class="easyui-layout">
16 <p data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px">
17 <img src="images/logo.png" />EasyUIDemo
18 </p>
19 <p data-options="region:'west',split:true,title:'导航菜单'" style="width: 170px;">
20 <p class="easyui-accordion" data-options="fit:true,border:false">
21 <p title="系统设置1" data-options="selected:true">
22 <p style="margin: 5px">
23 <ul class="tree easyui-tree" data-options="aniMATE:true,lines:true">
24 <li data-options="iconCls:'icon-group'">
25 <span>基本设置</span>
26 <ul>
27 <li data-options="iconCls:'icon-group_add'">
28 <span>test1</span>
29 </li>
30 <li data-options="iconCls:'icon-group_delete'">
31 <span>test2</span>
32 </li>
33 <li data-options="iconCls:'icon-group_edit'">
34 <span>test3</span>
35 </li>
36 </ul>
37 </li>
38 <li data-options="state:'closed',iconCls:'icon-joystick'">
39 <span>系统设置</span>
40 <ul>
41 <li data-options="iconCls:'icon-joystick_add'">
42 <span>test4</span>
43 </li>
44 </ul>
45 </li>
46 </ul>
47 </p>
48 </p>
49 <p title="系统设置2" style="padding: 10px;">
50 content2
51 </p>
52 <p title="系统设置3" style="padding: 10px">
53 content3
54 </p>
55 </p>
56 </p>
57 <p data-options="region:'south',border:false" style="height: 23px;">
58 <p class="footer">EasyUIDemo</p>
59 </p>
60 <p data-options="region:'center'">
61 <p id="tabs" class="easyui-tabs" data-options="tools:'#tab-tools'">
62 <p title="主页" data-options="iconCls:'icon-house'" style="padding: 10px; height: 100%;">主页</p>
63 </p>
64 <p id="tab-tools">
65 <a href="javascript：void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
66 <a href="javascript：void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
67 </p>
68 </p>
69 <script type="text/javascript">
70 VAR index = 0;
71 function addPanel() {
72 index++;
73 $('#tabs').tabs('add', {
74 title: 'Tab' + index,
75 content: '<p style="padding:10px">Content' + index + '</p>',
76 closable: true
77 });
78 }
79 function removePanel() {
80 var tab = $('#tabs').tabs('getSelected');
81 if (tab) {
82 var index = $('#tabs').tabs('getTabIndex', tab);
83 $('#tabs').tabs('close', index);
84 }
85 }
86 </script>
87 </body>
88 </html>
5，右键菜单Menu
tab创建好之后，我们需要在tab添加右键menu，以便我们的tab操作，demo文件夹-menu文件夹下的basic.html，我们把代码复制过来，可以看到先创建一个p指示右键menu，js绑定右击代码：
1 $(function(){
2 $(document).bind('contextmenu',function(e){
3 e.preventDefault();
4 $('#mm').menu('show', {
5 left: e.pageX,
6 top: e.pageY
7 });
8 });
9 });
上面代码是绑定区域是整个页面，我们需要修改一下：把$(document) 改成$(".tabs-inner")，.tabs-inner是每个tab的css，查看页面源代码我们就可以看到。
绑定右击事件后，下面就是关闭tab了，easyui提供了关闭tab的接口：$('#tabs').tabs('close', tab标题);根据此接口我们可以扩展其他的菜单，比如关闭全部，除此之外全部关闭等等，就像vs的tab管理一样。
tab管理代码：
复制代码
1 //关闭tab
2 function closeTab(action) {
3 var alltabs = $('#tabs').tabs('tabs');
4 var currentTab = $('#tabs').tabs('getSelected');
5 var allTaBTitle = [];
6 $.each(alltabs, function (i, n) {
7 allTabtitle.push($(n).panel('options').title);
8 })
9 switch (action) {
10 case "refresh":
11 var iframe = $(currentTab.panel('options').content);
12 var src = iframe.attr('src');
13 $('#tabs').tabs('update', {
14 tab: currentTab,
15 options: {
16 content: createFrame(src)
17 }
18 })
19 break;
20 case "close":
21 var currtab_title = currentTab.panel('options').title;
22 $('#tabs').tabs('close', currtab_title);
23 break;
24 case "closeall":
25 $.each(allTabtitle, function (i, n) {
26 if (n != onlyOpenTitle) {
27 $('#tabs').tabs('close', n);
28 }
29 });
30 break;
31 case "closeother":
32 var currtab_title = currentTab.panel('options').title;
33 $.each(allTabtitle, function (i, n) {
34 if (n != currtab_title && n != onlyOpenTitle) {
35 $('#tabs').tabs('close', n);
36 }
37 });
38 break;
39 case "closeright":
40 var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
41
42 if (tabIndex == alltabs.length - 1) {
43 alert('亲，后边没有啦 ^@^!!');
44 return false;
45 }
46 $.each(allTabtitle, function (i, n) {
47 if (i > tabIndex) {
48 if (n != onlyOpenTitle) {
49 $('#tabs').tabs('close', n);
50 }
51 }
52 });
53 break;
54 case "closeleft":
55 var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
56 if (tabIndex == 1) {
57 alert('亲，前边那个上头有人，咱惹不起哦。 ^@^!!');
58 return false;
59 }
60 $.each(allTabtitle, function (i, n) {
61 if (i < tabIndex) {
62 if (n != onlyOpenTitle) {
63 $('#tabs').tabs('close', n);
64 }
65 }
66 });
67 break;
68 case "exit":
69 $('#cloSEMenu').menu('hide');
70 break;
71 }
72 }
整合js代码：
复制代码
1 var onlyOpenTitle = "主页";//不允许关闭的标签的标题
2 $(function () {
3 tabclose();
4 tabCloseEven();
5 })
6
7 function tabClose() {
8 /*双击关闭TAB选项卡*/
9 $(".tabs-inner").dblclick(function () {
10 var subtitle = $(this).children(".tabs-closable").text();
11 $('#tabs').tabs('close', subtitle);
12 })
13 /*为选项卡绑定右键*/
14 $(".tabs-inner").bind('contextmenu', function (e) {
15 $('#mm').menu('show', {
16 left: e.pageX,
17 top: e.pageY
18 });
19 var subtitle = $(this).children(".tabs-closable").text();
20 $('#mm').data("currtab", subtitle);
21 $('#tabs').tabs('select', subtitle);
22 return false;
23 });
24 }
25 //绑定右键菜单事件
26 function tabCloseEven() {
27 $('#mm').menu({
28 onClick: function (item) {
29 closeTab(item.id);
30 }
31 });
32 return false;
33 }
34
35 //创建/移除tab
36 var index = 0;
37 function addTab(subtitle, url, icon) {
38 index++;
39 if (!$('#tabs').tabs('exists', subtitle)) {
40 $('#tabs').tabs('add', {
41 title: 'Tab' + index,
42 content: createFrame('http://www.baidu.com/'),
43 closable: true,
44 icon: ''
45 });
46 } else {
47 $('#tabs').tabs('select', subtitle);
48 $('#mm-tabupdate').click();
49 }
50 tabClose();
51 }
52 function removeTab() {
53 var tab = $('#tabs').tabs('getSelected');
54 if (tab) {
55 var index = $('#tabs').tabs('getTabIndex', tab);
56 $('#tabs').tabs('close', index);
57 }
58 }
59 //创建Frame
60 function createFrame(url) {
61 var s = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
62 return s;
63 }
64
65 //关闭tab
66 function closeTab(action) {
67 var alltabs = $('#tabs').tabs('tabs');
68 var currentTab = $('#tabs').tabs('getSelected');
69 var allTabtitle = [];
70 $.each(alltabs, function (i, n) {
71 allTabtitle.push($(n).panel('options').title);
72 })
73 switch (action) {
74 case "refresh":
75 var iframe = $(currentTab.panel('options').content);
76 var src = iframe.attr('src');
77 $('#tabs').tabs('update', {
78 tab: currentTab,
79 options: {
80 content: createFrame(src)
81 }
82 })
83 break;
84 case "close":
85 var currtab_title = currentTab.panel('options').title;
86 $('#tabs').tabs('close', currtab_title);
87 break;
88 case "closeall":
89 $.each(allTabtitle, function (i, n) {
90 if (n != onlyOpenTitle) {
91 $('#tabs').tabs('close', n);
92 }
93 });
94 break;
95 case "closeother":
96 var currtab_title = currentTab.panel('options').title;
97 $.each(allTabtitle, function (i, n) {
98 if (n != currtab_title && n != onlyOpenTitle) {
99 $('#tabs').tabs('close', n);
100 }
101 });
102 break;
103 case "closeright":
104 var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
105
106 if (tabIndex == alltabs.length - 1) {
107 alert('亲，后边没有啦 ^@^!!');
108 return false;
109 }
110 $.each(allTabtitle, function (i, n) {
111 if (i > tabIndex) {
112 if (n != onlyOpenTitle) {
113 $('#tabs').tabs('close', n);
114 }
115 }
116 });
117 break;
118 case "closeleft":
119 var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
120 if (tabIndex == 1) {
121 alert('亲，前边那个上头有人，咱惹不起哦。 ^@^!!');
122 return false;
123 }
124 $.each(allTabtitle, function (i, n) {
125 if (i < tabIndex) {
126 if (n != onlyOpenTitle) {
127 $('#tabs').tabs('close', n);
128 }
129 }
130 });
131 break;
132 case "exit":
133 $('#closeMenu').menu('hide');
134 break;
135 }
136 }
复制代码
html代码：
复制代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EasyUIDemo._Default" %>
2
3 <!DOCTYPE html>
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 <title></title>
9 <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
10 <link href="EasyUI/themes/icon.css" rel="stylesheet" />
11 <link href="css/admin.css" rel="stylesheet" />
12 <script src="EasyUI/jquery.min.js"></script>
13 <script src="EasyUI/jquery.easyui.min.js"></script>
14 <script src="js/common.js"></script>
15 </head>
16 <body class="easyui-layout" data-options="fit:true,scroll:'no'">
17 <p data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px">
18 <img src="images/logo.png" />EasyUIDemo
19 </p>
20 <p data-options="region:'west',split:true,title:'导航菜单'" style="width: 170px;">
21 <p class="easyui-accordion" data-options="fit:true,border:false">
22 <p title="系统设置1" data-options="selected:true">
23 <p style="margin: 5px">
24 <ul class="tree easyui-tree" data-options="animate:true,lines:true">
25 <li data-options="iconCls:'icon-group'">
26 <span>基本设置</span>
27 <ul>
28 <li data-options="iconCls:'icon-group_add'">
29 <span>test1</span>
30 </li>
31 <li data-options="iconCls:'icon-group_delete'">
32 <span>test2</span>
33 </li>
34 <li data-options="iconCls:'icon-group_edit'">
35 <span>test3</span>
36 </li>
37 </ul>
38 </li>
39 <li data-options="state:'closed',iconCls:'icon-joystick'">
40 <span>系统设置</span>
41 <ul>
42 <li data-options="iconCls:'icon-joystick_add'">
43 <span>test4</span>
44 </li>
45 </ul>
46 </li>
47 </ul>
48 </p>
49 </p>
50 <p title="系统设置2" style="padding: 10px;">
51 content2
52 </p>
53 <p title="系统设置3" style="padding: 10px">
54 content3
55 </p>
56 </p>
57 </p>
58 <p data-options="region:'south',border:false" style="height: 23px;">
59 <p class="footer">EasyUIDemo</p>
60 </p>
61 <p data-options="region:'center'">
62 <p id="tabs" class="easyui-tabs" data-options="tools:'#tab-tools',fit:true,border:false" >
63 <p title="主页" data-options="iconCls:'icon-house'" style="padding: 10px;">主页</p>
64 </p>
65 <p id="tab-tools">
66 <a href="javascript：void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addTab()"></a>
67 <a href="javascript：void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removeTab()"></a>
68 </p>
69 </p>
70 <p id="mm" class="easyui-menu" style="width: 150px;">
71 <p id="refresh" data-options="iconCls:'icon-arrow_refresh'">刷新</p>
72 <p class="menu-sep"></p>
73 <p id="close">关闭</p>
74 <p id="closeall">全部关闭</p>
75 <p id="closeother">除此之外全部关闭</p>
76 <p class="menu-sep"></p>
77 <p id="closeright">当前页右侧全部关闭</p>
78 <p id="closeleft">当前页左侧全部关闭</p>
79 <p class="menu-sep"></p>
80 <p id="exit">退出</p>
81 </p>
82 </body>
83 </html>
复制代码
6，表单Form
内容管理少不了form表单，其实在easyui使用form表单最简单，样式、验证、布局等都是提供的，只要我们简单设置一下属性就可以了，demo文件夹-form文件夹下的basic.html，我们看下文本框的代码：
1 <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input>
easyui-validatebox指示验证文本控件，data-options="required:true,validType:'email'"，required表示文本框必输，validType表示验证文本框方式，当然也支持其他url、电话验证等，详细的验证信息可以在demo文件夹-validatebox文件夹查看示例。form表单没什么说的，大家看示例demo就可以找到想要的东西。
这边需要注意的是验证默认是英文，中文的话需要引用中文包：<script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>
html代码：
复制代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>EasyUI From</title>
6 <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
7 <link href="EasyUI/themes/icon.css" rel="stylesheet" />
8 <link href="css/admin.css" rel="stylesheet" />
9 <script src="EasyUI/jquery.min.js"></script>
10 <script src="EasyUI/jquery.easyui.min.js"></script>
11 <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>
12 </head>
13 <body>
14 <p style="margin: 10px 0;"></p>
15 <p style="padding: 10px 0 10px 60px">
16 <form id="ff" method="post">
17 <table>
18 <tr>
19 <td>名称:</td>
20 <td>
21 <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
22 </tr>
23 <tr>
24 <td>邮箱:</td>
25 <td>
26 <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
27 </tr>
28 <tr>
29 <td>标题:</td>
30 <td>
31 <input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>
32 </tr>
33 <tr>
34 <td>内容:</td>
35 <td>
36 <textarea name="message" style="height: 60px;"></textarea></td>
37 </tr>
38 <tr>
39 <td>语言:</td>
40 <td>
41 <select class="easyui-combobox" name="language">
42 <option value="ar">Arabic</option>
43 <option value="bg">Bulgarian</option>
44 <option value="ca">Catalan</option>
45 <option value="zh-cht">Chinese Traditional</option>
46 <option value="cs">Czech</option>
47 <option value="da">Danish</option>
48 <option value="nl">Dutch</option>
49 <option value="en" selected="selected">English</option>
50 <option value="et">Estonian</option>
51 <option value="fi">Finnish</option>
52 <option value="fr">French</option>
53 <option value="de">German</option>
54 <option value="el">Greek</option>
55 <option value="ht">Haitian Creole</option>
56 <option value="he">Hebrew</option>
57 <option value="hi">Hindi</option>
58 <option value="mww">Hmong Daw</option>
59 <option value="hu">Hungarian</option>
60 <option value="id">Indonesian</option>
61 <option value="it">Italian</option>
62 <option value="ja">Japanese</option>
63 <option value="ko">Korean</option>
64 <option value="lv">Latvian</option>
65 <option value="lt">Lithuanian</option>
66 <option value="no">Norwegian</option>
67 <option value="fa">Persian</option>
68 <option value="pl">Polish</option>
69 <option value="pt">Portuguese</option>
70 <option value="ro">romanian</option>
71 <option value="ru">Russian</option>
72 <option value="sk">Slovak</option>
73 <option value="sl">Slovenian</option>
74 <option value="es">Spanish</option>
75 <option value="sv">Swedish</option>
76 <option value="th">Thai</option>
77 <option value="tr">Turkish</option>
78 <option value="uk">Ukrainian</option>
79 <option value="vi">Vietnamese</option>
80 </select>
81 </td>
82 </tr>
83 </table>
84 </form>
85 </p>
86 <p style=" padding: 5px; margin-left:100px;">
87 <a href="javascript：void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
88 <a href="javascript：void(0)" class="easyui-linkbutton" onclick="clearForm()">清除</a>
89 </p>
90 <script>
91 function submitForm() {
92 $('#ff').form('submit');
93 }
94 function clearForm() {
95 $('#ff').form('clear');
96 }
97 </script>
98 </body>
99 </html>
复制代码
效果：
7，对话框Dialog
使用dialog和使用form一样简单，demo文件夹-Dialog文件夹下的toolbarbuttons.html，我们创建一个表单提交后对话框提示。
复制代码
1 <p id="dlg" class="easyui-dialog" title="dialog" style="width: 250px; height: 120px; padding: 10px"
2 data-options="
3 iconCls: 'icon-save',
4 buttons: [{
5 text:'Ok',
6 iconCls:'icon-ok',
7 handler:function(){
8 alert('ok');
9 }
10 },{
11 text:'Cancel',
12 handler:function(){
13 alert('cancel');;
14 }
15 }]
16 ">
17 确认提交吗？
18 </p>
复制代码
在data-options-buttons选项，表示对话框下方的按钮集合，也有在标题下方的按钮集合，属性是toolbar，打开dialog代码：$('#dlg').dialog('open')，关闭参数改为：close即可。dialog里的内容可以嵌套p，也可以嵌套frame，这个可以随意扩展。
html代码：
复制代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>EasyUI from</title>
6 <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
7 <link href="EasyUI/themes/icon.css" rel="stylesheet" />
8 <link href="css/admin.css" rel="stylesheet" />
9 <script src="EasyUI/jquery.min.js"></script>
10 <script src="EasyUI/jquery.easyui.min.js"></script>
11 <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>
12 </head>
13 <body>
14 <p style="margin: 10px 0;"></p>
15 <p style="padding: 10px 0 10px 60px">
16 <form id="ff" method="post">
17 <table>
18 <tr>
19 <td>名称:</td>
20 <td>
21 <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
22 </tr>
23 <tr>
24 <td>邮箱:</td>
25 <td>
26 <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
27 </tr>
28 <tr>
29 <td>标题:</td>
30 <td>
31 <input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>
32 </tr>
33 <tr>
34 <td>内容:</td>
35 <td>
36 <textarea name="message" style="height: 60px;"></textarea></td>
37 </tr>
38 <tr>
39 <td>语言:</td>
40 <td>
41 <select class="easyui-combobox" name="language">
42 <option value="ar">Arabic</option>
43 <option value="bg">Bulgarian</option>
44 <option value="ca">Catalan</option>
45 <option value="zh-cht">Chinese Traditional</option>
46 <option value="cs">Czech</option>
47 <option value="da">Danish</option>
48 <option value="nl">Dutch</option>
49 <option value="en" selected="selected">English</option>
50 <option value="et">Estonian</option>
51 <option value="fi">Finnish</option>
52 <option value="fr">French</option>
53 <option value="de">German</option>
54 <option value="el">Greek</option>
55 <option value="ht">Haitian Creole</option>
56 <option value="he">Hebrew</option>
57 <option value="hi">Hindi</option>
58 <option value="mww">Hmong Daw</option>
59 <option value="hu">Hungarian</option>
60 <option value="id">Indonesian</option>
61 <option value="it">Italian</option>
62 <option value="ja">Japanese</option>
63 <option value="ko">Korean</option>
64 <option value="lv">Latvian</option>
65 <option value="lt">Lithuanian</option>
66 <option value="no">Norwegian</option>
67 <option value="fa">Persian</option>
68 <option value="pl">Polish</option>
69 <option value="pt">Portuguese</option>
70 <option value="ro">Romanian</option>
71 <option value="ru">Russian</option>
72 <option value="sk">Slovak</option>
73 <option value="sl">Slovenian</option>
74 <option value="es">Spanish</option>
75 <option value="sv">Swedish</option>
76 <option value="th">Thai</option>
77 <option value="tr">Turkish</option>
78 <option value="uk">Ukrainian</option>
79 <option value="vi">Vietnamese</option>
80 </select>
81 </td>
82 </tr>
83 </table>
84 </form>
85 </p>
86 <p style="padding: 5px; margin-left: 100px;">
87 <a href="javascript：void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
88 <a href="javascript：void(0)" class="easyui-linkbutton" onclick="clearForm()">清除</a>
89 </p>
90 <p id="dlg" class="easyui-dialog" title="dialog" style="width: 250px; height: 120px; padding: 10px"
91 data-options="
92 iconCls: 'icon-save',
93 buttons: [{
94 text:'Ok',
95 iconCls:'icon-ok',
96 handler:function(){
97 alert('ok');
98 }
99 },{
100 text:'Cancel',
101 handler:function(){
102 alert('cancel');;
103 }
104 }]
105 ">
106 确认提交吗？
107 </p>
108 <script>
109 $(function () {
110 $('#dlg').dialog('close')
111 })
112 function submitForm() {
113 $('#dlg').dialog('open')
114 //$('#ff').form('submit');
115 }
116 function clearForm() {
117 $('#ff').form('clear');
118 }
119 </script>
120 </body>
121 </html>
复制代码
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-初试JqueryEasyUI（附Demo）全部内容，希望文章能够帮你解决javascript代码实例教程-初试JqueryEasyUI（附Demo）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。