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

下载地址

解压得到这些文件夹：

下面开始学习使用。（根据提供的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. MySQL GROUP BY 用法介绍

    MySQL 中 GROUP BY 用法 简介 GROUP BY 语句用于结合合计函数,根据一个或多个列对结果集进行分组. 可以把 分组理解成 Excel 中的分组. 把 合计函数理解成 Excel 中 ...

  2. Navicat 连接SQL Server LocalDB的方法

    截止2021年11月,Sql Server LocalDB的资料网上并不多见,出来了其实也有一段年头了. SqlServerManagerStudio自带的工具进行查询使用体验并不好,Navicat是 ...

  3. EyeLink 1000 plus(桌面式)眼动仪使用指导

    一.简介 眼动追踪是测量眼睛运行的过程.眼动追踪研究的最关注的事件是确定人类或者动物看的地方(比如:"注视点"或"凝视点").更准确来说是通过仪器设备进行图像处 ...

  4. zabbix数据库

    1. 安装MySQL 5.6 操作系统为CentOS7 X64 MySQL文件下载地址 http://dev.mysql.com/downloads/repo/yum/ 卸载已存在文件 rpm -qa ...

  5. MYSQL8.0-JSON函数简单示例-JSON_EXTRACT|JSON_VALUE|JSON_TABLE

    JSON类型在日常应用开发中,用得很少,个人通常用于存储常常变化的配置参数. 它适用于什么业务场景,不好说.就好像许多年前读到的一篇文章,说有个国外公司利用ORACLE的CLOB/BLOB管理一些信息 ...

  6. pycharm中运行jupyter notebook

    进入anaconda prompt,进入对应的虚拟环境 输入jupyter notebook,找到路径和token 这两个随便复制一个,注意是包括token也要复制到 然后打开pycharm,并建立一 ...

  7. 让matplotlib在绘图时显示中文

    让matplotlib绘图时显示中文. 安装中文字体 apt install fonts-wqy-microhei 清除matplotlib的缓存    rm -rf ~/.cache/matplot ...

  8. 嵌入式Linux如何设置获取uboot参数

    --- title: 嵌入式Linux如何设置获取uboot参数 EntryName: embeded-linux-debug-get-and-set-u-boot-envarg date: 2020 ...

  9. 推荐2款.NET开源、轻便、实用的Windows桌面启动器

    Flow Launcher Flow Launcher是一款.NET开源(MIT License).免费.功能强大.方便实用的 Windows 文件搜索和应用程序启动器,能够帮助你快速查找文件.启动应 ...

  10. iOS开发基础109-网络安全

    在iOS开发中,保障应用的网络安全是一个非常重要的环节.以下是一些常见的网络安全措施及对应的示例代码: Swift版 1. 使用HTTPS 确保所有的网络请求使用HTTPS协议,以加密数据传输,防止中 ...