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

下载地址

解压得到这些文件夹：

下面开始学习使用。（根据提供的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. org.elasticsearch.client.transport.NoNodeAvailableException: None of the configured nodes are available es端口号及集群名称

    org.elasticsearch.client.transport.NoNodeAvailableException: None of the configured nodes are availa ...

  2. 5分钟理透LangChain的Chain

    LangChain几乎是LLM应用开发的第一选择,它的野心也比较大,它致力于将自己打造成LLM应用开发的最大社区.而LangChain最核心的部分非 Chain 莫属. 那Chain到底是个啥,概念比 ...

  3. injectionIII iOS代码注入工具（下）

    injectionIII iOS代码注入工具(下) 本文将解决如何使用injectionIII对主页热重载,如果对injectionIII不了解的同学请回到上篇查看 Vaccine 简单地说Vacci ...

  4. metal invalid pixel format xx

    这个时候要考虑CAMetalLayer.pixelFormat是否设置设置正确,虽然MTLPixelFormat有很多枚举值,但是CAMetalLayer支持的也就只有五个: MTLPixelForm ...

  5. k8s中的亲和性、污点与容忍（调度到不同的宿主机）

    本文章并未经过严格实践,如有错误,辛苦指出. 背景 服务需要多副本,来保证高可靠.多活. 那么问题来了,假如这些副本都在同一个宿主机上,或者同一个交换机下-宿主机.交换机其中一项坏掉了,那多副本还有什 ...

  6. Linux内核驱动：cdev、misc以及device三者之间的联系和区别

    Linux内核驱动:cdev.misc以及device三者之间的联系和区别 背景 我想在cdev中使用dev_err等log打印函数,但是跟踪了一下cdev中的原型,发现并不是我想要的. 常见的驱动是 ...

  7. arm linux 移植 curl

    背景 libcurl是一个跨平台的开源网络协议库,支持http, https, rtsp等多种协议 .libcurl同样支持HTTPS证书授权,HTTP POST, HTTP PUT, FTP 上传, ...

  8. 海思SDK 学习 ：000-海思HI35xx平台软件开发快速入门之背景知识

    背景 参考自:<HiMPP V3.0 媒体处理软件开发参考.pdf> 由于在音视频处理领域,海思芯片占有全球市场的很大份额.当我们选择使用海思芯片开发时,程序开发模型主要是围绕HIMPP( ...

  9. debian11安装备忘

    1. 网卡驱动 参考网址:如何安装Debian RTL8821CE驱动? 2. 分辨率 貌似还是有点问题,还要进一步研究一下 参考网址:虚拟机中debian11修改控制台(console)分辨率|li ...

  10. position的值， relative和absolute分别是相对于谁进行定位的？

    relative:  相对定位,相对于自己本身在正常文档流中的位置进行定位 相对它原来的位置,在走100px.原来在标准流中的位置继续占有. absolute: 生成绝对定位,相对于最近一级定位不为s ...