头部需要引人文件：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/easyui.css">
    <!--<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/black/easyui.css">-->
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css">
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>

1、首先是面板工具：
<h2>Basic Panel</h2>
<p>The panel is a container for other components or elements.</p>
<div style="margin:20px 0 10px 0;">
    <!--easyUI的四个面板工具：打开、关闭、展开、折叠-->
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">Close</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('collapse',true)">Collapse</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('expand',true)">Expand</a>
</div>
<div id="p" class="easyui-panel" title="Basic Panel" style="width:700px;height:200px;padding:10px;">
    <p style="font-size:14px">jQuery EasyUI框架可以帮助您轻松构建web页面。</p>

    <ul>
        <li>easyui是一个基于jQuery的用户界面插件的集合。</li>
        <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
        <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing
            some HTML markup.
        </li>
        <li>complete framework for HTML5 web page.</li>
        <li>easyui save your time and scales while developing your products.</li>
        <li>easyui is very easy but powerful.</li>
    </ul>
</div>

2、其次是用户界面工具：增删改查
<h2>用户界面工具，增删查改</h2>
<div class="easyui-panel" title="Custom Panel Tools" style="width:700px;height:200px;padding:10px;"
     data-options="iconCls:'icon-save',closable:true,tools:'#operation'">
    <p style="font-size:14px">jQuery EasyUI框架可以帮助您轻松构建web页面。</p>
    <ul>
        <li>easyui是一个基于jQuery的用户界面插件的集合。</li>
        <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
        <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing
            some HTML markup.
        </li>
        <li>complete framework for HTML5 web page.</li>
        <li>easyui save your time and scales while developing your products.</li>
        <li>easyui is very easy but powerful.</li>
    </ul>
</div>
<div id="operation">
    <a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
    <a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('edit')"></a>
    <a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('cut')"></a>
    <a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')"></a>
</div>
3、接着是载入面板内容工具
<h2>载入面板内容</h2>
 <p>单击面板右上角的refresh按钮以加载内容。注意是一个文件名，文件名有无下划线都可以</p>
 <div style="margin:20px 0 10px 0;"></div>
 <div id="load" class="easyui-panel" title="加载面板内容" style="width:700px;height:200px;padding:10px;"
      data-options="
   tools:[{
      iconCls:'icon-reload',
      handler:function(){
         <!--$('#load').panel('refresh', '_content.html');-->
         $('#load').panel('refresh', 'content.html');
      }
   }]
">
 </div>
content.html：这里要加载的内容是个html文件。文件名可以有下划线，该文件同处根目录下，与“demo”同处一个根目录下即可


</body>
</html>

easyUI基础入门的更多相关文章

  1. EasyUI基础入门之Parser(解析器)

    前言 JQuery EasyUI提供的组件包含功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户能够组合使用这些组件,也能够单独使用当中一个.(使用的形式是以插件的方式提供的) Ea ...

  2. EasyUI基础入门之Easyloader(载入器)

    在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单载入器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的载入组件所需的 ...

  3. EasyUI基础入门之Pagination(分页)

    前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...

  4. EasyUI基础入门之Resiable(可缩放)

    easyui的base插件学习已经进行到Resizable(可缩放)了.照旧看看easyui官网的API. Resiable 正如其字面意思一样(可伸缩),resiable主要是将一些html元素扩展 ...

  5. EasyUI基础入门之Droppable(可投掷)

    怎么说呢Droppable这个单词究竟是什么意思,准确来说easyui作者究竟要表达什么意思,还是不大好拿捏的.只是没关系,没有必要纠结与这些细枝末节的东西,依据官网的demo效果,就简单的将之定义为 ...

  6. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  7. 「译」JUnit 5 系列：基础入门

    原文地址:http://blog.codefx.org/libraries/junit-5-basics/ 原文日期:25, Feb, 2016 译文首发:Linesh 的博客:JUnit 5 系列: ...

  8. .NET正则表达式基础入门

    这是我第一次写的博客,个人觉得十分不容易.以前看别人写的博客文字十分流畅,到自己来写却发现十分困难,还是感谢那些为技术而奉献自己力量的人吧. 本教程编写之前,博主阅读了<正则指引>这本入门 ...

  9. 从零3D基础入门XNA 4.0(2)——模型和BasicEffect

    [题外话] 上一篇文章介绍了3D开发基础与XNA开发程序的整体结构,以及使用Model类的Draw方法将模型绘制到屏幕上.本文接着上一篇文章继续,介绍XNA中模型的结构.BasicEffect的使用以 ...

随机推荐

  1. 函数和常用模块【day04】：内置函数（八）

    一.常用内置函数 1.表格 二.内置函数详情(1-10) 1.abs(x) 功能:取数的绝对值 1 2 >>> abs(-1)  #取-1的绝对值 1 2.all(iterable) ...

  2. java8的新特性详解-----------Lamda表达式

    java8最大的亮点就是引入了Lamda表达式  , 函数式编程的概念  具体啥意思我也不知道.只管用就行了,非常的强大,简洁,一个表达式相当于以前的十几行代码  因为之前要实现这种效果全靠if el ...

  3. git协同开发

    当你从远程仓库克隆时,实际上Git自动把本地的master分支和远程的master分支对应起来了,并且,远程仓库的默认名称是origin. 要查看远程库的信息,用git remote: [root@w ...

  4. UVALive - 7147 （数学）

    题目链接 题意 n只队伍,两两之间会进行比赛,赢平输都有相应得分,所有比赛结束后,前m名可以晋级.问最大的不能晋级分数为多少,以及最小的能晋级的分数. 分析 智商题...按照要求来贪心1.没有晋级的队 ...

  5. [译]Quartz.NET 框架 教程（中文版）2.2.x 之第七课 触发监听器和作业任务监听器

    第七课:触发监听器和作业任务监听器 监听器是在调度器中基于事件机制执行操作的对象.你大概可以猜到,触发监听器接收响应跟触发器有关的事件,作业任务监听器接收响应跟作业任务有关的事件. 跟触发器有关的事件 ...

  6. QA系统Match-LSTM代码研读

    QA系统Match-LSTM代码研读 背景 在QA模型中,Match-LSTM是较早提出的,使用Prt-Net边界模型.本文是对阅读其实现代码的总结.主要思路是对照着论文和代码,对论文中模型的关键结构 ...

  7. Java开发中各种集合框架简介

    在大数据MapReduce作业开发中,我们经常会遇到一些大小表的join,这是如果这个小表足够“小”的话,我们可以使用进行“map-join-side”,这要就可以有效的降低reduce端的压力,但是 ...

  8. Java SE之String，字符串和子字符串的存储与区别

    理解String 是怎么占用内存的       来看一个每个String对象的各个属性,一个String包括如下的属性: 一个char数组(是个独立的对象用来存储字符串中的字符) 一个int 的off ...

  9. 一个极好的JavaScript学习网址

    JavaScript学习网址:https://javascript.info/ 网址界面如下,内容和排版都非常不错,内容也比较新,不像一些教程已经是好几年前的了.把这个教程浏览一遍,能够解答很多看代码 ...

  10. java删除文件及其目录

    1.删除指定文件路径 public @ResponseBody String deleteFiles(HttpServletRequest request) { log.info(this.getCl ...