easyUI基础入门
头部需要引人文件：
<!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基础入门的更多相关文章
- EasyUI基础入门之Parser(解析器)
前言 JQuery EasyUI提供的组件包含功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户能够组合使用这些组件,也能够单独使用当中一个.(使用的形式是以插件的方式提供的) Ea ...
- EasyUI基础入门之Easyloader(载入器)
在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单载入器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的载入组件所需的 ...
- EasyUI基础入门之Pagination(分页)
前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...
- EasyUI基础入门之Resiable(可缩放)
easyui的base插件学习已经进行到Resizable(可缩放)了.照旧看看easyui官网的API. Resiable 正如其字面意思一样(可伸缩),resiable主要是将一些html元素扩展 ...
- EasyUI基础入门之Droppable(可投掷)
怎么说呢Droppable这个单词究竟是什么意思,准确来说easyui作者究竟要表达什么意思,还是不大好拿捏的.只是没关系,没有必要纠结与这些细枝末节的东西,依据官网的demo效果,就简单的将之定义为 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- 「译」JUnit 5 系列：基础入门
原文地址:http://blog.codefx.org/libraries/junit-5-basics/ 原文日期:25, Feb, 2016 译文首发:Linesh 的博客:JUnit 5 系列: ...
- .NET正则表达式基础入门
这是我第一次写的博客,个人觉得十分不容易.以前看别人写的博客文字十分流畅,到自己来写却发现十分困难,还是感谢那些为技术而奉献自己力量的人吧. 本教程编写之前,博主阅读了<正则指引>这本入门 ...
- 从零3D基础入门XNA 4.0(2)——模型和BasicEffect
[题外话] 上一篇文章介绍了3D开发基础与XNA开发程序的整体结构,以及使用Model类的Draw方法将模型绘制到屏幕上.本文接着上一篇文章继续,介绍XNA中模型的结构.BasicEffect的使用以 ...
随机推荐
- 用 Vue 开发一个简单的答题应用（一）
Vue 之类的 MVVM 框架,能帮助我们用更少的代码实现复杂的业务. 为了简单一点,开发计划分成三阶段: 一,数据写死,实现基本的答题效果.支持多种题型. 二,使用本地存储保存数据,支持题目录入的功 ...
- python---web框架本质（2）
目录 controllers //存放控制方法 models //存放模型方法 views //存放视图模板 index.html new.html show.html index.py //用户访问 ...
- Spark记录-阿里巴巴开源工具DataX数据同步工具使用
1.官网下载 下载地址:https://github.com/alibaba/DataX DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.Oracle.SqlSe ...
- DBA记录-数据库管理员需要掌握的内容
1.Linux 2.ORACLE/MySQL/SQLSERVER 3.NOSQL 4.环境部署.用户及权限管理.表空间.表.视图.索引.过程.触发器.分区.函数.查询.性能调优.迁移备份.集群.日志分 ...
- golang基础数据结构链表
链表 链表(Linked list),是一种线性表,但是并不会按线性的顺序存储数据,而是在每一个节点里存到下一个节点的指针(Pointer). 每个节点包含下一个节点的地址,这样把所有的节点串起来了, ...
- python遍历数组获取下标
代码 通过枚举实现 a = [,,,,,] for i,j in enumerate(a): print i,j 结果
- Java图片比对
在自动化测试中,除了普通的值验证,经常还有一些图片验证,比如图片的匹配率,输出图片的差异图片等.本文主要用到了BufferedImage类来操作图片比对和输出差异图片,大体的思路如下: 1. 通过Im ...
- nmap学习之相关参数列表
一.TARGET SPECIFICATION: Can pass hostnames, IP addresses, networks, etc. Ex: scanme.nmap.org, micros ...
- org.apache.phoenix.exception.PhoenixIOException: SYSTEM:CATALOG
Error: SYSTEM:CATALOG (state=08000,code=101)org.apache.phoenix.exception.PhoenixIOException: SYSTEM: ...
- SpringBoot在IDEA中实现热部署
gradle构建形式 添加依赖 compile("org.springframework.boot:spring-boot-devtools") 其他设置 步骤1 步骤2 按下 C ...