EasyUi

阳光穿透心脏的1/2处 2023-07-12 03:55 24阅读 0赞

**EasyUi**

**EasyUI介绍**

*  JQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的  
    目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者  
    不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解 的只有一些简单的html标签.
 *  页面显示panel面板组件
 *  步骤：
 *  在页面中导入easyui的依赖

<!‐‐导入easyui的样式文件‐‐>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <!‐‐导入easyui的图标文件‐‐>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <!‐‐导入jquery的js库文件‐‐>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <!‐‐导入easyui的js库文件‐‐>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

*  分别使用html方式和html+js方式完成

**easyui组件实现的两种方式**

*  html方式

<标签 class="easyui‐组件名称" data‐options="属性名:属性值,属性名:属性值"></标签>

*  html+js方式  
    在页面上定义个html容器  
    当页面加载完成后，使用js方式对html容器设置easyui样式

jquery对象.组件名称({ 
    属性名1:属性值1,
    属性名2:属性值2
    });

**注意事项:**  
如果类型要求为number,不要加任何单位,只提供数字  
如果为字符串,用引号括起来  
如果为布尔类型,不要加引号

**easyui目录介绍**

*  locale:本地化文件
 *  plugins:easyui组件的实现代码
 *  src:easyui的源码
 *  themes:easyui的主题

**layout布局组件**

*  布局容器有5个区域：北、南、东、西和中间。  
    中间区域面板是必须的，边缘的面板都是可选的。
 *  实现代码

**Accordion分类组件**

*  分类空间允许用户使用多面板，但在同一时间只会显示一个。
 *  实现代码

<div id="aa" class="easyui‐accordion" style="width:300px;height:200px;">
    <div title="Title1" data‐options="iconCls:'icon‐save'"
    style="overflow:auto;padding:10px;">
    <h3 style="color:#0099FF;">Accordion for jQuery</h3>
    <p>Accordion is a part of easyui framework for jQuery.
    It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="Title2" data‐options="iconCls:'icon‐reload',selected:true"
    style="padding:10px;">
    content2
    </div>
    <div title="Title3">
    content3
    </div>
    </div>

**Tree树组件**

*  树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
 *  实现代码

<ul id="tt" class="easyui‐tree">
        <li>
           <span>Folder</span>
           <ul>
               <li>
                   <span>Sub Folder 1</span>
                   <ul>
                       <li>
                           <span><a href="#">File 11</a></span>
                       </li>
                       <li>
                           <span>File 12</span>
                       </li>
                       <li>
                           <span>File 13</span>
                       </li>
                   </ul>
               </li>
               <li>
                   <span>File 2</span>
               </li>
               <li>
                   <span>File 3</span>
               </li>
           </ul>
       </li>
       <li>
           <span>File21</span>
       </li>
    </ul>

**Tabs选项卡组件**

*  选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。
 *  实现代码