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

下载地址

解压得到这些文件夹：

下面开始学习使用。（根据提供的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. OFBiz RCE漏洞复现（CVE-2023-51467）

    漏洞名称 Apache OFBiz 鉴权绕过导致命令执行 漏洞描述 Apache OFBiz是一个非常著名的电子商务平台,是一个非常著名的开源项目,提供了创建基于最新J2EE/XML规范和技术标准,构 ...

  2. electron 安装遇到的各种奇怪问题解决

    在国内,electron经常遇到各种问题,导致无法安装 在安装electron官网的快速入门步骤,到npx electron-forge import的时候,遇到了各种问题 npm install - ...

  3. nginx web服务器应用（虚拟主机 日志 rewrite location https）

    Nginx介绍 Nginx是一个开源的,支持高性能,高并发的www服务和代理服务软件,因具有高并发(特别是静态资源),占用系统资源少等特性,且功能丰富而逐渐流行起来.功能应用上,Nginx不但是一个优 ...

  4. Windows 7操作系统全面解析与实用技巧

    Win7操作系统 一.操作系统的概述 1.1操作系统的概念 操作系统(operating system,简称OS)一组控制和管理计算机系统的硬件和软件资源.控制程序执行.改善人机界面.合理地组织计算机 ...

  5. python基础-字符串str " "

    字符串的定义和操作 字符串的特性: 元素数量 支持多个 元素类型 仅字符 下标索引 支持 重复元素 支持 可修改性 不支持 数据有序 是 使用场景 一串字符的记录场景 字符串的相关操作: my_str ...

  6. 常回家看看之off_by_null(堆篇)

    上次介绍了堆里面的off_by_one,那么这个off_by_null和它有神马区别呢,哎,别看名字挺像,它俩无论是在栈里面还是堆里面都有很大区别的. off_by_one,这个我们知道可以通过溢出控 ...

  7. Python数据分析方法与技巧

    背景介绍 数据分析是数据科学领域的核心技能之一,它涉及到数据的收集.清洗.处理.分析和可视化. 数据分析是指通过收集.清洗.处理.分析和可视化数据来发现隐藏的模式.趋势和关系的过程. 数据分析是数据科 ...

  8. 树莓派4B-高精度驱动步进电机

    树莓派4B-高精度驱动步进电机 项目介绍 利用4B树莓派控制步进电机转动,精度可达:0.0144度 (即360度/25000) 适用于非常精密的角度转动. 舵机的精度为1度,无法实现超高精度控制. 硬 ...

  9. 使用Sequelize

    访问MySQL 当我们安装好MySQL后,Node.js程序如何访问MySQL数据库呢? 访问MySQL数据库只有一种方法,就是通过网络发送SQL命令,然后,MySQL服务器执行后返回结果. 我们可以 ...

  10. SpringBoot注解配置文件映射属性和实体类

    配置文件加载 方式一 Controller上面配置@PropertySource({"classpath:pay.properties"}) 添加属性@Value("wx ...