jQueryEasyUI

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

这里我们使用easyUI搭建一个简单的页面框架，非常简单！

效果如此：

需要引入的最少的文件

3个js文件是必须的

文件下载链接：http://www.jeasyui.net/download/

注意：easyui从1.2.3版本之后开始收费了

创建一个html：

引入js以及要用到的样式

注意，由于ezUI是依赖jQuery的，所以引用的顺序一定是jQuery的js在easyUI的js之前！！！

demo1_layout.html:

<!DOCTYPE HTML>

<html>

	<head>

		<title>demo layout</title>

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

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

		<script type="text/javascript" src="easyui-lang-zh_CN.js"></script>

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

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

	</head>

	<body>

	</body>

</html>

　　（从我的路径可以看出，我的html文件和jQuery的js是平级关系）

完整代码：

<!DOCTYPE HTML>

<html>

	<head>

		<title>demo layout</title>

		<!-- 引入jQuery的js -->

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

		<!-- 引入jQuery easyUI的js -->

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

		<!-- 引入 国际化的js -->

		<script type="text/javascript" src="easyui-lang-zh_CN.js"></script>

		<!-- 引入图片样式 -->

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

		<!-- 引入默认样式 -->

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

	</head>

	<body>

		<!-- 使用easyui的layout布局 -->

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

			<!-- easyui在data-options配置配置 -->

			<!-- 只有center区域是必须的 -->

			<div data-options="region:'east',title:'东部'" style="width:200px;">东部</div>

			<div data-options="region:'west',title:'西部'" style="width:200px;">

				<!-- 可折叠面板accordion -->

				<!-- fit 属性，使得当前div大小占满 父容器 -->

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

					<!-- 每一个div就是一个面板 -->

					<!-- 通过iconCls设置图标，找icon.css中定义的类 -->

					<div data-options="title:'基本功能',iconCls:'icon-mini-add'">可折叠面板1</div>

					<div data-options="title:'高级功能',iconCls:'icon-mini-add'">可折叠面板2</div>

					<div data-options="title:'管理员功能',iconCls:'icon-mini-add'">可折叠面板3</div>

				</div>

			</div>

			<div data-options="region:'south',title:'南部'" style="height:100px;">南部</div>

			<div data-options="region:'north',title:'北部'" style="height:100px;">北部</div>

			<div data-options="region:'center',title:'中部'">

				<!-- 选项卡tab 面板 -->

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

					<!-- 这里的每一个div就是一个选项卡 -->

					<div data-options="title:'tab1'">tab标签面板1</div>

					<!-- closable 可关闭 -->

					<div data-options="title:'tab2',closable:true">tab标签面板2</div>

					<div data-options="title:'tab3',closable:true">tab标签面板3</div>

					<div data-options="title:'tab4',closable:true">tab标签面板4</div>

				</div>

			</div>

		</div>

	</body>

</html>

　　

转载请注明：https://www.cnblogs.com/1906859953Lucas/p/9212852.html

