一、EasyUI简介

  是一组基于JQuery的UI插件集合

  主要作用:为JQuery对象提供新的方法,实现新的功能

  可以快速创建出简洁、友好、美观的页面,非常适合做网站后台管理页面(不够漂亮,不适合做前台页面)

  官方文档:http://www.jeasyui.com/documentation/index.php

二、panel组件的创建

  分两步:
    1,引入需要的样式文件和js文件
      <link rel="styleSheet" type="text/css" href="easyui的样式地址">
      <link rel="styleSheet" type="text/css" href="easyui的图标样式地址">
      <script type="text/javascript" src="easyui/jquery.min.js"></script>
      <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    2,
      方式一,通过设置元素的class属性创建EasyUI控件
        示例代码:
        <div class="easyui-panel" data-options="title:'面板组件',width:300,height:185">
          <p>内容</p>
        </div>

      方式二,通过js代码创建EasyUI控件
        //调用对象的panel属性,利用{key1:value1,key2:value2}键值对的形式进行添加
        $(document).ready(function(){
          $("#div01").panel({
            width:300,
            height:185,
            title:'面板组件',
            context:'内容'
          });
        });

三、panel的属性

  EasyUI组件的属性用来指定组件的样式、结构、内容等

  title:  指定panel的标题

  width   指定panel的宽度

  height   指定panel的高度

  fit    设置panel的大小是否适应父容器,值是true或者false //注意是父容器

  border   设置panel是都显示边框 值是true或者false

  collapsible    设置是否显示可折叠按钮,值是true或者false

  closeable    设置是否显示关闭按钮,值是true或者false

  href   加载另一个页面的内容 注意:被加载页面的body之外的内容会被忽略!!

  注意:很多组件属性的效果也可以使用HTML元素属性或者CSS样式属性的方式来实现
  在标签内部写style属性,或者<style></style>写CSS代码

四、panel的事件属性

  onBeforeCollapse panel折叠前触发,可以在事件处理函数中阻止折叠

  onCollapse panel折叠后触发

  注意:panel事件属于组件的属性,使用上也是以键值对的形式
  

  示例代码:
    onBeforeCollapse: function () {
      var ss = confirm("是否真的要折叠");
      if(ss){

      }else{
        return false;
      }
    }

五、panel的方法

  setTitle    设置标题

  open   打开

  close    关闭

  options    可以查看参数

  组件的方法的调用格式:
    jQuery对象.panel方法(方法名,参数列表);
    示例代码:
    $("#btn01").click(function () {
      $("#input01").panel("setTitle","新标题")
    });

    $("#btn02").click(function () {
      $("#input01").panel("close");
    });

    $("#btn03").click(function () {
      $("#input01").panel("open");
    });

六、EasyUI的图标

  使用方法:data-options属性中指定iconCls:'图标名称'
  示例代码:
    iconCls:'icon-add'

七、链接按钮

  EasyUI通常把一个超链接改造成一个按钮的样式使用,称之为linkbutton组件。
  注意,是将一个超链接进行改动

  特点:圆角、可添加图标、美观、可以添加事件

  连接按钮属性:
  disable 是否可以点击,值是true或者false,true为不可以被点击

  iconCls 可以选择图标

  示例代码:
    <a class="easyui-linkbutton" data-options="disable:true,iconCls:icon-add">add</a>
  注意:不要忘记导入easyui的文件(两个样式属性、jQuery和easyUI)

  事件属性:
  onClick
  示例代码:
    $(document).ready(function(){
      $("a").linkbutton("disable",true);
    });

八、表单控件

  EasyUI封装了很多表单控件,主要是提供数据有效性校验功能

  validatebox控件   属性:required、validType、invalidMessage、validateOnBlur

  textbox控件

  datebox控件    属性:formatter

  datetimebox控件

  form控件    属性:url、success、onSubmit 方法:submit、validate

九、window组件

  window组件用来弹出一个子窗口,方便添加、修改等操作

  窗口组件基于panel组件

  常用属性:href、width、height

十、tabs标签页组件

  tabs标签页可以看成由多个panel组成,但同一时间只显示一个panel的内容

  tabs组件的主要操作有:创建新tab页、选择tab页

  <div id="tt" class="easyui-tabs" data-options="width:600,height:371">
    <div title="Tab1">
      tab1 content
    </div>
    <div title="Tab2" data-options="closable:true">
      tab2 content
    </div>
  </div>

  属性:fit是否填充父元素
  方法:add、exists、select

十一、tree组件

  tree组件一般用来做系统导航栏

  <ul class="easyui-tree">
    <li>
      <span>Folder1</span>
      <ul>
        <li><span>File1</span></li>
        <li><span>File2</span></li>
      </ul>
    </li>
    <li>
      <span>Folder2</span>
      <ul>
        <li><span>File4</span></li>
        <li><span>File5</span></li>
      </ul>
    </li>
  </ul>

  很多时候采用这种方式为节点添加点击动作:
  <li>
    <span>
      <a href="#" onClick="xx()">File1</a>
    </span>
  </li>

十二、layout布局组件

  EasyUI布局组件把页面分为上、下、左、右、中间5个区域,分别称为north、south、west、east、center,每个区域实际上是个panel组件

  layout组件可以使用在<body>上也可以使用在<div>上

  <body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="background:#eee;"></div>
  </body>

