既然这么优秀，我们赶紧来学学吧~

下载地址

解压得到这些文件夹：

下面开始学习使用。（根据提供的demo学习常用基础控件的使用）

基础面板

引入对应样式文件和js文件后就可以直接使用了。

代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<!--基本ui-->

		<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

		<!--图标-->

		<link rel="stylesheet" type="text/css" href="../themes/icon.css">

		<link rel="stylesheet" type="text/css" href="../demo/demo.css">

		<!-- 引入jQuery  要在easyui.min之前声明-->

		<script type="text/javascript" src="../jquery.min.js"></script>

		<script type="text/javascript" src="../jquery.easyui.min.js"></script>

	</head>

	<body>

		<!--基础面板-->

		<div id="p" class="easyui-panel" title="基础面板" style="width:700px;height:300px;padding:10px;">

			<p style="font-size:14px">基础面板，常用的基本容器</p>

		</div>

	</body>

</html>

　　

带有工具的面板

右上角的按钮都是封装好的！真是方便

实现代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<!--基本ui-->

		<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

		<!--图标-->

		<link rel="stylesheet" type="text/css" href="../themes/icon.css">

		<link rel="stylesheet" type="text/css" href="../demo/demo.css">

		<!-- 引入jQuery -->

		<script type="text/javascript" src="../jquery.min.js"></script>

		<script type="text/javascript" src="../jquery.easyui.min.js"></script>

	</head>

	<body>

		<!--基础面板-->

		<div id="p" class="easyui-panel" title="基础面板" style="width:700px;height:300px;padding:10px;">

			<p style="font-size:14px">基础面板，常用的基本容器</p>

		</div>

		<!--带有工具的面板 感觉快要可以制作桌面应用了-->

		<div class="easyui-panel" style="height:350px;padding:5px;">

			<div id="p1" class="easyui-panel" title="有工具的基础面板" style="width:600px;height:200px;padding:10px;" data-options="footer:'#ft',iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true">

				<p style="font-size:14px">基础面板，常用的基本容器</p>

				<!--脚部-->

				<div id="ft" style="padding:5px;">

					Footer Content.

				</div>

			</div>

		</div>

	</body>

</html>

　　

面板嵌套

实现代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<!--基本ui-->

		<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

		<!--图标-->

		<link rel="stylesheet" type="text/css" href="../themes/icon.css">

		<link rel="stylesheet" type="text/css" href="../demo/demo.css">

		<!-- 引入jQuery -->

		<script type="text/javascript" src="../jquery.min.js"></script>

		<script type="text/javascript" src="../jquery.easyui.min.js"></script>

	</head>

	<body>

		<!--面板嵌套-->

		<div style="margin:20px 0 10px 0;"></div>

		<div class="easyui-panel" title="Nested Panel" style="width:700px;height:200px;padding:10px;">

			<div class="easyui-layout" data-options="fit:true">

				<div data-options="region:'west',split:true" style="width:100px;padding:10px">

					Left Content

				</div>

				<div data-options="region:'east'" style="width:100px;padding:10px">

					Right Content

				</div>

				<div data-options="region:'center'" style="padding:10px">

					Right Content

				</div>

			</div>

		</div>

	</body>

</html>

　　

