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. 洛谷P2134 百日旅行

    P2134 百日旅行 题目背景 重要的不是去哪里,而是和你在一起.——小红 对小明和小红来说,2014年7月29日是一个美好的日子.这一天是他们相识100天的纪念日. (小明:小红,感谢你2场大考时默 ...

  2. Node.js crypto加密模块汇总

    第一篇文章:MD5 和 SHA家族 概述:使用Node实现较为简单的Hash加密算法,本篇实际上重不在Hash加密,主要的还是为了引出crypto加密的三种方式 第二篇文章:HMAC 概述:密钥相关的 ...

  3. Linux常用命令汇总（未完，待补充）

    由于工作中经常要和Linux服务器打交道,故整理了一些常用的Linux命令,方便新入职的同学或实习生参考学习. 1. 查看Linux内核版本 #uname -a 2. ctrl+insert:复制选中 ...

  4. Codeforces 161E（搜索）

    要点 标签是dp但搜索一发就能过了. 因为是对称矩阵所以试填一下就是一个外层都填满了,因此搜索的深度其实不超过5. 显然要预处理有哪些素数.在这个过程中可以顺便再处理出一个\(vector:re[le ...

  5. c++11 右值的学习

    从4行代码看右值引用 概述 简单的左值和右值的判断就是  看是否可以取得地址   可取得地址 是左值     不能则  是右值! c++98/03中的左值引用是这样的: int i = 0; int& ...

  6. linux打包文件,压缩文件

    1.打包: linux下最常用的打包程序就是tar了,使用tar程序打出来的包我们常称为tar包,tar包文件的命令通常都是以.tar结尾的.生成tar包后,就可以用其它的程序来进行压缩. 1．命令格 ...

  7. 使用Spring Security OAuth2进行简单的单点登录

    1.概述 在本教程中,我们将讨论如何使用Spring Security OAuth和Spring Boot实现SSO - 单点登录. 我们将使用三个单独的应用程序: 授权服务器 - 这是中央身份验证机 ...

  8. [原]Maven项目编译后classes文件中没有.xml问题

    在做spring+mybatiss时,自动扫描都配置正确了,却在运行时出现了如下错误.后来查看target/classes/.../dao/文件夹下,发现只有mapper的class文件,而没有xml ...

  9. windows下指定端口号起步memcached

    双击.exe启动的话,默认启动的端口是11211 ,要指定端口的话加 -p + 端口号,如: E:\tools\memcached-1.4.5-win32>memcached-1.4.5.exe ...

  10. Android使用AchartEngine绘制曲线图

    1.在布局文件中加入LinearLayout布局,如下: <LinearLayout android:id="@+id/chart" android:orientation= ...