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学习记录（一）的更多相关文章

  1. JQuery EasyUI学习记录（三）

    1.jQuery EasyUI messager使用方式 1.1 alert方法 $(function(){ //1.alert方法---提示框 $.messager.alert("标题&q ...

  2. JQuery EasyUI学习记录（二）

    1.jquery easyUI动态添加选项卡(查看jquery easyUI手册) 1.1 用于动态添加一个选项卡 1.1.1 选中指定的选项卡和判断某个选项卡是否存在 测试代码: <a id= ...

  3. JQuery EasyUI学习记录（五）

    1.datagrid使用方法(重要) 1.1将静态html渲染为datagrid样式 <!--方式一: 将静态html渲染为datagrid样式 --> <table class=& ...

  4. JQuery EasyUI学习记录（四）

    1.EasyUI中的validatebox使用 提供的校验规则: 1.非空校验required="required" 2.使用validType指定 email: 正则表达式匹配电 ...

  5. jQuery EasyUI学习资源汇总

    jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的 ...

  6. JQuery EasyUI学习框架

    前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...

  7. jQuery EasyUI学习二

    1.   课程介绍 1.  Datagrid组件(掌握) 2.  Dialog.form组件(掌握) 3. Layout.Tabs;(掌握) Datagrid组件 2.1.  部署运行pss启动无错 ...

  8. JQuery EasyUI学习笔记

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6690888.html  简介与准备 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用 ...

  9. jQuery EasyUI学习一

    1.   jQuery EasyUI介绍 1.  创建组件的方式和原理(掌握) 2.  组件三要素(掌握) 3.  Panel.LinkButton.上下文菜单;(掌握) 简介 2.1.  jQuer ...

随机推荐

  1. 区块链：基于Hyperledger Fabric的 java 客户端开发（java sdk /java api server/java event server）

    fabric针对java 开发的部分支持不是很友好.基于目前较为稳定的fabric 1.4版本,我们封装了一个java sdk,apiserver,eventServer 封装java sdk的主要目 ...

  2. PJzhang:搜索引擎高级语法与渗透测试

    猫宁!!! 参考链接: https://www.freebuf.com/articles/network/169601.html https://www.jianshu.com/p/f8062e2cc ...

  3. left join on 和where条件的放置（转）

    http://blog.csdn.net/muxiaoshan/article/details/7617533

  4. Java NIO 必知必会（Example）

    管道流: Java NIO 管道是2个线程之间的单向数据连接.Pipe有一个source通道和一个sink通道.数据会被写到sink通道,从source通道读取. package base.nio.t ...

  5. 单例设计模式singleton

    简单引入 单例设计模式作为最简单,最常用的设计模式.一般是这两中写法,这两种写法教科书所谓的标准写法,但是实际上存在不少问题.后面介绍标准写法,以规避这些问题. 1.懒汉式: /** * 问题在于,当 ...

  6. NSSM把.Net Core部署至 Windows 服务

    NSSM把.Net Core部署至 Windows 服务 https://www.cnblogs.com/emrys5/p/nssm-netcore.html 为什么部署至Windows Servic ...

  7. Middleware-请求管道的构成

    Middleware-请求管道的构成 在 ASP.NET 中,我们知道,它有一个面向切面的请求管道,有19个主要的事件构成,能够让我们进行灵活的扩展.通常是在 web.config 中通过注册 Htt ...

  8. oracle v$database 视图

    Select db.dbid "数据库标识",--数据库的标识,当数据库在所有文件的头部创建和存储时计算出来的标记编号       db.Name "数据库名称" ...

  9. Redis sorted set（有序集合）

    Redis 有序集合是string类型元素的集合,元素不允许重复. 有序集合中的每个元素都会关联一个数值型的分数.redis正是通过分数来为集合中的成员进行从小到大的排序. 有序集合的成员是唯一的(不 ...

  10. 洛谷 CF1148A Another One Bites The Dust

    Another One Bites The Dust CF的题目在你谷上难度虚高似乎已成常态 不过这道题相比于愚人节的那几道相对好得多,没有被评成紫题. 这道题题面意思比较清楚,就是对于给定数量的'a ...