jQuery Eazyui的学习和使用（二）的更多相关文章

  1. 菜鸟的jQuery源码学习笔记（二）

    jQuery对象是使用构造函数和原型模式相结合的方式创建的.现在来看看jQuery的原型对象jQuery.prototype: jQuery.fn = jQuery.prototype = { //成 ...

  2. 启动和JQuery绑定--AngularJS学习笔记（二）

    上一篇简单的分析了AngularJS的项目结构,后面就开始分析具体的源代码了. 从angularFiles.js中的定义可以看出有几个文件直接位于src根目录,并不是隶属于某个模块.这几 个分别是mi ...

  3. javaScript学习总结（二）——jQuery插件的开发

    概要 jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定 ...

  4. Hibernate学习笔记（二）

    2016/4/22 23:19:44 Hibernate学习笔记(二) 1.1 Hibernate的持久化类状态 1.1.1 Hibernate的持久化类状态 持久化:就是一个实体类与数据库表建立了映 ...

  5. jQuery Moblile Demos学习记录Theming、Button、Icons图标，脑子真的不好使。

    jQuery Moblile Demos学习记录Theming.Button.Icons图标,脑子真的不好使. 06. 二 / Jquery Mobile 前端 / 没有评论   本文来源于www.i ...

  6. jQuery Moblile Demos学习记录Panel

    jQuery Moblile Demos学习记录Panel 11. 二 / Jquery Mobile / 没有评论   本文来源于www.ifyao.com禁止转载!www.ifyao.com 我就 ...

  7. 【学习笔记】jQuery的基础学习

    [学习笔记]jQuery的基础学习 新建 模板 小书匠  什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...

  8. jQuery学习总结（一）——jQuery基础与学习资源

    前一段时间录了一套关于jQuery的视频分享给大家,可以在下载区下载到,本来想配合文字一起的,后面发现视频+帮助文档也是非常好的学习方法. 一.jQuery简介与第一个jQuery程序 1.1.jQu ...

  9. jquery源码学习笔记三：jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

  10. Java web与web gis学习笔记（二）——百度地图API调用

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

随机推荐

  1. 关于cookie的深入了解

    1.cookie的诞生 由于HTTP协议是无状态的,服务端的业务必须带用户状态,cookie的诞生最初就是为了存储web中的用户状态以及其他的相关状态,以方便服务器使用.比如是否用户第一次访问网站,用 ...

  2. 安装nodejs易遇到的坑

    @ 目录 背景描述 流程步骤 小结 背景描述 我的服务器是centos7.9,打算先直接通过yum安装,但是yum不能指定node版本,我直接指定显示404找不到,然后我设置了下node下载的源,还是 ...

  3. elasticsearch-head插件安装及启动，关闭命令

    启动插件 /elasticsearch-head目录npm run start启动elasticsearch 不能使用root账号 切换账号:su es./bin/elasticsearch 打印日志 ...

  4. Gradle查看依赖及排除依赖的方法

    查看项目的编译依赖,同时写入文件aa.txt F:\sts4\order-test>gradlew :order-test-api:dependencies --configuration co ...

  5. rabbitMq消息没收到排查

    rabbitMq消息没收到排查 首先看是否本地机器开了服务,或者测试环境里面其他的个人电脑本地服务启动注册了,都监听了同一个队列,导致队列消息被接走了.现象是在测试环境期望的执行没有运行.或者关注服务 ...

  6. skywalking需要引入的背景(查询调用链),传统的日志查询方法, 引入EFK日志搜索重要性

    1.根据两次请求日志的关键点来截取日志,缩小日志的范围.tail -f orderApi.log | grep "orderKeyWordSubmit"     确定两次异常请求的 ...

  7. 博客更换新域名为52ecy.cn

    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` 博客更换新域名为52ecy.cn 日期:2017-10-2 ...

  8. STP选举规则

    STP Election Process 802.1D STP ​ 802.1D是第一个生成树版本,不支持VLAN.选举过程如下 选择一个根桥 选择根端口 选择指定端口 选择关闭端口(剩下的最后一个端 ...

  9. FEL - Fast Expression Language

    开源好用的表达式计算语言FEL,可惜了官网文档不在国内,我来copy个过来. Fel是轻量级的高效的表达式计算引擎 Fel在源自于企业项目,设计目标是为了满足不断变化的功能需求和性能需求. Fel是开 ...

  10. UIController转为SwiftUI

    在UIKit转到SwiftUI的过渡时期中,项目中会遇到不得不用到二者混合使用的情景,苹果这时提供了相关API让iOSer更好地适应这个时期. UIViewControllerRepresentabl ...