[one_demo_14]一个简单的easyui的demo

「爱情、让人受尽委屈。」 2022-05-19 14:18 290阅读 0赞

在webapp下添加了jquey和easyui的相关文件后。

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>layout页面</title>
  8. <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
  9. <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
  10. <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
  11. <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
  12. </head>
  13. <body class="easyui-layout">
  14.     <div title="系统管理界面" data-options="region:'north'" style="height:100px;">玄武</div>
  15.     <div title="系统菜单" data-options="region:'west'" style="width:200px;">
  16.         <div class="easyui-accordion" data-options="fit:true">
  17.             <div title="面板1" data-options="iconCls:'icon-save'">
  18.                 <h3 style="color:#0099FF;">Accordion for jQuery</h3>
  19.                 <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
  20.                 <!-- <input type="button" value="添加一个选项卡" /> -->
  21.                 <a id="but1" class="easyui-linkbutton">添加一个选项卡</a>
  22.                 <script type="text/javascript">
  23.                     $(function(){
  24.                         $("#but1").click(function(){
  25.                             if($("#center_tab").tabs("exists", "面板4")){
  26.                                 $("#center_tab").tabs("select", "面板4")
  27.                             }else{
  28.                                 $("#center_tab").tabs("add",{
  29.                                     title:'面板4',
  30.                                     iconCls:'icon-edit',
  31.                                     closable:true,
  32.                                     content:'<iframe height="100%" width="100%" frameborder="0" src="https://www.baidu.com"></iframe>'
  33.                                 });
  34.                             }
  35.                         });
  36.                     });
  37.                 </script>
  38.             </div>
  40.             <div title="面板2">
  41.                 <p>The accordion allows you to provide multiple panels and display one at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p> 
  42.             </div>
  43.             <div title="面板3">
  44.                 tree
  45.             </div>
  46.         </div>
  47.     </div>
  48.     <div data-options="region:'center'">
  49.         <div id="center_tab" class="easyui-tabs" data-options="fit:true">
  50.             <div title="面板1" data-options="iconCls:'icon-save'">
  51.                 <h3 style="color:#0099FF;">Accordion for jQuery</h3>
  52.                 <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
  53.             </div>
  54.             <div title="面板2" data-options="closable:true">
  55.                 <p>The accordion allows you to provide multiple panels and display one at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p> 
  56.             </div>
  57.             <div title="面板3">
  58.                 tree
  59.             </div>
  60.         </div>
  61.     </div>
  62.     <div data-options="region:'east'" style="width:100px;">青龙</div>
  63.     <div data-options="region:'south'" style="height:100px;">朱雀</div>
  65. </body>
  66. </html>

发表评论

表情：
评论列表 （有 0 条评论，290人围观）

还没有评论，来说两句吧...

相关阅读