zoukankan      html  css  js  c++  java
  • easy ui layout设计

     1 <!DOCTYPE html>  
     2 <html>  
     3 <head>  
     4     <meta charset="UTF-8">  
     5     <title>Basic Layout - jQuery EasyUI Demo</title>  
     6     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">  
     7     <link rel="stylesheet" type="text/css" href=http://www.jeasyui.com/easyui/themes/icon.css">  
     8     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">  
     9     <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>  
    10     <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>  
    11 </head>  
    12 <body>  
    13     <h2>Basic Layout</h2>  
    14     <div class="demo-info">  
    15         <div class="demo-tip icon-tip"></div>  
    16         <div>The layout contains north,south,west,east and center regions.</div>  
    17     </div>  
    18     <div style="margin:10px 0;"></div>  
    19     <div class="easyui-layout" style="700px;height:350px;">  
    20         <div data-options="region:'north'" style="height:50px"></div>  
    21         <div data-options="region:'south',split:true" style="height:50px;"></div>  
    22         <div data-options="region:'east',split:true" title="East" style="180px;"></div>  
    23         <div data-options="region:'west',split:true" title="West" style="100px;"></div>  
    24         <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">  
    25             <table class="easyui-datagrid"  
    26                     data-options="url:'http://www.jeasyui.com/demo/layout/datagrid_data1.json',border:false,singleSelect:true,fit:true,fitColumns:true">  
    27                 <thead>  
    28                     <tr>  
    29                         <th data-options="field:'itemid'" width="80">Item ID</th>  
    30                         <th data-options="field:'productid'" width="100">Product ID</th>  
    31                         <th data-options="field:'listprice',align:'right'" width="80">List Price</th>  
    32                         <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>  
    33                         <th data-options="field:'attr'" width="150">Attribute</th>  
    34                         <th data-options="field:'status',align:'center'" width="50">Status</th>  
    35                     </tr>  
    36                 </thead>  
    37             </table>  
    38         </div>  
    39     </div>  
    40   
    41 </body>  
    42 </html>  
  • 相关阅读:
    Hystrix使用说明,配置参数说明
    服务限流 -- 自定义注解基于RateLimiter实现接口限流
    Java生产环境下问题排查
    Java垃圾回收(GC)机制详解
    RabbitMQ如何解决各种情况下丢数据的问题
    JWT如何在Spring Cloud微服务系统中在服务相互调时传递
    LeetCode 117th Weekly Contest 总结
    系统设计总结
    单调栈总结
    LeetCode 116th Weekly Contest 总结
  • 原文地址:https://www.cnblogs.com/chenli0513/p/3108653.html
Copyright © 2011-2022 走看看