十三、datagrid数据表格

  属性:url、pagination、toolbar、loadFilter

  方法:load、reload

  <table class="easyui-datagrid"
    data-options="title:'用户管理',pagination:true,width:600" >
    <thead>
      <tr>
        <th data-options="field:'email',width:140">登录邮箱</th>
        <th data-options="field:'name',width:120">真实姓名</th>
        <th data-options="field:'phone',width:120">手机号码</th>
        <th data-options="field:'school',width:120">毕业院校</th>
      </tr>
    </thead>
  </table>

  每次进行分有人操作,都会向url属性指定的路径发送请求,请求参数有page、rows

十四、结束语

  EasyUI的主要内容就是主要组件的用法:panel、linkbutton、form、window、tabs、tree、layout、datagrid等

  这些组件基本满足我们对于后台管理系统项目的布局、导航、列表、添加、修改、删除等功能

  学习的时候只要学习这些组件就可以了,如果在以后的工作中使用到EasyUI的其他组件,可以参考官方文档

如鹏网学习笔记(十三)EasyUI的更多相关文章

  1. 如鹏网学习笔记(十五)ASP.NET MVC核心基础笔记

    一.ASP.Net MVC简介 1,什么是ASP.NET MVC? HttpHandler是ASP.net的底层机制,如果直接使用HttpHandler进行开发难度比较大.工作量大.因此提供了ASP. ...

  2. 如鹏网学习笔记(七)HTML基础

    HTML笔记 一.HTML简介 1,HTML (Hyper Text Mark-up Language) 超文本标记语言,是一种编程语言,也可以说是一种标准.规范. 2,HTML提供了一系列标记(标签 ...

  3. 如鹏网学习笔记(四).Net常用类库

    .Net常用类库 一.String成员方法(常用) 1,bool Contains(string str) 判断字符串对象是否包含给定的内容 2,bool StartsWith(String str) ...

  4. 如鹏网学习笔记(十)DOM

    DOM笔记一.DOM简介 Document Object Model 文档对象模型 DOM的节点树模型:整个文档按照从大到小的节点划分,每一个内容都算作一个节点 DOM API 编程接口 可以用来操作 ...

  5. 如鹏网学习笔记(九)JavaScript

    JavaScript笔记 一.JavaScript简介 1,JavaScript是一种计算机编程语言,可以像等其他编程语言那样定义变量,执行循环等. 2,JavaScript代码主要执行在浏览器上,为 ...

  6. 如鹏网学习笔记(十四)ASP.NET

    Asp.net笔记 一.Socket类 进行网络编程的类,可以在两台计算机之间进行网络通讯 过程: 向服务器发送指令: GET /index.html HTTP/1.1 Host:127.0.0.1: ...

  7. 如鹏网学习笔记(五)MySql基础

    MySQL基础 一.数据库概念 1,网友装备信息.论坛帖子信息.QQ好友关系信息.学籍管理系统中的学生信息等都要“持久化”的保存到一个地方, 如果通过IO写到文件中,那么会非常麻烦,而且不利于多人共享 ...

  8. 如鹏网学习笔记(十一)JQuery

    一.jQuery简介 jQuery是一个JavaScript库,特性丰富,包含若干对象和很多函数,可以替代传统DOM编程的操作方式和操作风格 jQuery通过对DOM API.DOM事件的封装,提供了 ...

  9. 如鹏网学习笔记(八)CSS

    CSS 一.CSS简介 1,CSS (Cascading Style Sheets) 级联样式表 ,是一种计算机语言,用来控制HTML内容的显示效果 2,CSS预先定义了众多的和显示效果有关的样式属性 ...

随机推荐

  1. 快速排序 JAVA实现

    快速排序 每次排序的时候设置一个基准点,将小于等于基准点的数全部放到基准点的左边,将大于等于基准点的数全部放到基准点的右边.快速排序是不稳定的,时间复杂度(平均):nlogn public class ...

  2. SpringMvc-ModelAndView 结果出不来 显示路径问题 解决办法

    今天写SpringMVC的时候  写ModelAndView的时候 死活跳不过页面去-一直报错 显示路径也错误 查看导包问题 应该: import org.springframework.web.se ...

  3. CTF之信息泄漏

    web源码泄漏 .hg源码泄漏: 漏洞成因:hg  init的时候会生成.hg,http://www.xx.com/.hg/, 工具:dvcs-ripper,(rip-hg.pl -v -u http ...

  4. php请求远程url内容方法

    php请求远程url内容有两个方法fopen/file_get_contents和curl. 1,fopen/file_get_contents与curl的差异 (1)fopen /file_get_ ...

  5. mylyn提交到JIRA的日期格式错误

    HTTP Status 400 - Date value '27/Dec/11' for field 'due' is invalid. Valid formats include: 'yyyy/MM ...

  6. 部署LVS-DR群集

    一.LVS-DR原理剖析 (一)LVS-DR数据包流向分析 1.Client向目标VIP发出请求,Director(负载均衡器)接收.此时IP包头及数据帧头信息为: 2.Director根据负载均衡算 ...

  7. 工具IDEA 配置springboot+maven项目

    工具IDEA 配置springboot+maven项目 首先安装IDEA,至于怎么安装就不介绍了.. 第一步 配置maven环境 首先安装maven,先在网上下载一个maven包.在IDEA的sett ...

  8. sql注入原理详解(一)

    我们围绕以下几个方面来看这个问题: 1.什么是sql注入? 2.为什么要sql注入? 3.怎样sql注入? 1.什么是sql注入? 所谓SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或 ...

  9. windows jenkins 卸载

      如果下载的是war包,先在任务管理器上停止jenkins的服务,再删除jenkins整个文件

  10. PTA 这是二叉搜索树吗?

    https://pintia.cn/problem-sets/994805046380707840/problems/994805070971912192 #include<iostream&g ...