开发者社区> 乌云上> 正文

【原】jQuery easyUI 快速搭建前端框架

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

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 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
直播揭秘飞冰 | 淘系中后台负责人教你快速搭建企业微前端架构
主题:微前端 + icejs 助力企业级中后台开发 时间:3月5日 19:00-20:00 嘉宾:大果 阿里巴巴淘系技术前端技术专家
1078 0
前端工程师如何快速的开发一个微信JSSDK应用
亲们,订阅号出来已经很久了,作为一个前端工程师或者全栈工程师,你是不是错过了什么?大概许多攻城狮同砚还没有反应过来订阅号怎么回事,就马上要被微信的应用号秀一脸了。在应用号还没有正式出来之前,我们赶紧一起来看看怎样给自己的订阅号加个网页功效吧。 一、订阅号网页与平凡的HTML5网页的区别 可能会有很多同学还没有弄清楚普通的HTML网页与订阅号网页的差别,我在这里简朴的说明一下。 订阅号的网页就
1994 0
Netty:一个非阻塞的客户端/服务器框架
Netty:一个非阻塞的客户端/服务器框架 Netty是一个异步事件驱动的网络应用框架,为Java网络应用的开发带来了一些新活力。Netty由协议服务器和客户端所组成,可用于快速开发可维护的高性能软件。
1095 0
阿里云ECS服务器搭建SpringBoot后端接驳微信小程序前端使用心得 #飞天加速计划·高校学生在家实践
了解到飞天加速计划,大学生可以免费体验阿里云ECS服务器。想到最近在弄的一个小程序后端在部署在阿里云服务器,前来尝试了阿里云的服务。使用过程很顺畅,也碰到了服务器端口3306无法访问的问题,咨询了客服给我了很满意的解决方案。希望发表给大家带来一些参考。希望大家可以避开这个坑。
47 0
Apache Thrift - 可伸缩的跨语言服务开发框架
http://www.ibm.com/developerworks/cn/java/j-lo-apachethrift/   前言: 目前流行的服务调用方式有很多种,例如基于 SOAP 消息格式的 Web Service,基于 JSON 消息格式的 RESTful 服务等。
821 0
Framework7 – 赞!功能齐全的 iOS7 App 前端框架
  Framework7 是一个功能很全的 HTML 框架,用来构建 iOS7 应用程序。 Framework7 允许您灵活搭建列表视图(表视图) 。你可以让他们作为导航菜单,你可以在列表里面使用图标,输入框以及任何元素,甚至使它们嵌套。
791 0
推荐25款实用的 HTML5 前端框架和开发工具【下篇】
  快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5。HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带给用户桌面应用程序的速度,性能和体验。
907 0
+关注
乌云上
熟悉MySQL,SQL Server等数据库,熟悉.NET和Java相关领域, 擅长.NET ,PHP,Python,Node.js,SQL Server,jQuery 喜欢音乐和诗歌的技术宅
146
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载