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

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

转载于:https://www.cnblogs.com/1906859953Lucas/p/9212852.html

【原】jQuery easyUI 快速搭建前端框架相关推荐

使用easyui快速搭建管理员主界面
使用easyui快速搭建管理员主界面 easyui 主页:index.jsp sidebarTree.json:左侧菜单内容 easyui easyui又叫Jquery EasyUI,是基于Jquer ...
神经风格转移：Anaconda快速搭建DL框架学梵高（Van Gogh）绘画Ubuntu16.04 CPUGPU版
神经风格转移:Anaconda快速搭建DL框架学梵高(Van Gogh)绘画 Ubuntu16.04 CPU&GPU版最近开始学ML和DL的知识,开始新的方向,像吴恩达说的,看的再多,不跑几 ...
零基础快速搭建rxjava框架
零基础快速搭建rxjava框架基本概念定义 RxJava 是一个基于事件流.实现异步操作的库原理角色作用类比被观察者(Observable) 产生事件顾客观察者(Observer) ...
【快速搭建系列】idea快速搭建SSH2框架（struts2+spring5+hibernate5）
[快速搭建系列]idea快速搭建SSH2框架(struts2+spring5+hibernate5) 压了很久的文,都差点忘记了网上关于SSH的框架教程五花八门的,自己踩了一周多的坑说什么也要搞一个 ...
快速搭建ThinkPHP框架教程
本文教你如何快速搭建ThinkPHP框架.ThinkPHP 是一款免费开源的,快速.简单的面向对象的轻量级PHP开发框架,遵循Apache2开源协议发布,是为了敏捷 Web 应用开发和简化企业应用开发 ...
云服务器 ECS 建站教程：快速搭建 ThinkPHP 框架
快速搭建 ThinkPHP 框架 ThinkPHP 是一款免费开源的,快速.简单的面向对象的轻量级 PHP 开发框架,遵循 Apache2 开源协议发布,是为了敏捷 Web 应用开发和简化企业应用开发 ...
php layui 框架,快速上手前端框架layui
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. 一.介绍在使用layui之前,我们先要了解一下la ...
angularjs 路由---angularjs 搭建前端框架
前端框架搭建:angularjs,nodejs 安装,git 安装 let toStateCache, fromStateCache, cssToBeEnableList = []export def ...
[原] jQuery EasyUI 1.2.6源码、Demo合集、离线API
下载地址: http://files.cnblogs.com/purediy/jquery-easyui-1.2.6.zip 兄弟版本: jQuery EasyUI 1.3.4 离线API.Demo ...

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

【原】jQuery easyUI 快速搭建前端框架相关推荐

最新文章

热门文章