03_EasyUI

纯js写出一个页面：省去美工，前端。
省去整个前台和美工。
自带一套页面的样式，完成对用户的管理。

在Demo里面复制粘贴

这是一套样式

layout(布局)：东南西北中，调用就修改，实在不行查API

      $(function(){
          var p = $('body').layout('panel','west').panel({
              onCollapse:function(){
                  alert('collapse');
              }
          });
      });
  

    
    
    
    


    
north region
    
west content
    
east region
    
south region
    

    

split就是可以操纵分隔栏，collapsible折叠面板按钮

页面布局示例

左侧页面细化加工

    
    
    
    
    
    


    
Accordion
    

        

        
Click on panel header to show its content.
    
    
    

        Select
        Add
        Remove
    
    
    

        

            
Accordion for jQuery
            
Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.
        
        

            

                

                    

                        
Item ID
                        
Product ID
                        
List Price
                        
Unit Cost
                        
Attribute
                        
Status
                    
                
            
        
        

            content3
        
    

加工样式显示

测试类

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>














   
    
   
        
Accordion for jQuery
   
        
Accordion is a part of easyui framework for jQuery.     
        It lets you define your accordion component on web page more easily.
   
    
   
    
   
        content2    
    
   
    
   
        content3    
    
   
  

接下来读取json文件

menu.json文件


{
   "menus" : [{"icon" : "icon-sys","menuid" : "1","menuname" : "客户管理","url" : "","menus" : [
                 {"icon" : "icon-log","menuid" : "1_1","menuname" : "客户列表","url" : "views/customer.html"
                 },
                 {"icon" : "icon-log","menuid" : "1_1","menuname" : "客户拜访","url" : "views/salevisit.html"
                 }
                ]
               }
             ]
}

样式展示01--去寻找Tabs（选项卡）