【原】jQuery easyUI 快速搭建前端框架的更多相关文章

  1. EasyUI搭建前端框架

    EasyUI搭建前端框架 前言: 最近在忙公司的项目,也没太多时间来更新博客,谢谢大家的关注. 好啦,有了前面的系统整体简介和用户登录界面,我们开始使用EasyUI搭建前端页面框架! EasyUI官方 ...

  2. EasyUI+bootsrtap混合前端框架

    EasyUI+bootsrtap混合前端框架 http://www.jeasyui.com/download/index.php用户没有登录前浏览的页面用bootsrtap框架用户登录进去后的商家管理 ...

  3. MyEclipse8.5快速搭建SSH框架

    来源于:http://jingyan.baidu.com/article/a378c960a78125b3282830cc.html MyEclipse8.5快速搭建SSH框架 使用版本: Strut ...

  4. 脚手架快速搭建springMVC框架项目

    apid-framework脚手架快速搭建springMVC框架项目   rapid-framework介绍:   一个类似ruby on rails的java web快速开发脚手架,本着不重复发明轮 ...

  5. 快速搭建ssm框架

    快速搭建SSM框架 因为最近有很多朋友问我自己的项目搭建的不够完善,并且经常出现一些小问题,那么今天我又整理了一下文档教大家如何快速搭建SSM框架我是用 eclipse搭建的,如果想用idear的话我 ...

  6. 使用Springboot快速搭建SSM框架

    Spring Boot设计目的是用来简化Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 一.环境准备 Idea 2017 或 201 ...

  7. 快速搭建springboot框架以及整合ssm+shiro+安装Rabbitmq和Erlang、Mysql下载与配置

    1.快速搭建springboot框架(在idea中): file–>new project–>Spring Initializr–>next–>然后一直下一步. 然后复制一下代 ...

  8. angularjs+requlirejs 搭建前端框架（1）

    第一部分:发发牢骚吧 随着富前端时代的逐渐深入,越来越多的前端技术框架层出不穷,可以说是百花齐放.让我们这些爱好前端的人疲于奔命,今天学习这个框架,明天研究那个框架,哎,说不出的蛋疼...感觉好累.. ...

  9. Turtle Online：致力于打造超接地气的PC前端架构，组件+API，快速搭建前端开发

    架构创作初衷 每当新开一个项目时,都会绞尽脑汁去考虑采用哪种框架:requirejs/seajs.jquery/zepto.backbone.easeUI/Bootstrap/AngularJS……, ...

随机推荐

  1. JVM垃圾收集器（1）

    此文已由作者赵计刚薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 说明:垃圾回收算法是理论,垃圾收集器是回收算法的实现,关于回收算法,见<第四章 JVM垃圾回收算法& ...

  2. 【OCP-052】052最新考试题库分析整理-第7题

    7.Which is true about external tables? A) The ORACLE_DATAPUMP access driver can be used to write dat ...

  3. 教你玩转XSS漏洞

    什么是存储性XSS那? 通俗理解就是”xss“语句存在服务器上,可以一直被客户端浏览使用,所有登陆某一个存在”存储性xss“的页面的人,都会中招,可以是管理员,可以是普通的用户,所以他的危害是持续性的 ...

  4. Class文件分析

    java源码和class文件 源码: package classloader; public class TestCase { private int value; public int test() ...

  5. 机器学习笔记(五) K-近邻算法

    K-近邻算法 (一)定义:如果一个样本在特征空间中的k个最相似的样本中的大多数属于某一个类别,则该样本也属于这个类别. (二)相似的样本,特征之间的值应该是相近的,使用k-近邻算法需要做标准化处理.否 ...

  6. Python中的匿名函数lambda的用法

    一.lambda函数的简介  对lambda函数,它其实是一个类似于def的函数,只不过lambda是一个不需要定义函数名的匿名函数.当我们在有些时候,需要做一些简单的数学计算时,如果定义一个def函 ...

  7. 「雅礼集训 2018 Day10」贪玩蓝月

    题目链接 题意分析 我们考虑维护两个栈 分别支持左边的插入删除以及右边的插入删除 然后对于两两个栈的我们需要用背包求出最优答案 注意 删除时如果不够的话 我们需要从另一个栈中取出一半加入另一个栈中 注 ...

  8. 微信小程序富文本编辑，Thinkphp5.1

    内容很简单,代码做了注释可以看一下 主要是把 文本 标题 标题颜色  图片 赋值到数组内, 举例: { pic: "/Share/image/images/bgqq_01.png" ...

  9. CSS02--四种样式、背景、文本、链接状态、表格样式

    接上面的“CSS01”,我们接着来说一下样式.很多人不知道的是一个HTML元素有四种样式,分别是浏览器默认样式.外部样式.内部样式.内联样式,而它们的优先级是越来越高的,后面的样式会覆盖前面的样式.多 ...

  10. Github使用笔记

    ========================Github使用===================概念解释:远程仓库Remote:就是指保存在github网站里的代码;本地仓库Repository ...