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

下载地址

解压得到这些文件夹：

下面开始学习使用。（根据提供的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. es6.6.1 rest常规操作

    ES 内置的REST接口/ 获取版本信息/index/_search 搜索指定索引下的数据 test/_search/_aliases 获取或者操作索引下的别名 _aliases/index/ 查看指 ...

  2. XTuner大模型单卡低成本微调实战

    Smiling & Weeping ---- 有趣是片难寻的土,灵魂是朵难养的花 一些关于的模型训练的小tips: 1.ctrl+c中断  2.tmux new -s 名称   3.ctrl+ ...

  3. maven项目创建默认目录结构

    maven项目创建默认目录结构命令 项目文件夹未创建情况下 mvn \ archetype:generate \ -DgroupId=com.lits.parent \ -DartifactId=my ...

  4. Python连接Etcd集群基础教程

    1.背景介绍 最近接手了一个项目,项目是使用Python开发的,其中使用到了Etcd,但是项目之前开发的方式,只能够支持单节点连接Etcd,不能够在Etcd节点发生故障时,自动转移.因此需要基于现有e ...

  5. 3568F-系统启动阶段LOGO显示

  6. 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-1-环境准备与搭建

    1.简介 Python+Playwright系列的文章还没有结束,就有好的小伙伴或者童鞋们私信公众号留言,问宏哥什么时候出Java语言的Playwright的自动化测试文章.本来想趁热打铁将Pytho ...

  7. frp内网穿透：基于centos8 云服务器和debian12客户端服务器

    前言 入了一台本地工控机盒子,刷成了debian12系统,性能比云服务器要好一点,现在想要远程访问这台盒子,但是盒子又没有公网地址,所以想通过内网穿透的方式,通过云服务器转发请求实现内网穿透.原来体验 ...

  8. 树莓派安装OpenCv

    树莓派安装OpenCv 更换树莓派软件源 我们选择将树莓派的软件源切换到清华大学镜像站,据笔者亲测,通过此站可以顺利安装openCV. 切换软件源需要修改两个软件源配置文件的内容. 第一个需要修改是「 ...

  9. css浅谈Flex布局

    1.打开Flex布局 .box{ display: flex; } 2.容器的属性 flex-direction flex-wrap flex-flow justify-content align-i ...

  10. Java-继承Thread的方式和实现Runnable接口多线程

    继承Thread的方式实现多线程 public class TestThread extends Thread{ @Override public void run() { System.out.pr ...