JQuery EasyUI学习记录(一)
1.主页设计(JQuery EasyUI插件)
下载easyUI开发包:
将easyUI资源文件导入页面中:
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
1.1 layout页面布局
页面代码:(region表示布局,title表示该区域的标题,并且有折叠效果)
<body class="easyui-layout">
<!-- 使用div元素描述每个区域 -->
<div title="xxx管理系统" style="height: 100px" data-options="region:'north'">北部区域</div>
<div style="width: 200px" data-options="region:'west'">西部区域</div>
<div data-options="region:'center'">中心区域</div>
<div style="width: 100px" data-options="region:'east'">东部区域</div>
<div style="height: 50px" data-options="region:'south'">南部区域</div>
</body>
效果:
1.2 accordion折叠面板
<!-- 制作accordion折叠面板
fit:true----自适应(填充父容器)
-->
<div class="easyui-accordion" data-options="fit:true">
<!-- 使用子div表示每个面板 -->
<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
<div title="面板二">2222</div>
<div title="面板三">3333</div>
</div>
其中data-options="iconCls:'icon-cut'"表示此面板的图标
效果:
1.3 tabs选项卡面板
closeable:true表示面板有删除按钮
<!-- 制作一个tabs选项卡面板 -->
<div class="easyui-tabs" data-options="fit:true">
<!-- 使用子div表示每个面板 -->
<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
<div data-options="closable:true" title="面板二">2222</div>
<div title="面板三">3333</div>
</div>
效果:
JQuery EasyUI学习记录(一)的更多相关文章
- JQuery EasyUI学习记录(三)
1.jQuery EasyUI messager使用方式 1.1 alert方法 $(function(){ //1.alert方法---提示框 $.messager.alert("标题&q ...
- JQuery EasyUI学习记录(二)
1.jquery easyUI动态添加选项卡(查看jquery easyUI手册) 1.1 用于动态添加一个选项卡 1.1.1 选中指定的选项卡和判断某个选项卡是否存在 测试代码: <a id= ...
- JQuery EasyUI学习记录(五)
1.datagrid使用方法(重要) 1.1将静态html渲染为datagrid样式 <!--方式一: 将静态html渲染为datagrid样式 --> <table class=& ...
- JQuery EasyUI学习记录(四)
1.EasyUI中的validatebox使用 提供的校验规则: 1.非空校验required="required" 2.使用validType指定 email: 正则表达式匹配电 ...
- jQuery EasyUI学习资源汇总
jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的 ...
- JQuery EasyUI学习框架
前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...
- jQuery EasyUI学习二
1. 课程介绍 1. Datagrid组件(掌握) 2. Dialog.form组件(掌握) 3. Layout.Tabs;(掌握) Datagrid组件 2.1. 部署运行pss启动无错 ...
- JQuery EasyUI学习笔记
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6690888.html 简介与准备 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用 ...
- jQuery EasyUI学习一
1. jQuery EasyUI介绍 1. 创建组件的方式和原理(掌握) 2. 组件三要素(掌握) 3. Panel.LinkButton.上下文菜单;(掌握) 简介 2.1. jQuer ...
随机推荐
- SLAM的现在与未来
http://geek.csdn.net/news/detail/202128 作者:高翔,张涛,刘毅,颜沁睿. 编者按:本文节选自图书<视觉SLAM十四讲:从理论到实践>,系统介绍了视觉 ...
- 2014-10-31 NOIP模拟赛
10.30 NOIp 模拟赛 时间 空间 测试点 评测方式 挖掘机(dig.*) 1s 256M 10 传统 黑红树(brtree.*) 2s 256M 10 传统 藏宝图(treas. ...
- springboot打成jar后获取classpath下文件失败
原文链接:https://blog.csdn.net/qq_18748427/article/details/78606432 springboot打成jar后获取classpath下文件失败 使用如 ...
- jsp学习与提高(二)——JSP 隐式对象、表单处理及过滤器
1.JSP 隐式对象 JSP隐式对象是JSP容器为每个页面提供的Java对象,开发者可以直接使用它们而不用显式声明.JSP隐式对象也被称为预定义变量. JSP所支持的九大隐式对象: 对象 描述 req ...
- 洛谷P3831 回家的路
题目背景 SHOI2012 D2T1 题目描述 \(2046\) 年 \(OI\) 城的城市轨道交通建设终于全部竣工,由于前期规划周密,建成后的轨道交通网络由\(2n\)条地铁线路构成,组成了一个\( ...
- Java基础笔记(四)——命名规则、数据类型
标识符即Java程序中需要自定义的名称,如变量名.方法名.类名.包名.工程名等. 标识符的命名规则: 1.可由字母.数字.下划线(_)和美元符($)组成,不能以数字开头. 2.严格区分大小写. 3.不 ...
- vue教程3-webpack搭建项目
vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...
- G.Longest Palindrome Substring
链接:https://ac.nowcoder.com/acm/contest/908/G 题意: A palindrome is a symmetrical string, that is, a st ...
- 通过jcrop和canvas的画布功能完成对图片的截图功能与视频的截图功能实现
最近因为工作需要,做了视频截图和图截图的功能.大概需求是,用户点击某个按钮,可以对图片区域进行部分截取,然后进行进一步的业务操作. 首先说图片截图功能的思路, (1)下载Jcrop插件,添加css和j ...
- IIS 在 Windows 上托管 .NET Core2.0
使用 IIS 在 Windows 上托管 ASP.NET Core2.0 https://www.cnblogs.com/sundar/p/9195550.html 阅读目录 准备: 第一步:新建项目 ...