1.主页设计(JQuery EasyUI插件)

下载easyUI开发包：

将easyUI资源文件导入页面中：

  1. <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
  2. <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
  3. <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
  4. <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>

1.1 layout页面布局

页面代码：（region表示布局，title表示该区域的标题，并且有折叠效果）

  1. <body class="easyui-layout">
  2.     <!-- 使用div元素描述每个区域 -->
  3.     <div title="xxx管理系统" style="height: 100px" data-options="region:'north'">北部区域</div>
  4.     <div style="width: 200px" data-options="region:'west'">西部区域</div>
  5.     <div data-options="region:'center'">中心区域</div>
  6.     <div style="width: 100px" data-options="region:'east'">东部区域</div>
  7.     <div style="height: 50px" data-options="region:'south'">南部区域</div>
  8. </body>

效果：

1.2 accordion折叠面板

  1. <!-- 制作accordion折叠面板
  2.             fit:true----自适应(填充父容器)
  3.         -->
  4.         <div class="easyui-accordion" data-options="fit:true">
  5.             <!-- 使用子div表示每个面板 -->
  6.             <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
  7.             <div title="面板二">2222</div>
  8.             <div title="面板三">3333</div>
  9.         </div>

其中data-options="iconCls:'icon-cut'"表示此面板的图标

效果：

1.3 tabs选项卡面板

closeable:true表示面板有删除按钮

  1. <!-- 制作一个tabs选项卡面板 -->
  2.         <div class="easyui-tabs" data-options="fit:true">
  3.             <!-- 使用子div表示每个面板 -->
  4.             <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
  5.             <div data-options="closable:true" title="面板二">2222</div>
  6.             <div title="面板三">3333</div>
  7.         </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. ue4 character 物理测试

    charactor里 CapsuleComponnet Mesh CharacterMovement 3个组件里有有物理开关 目前看Mesh的Simulate Physics+Enable Gravi ...

  2. 剑指Offer的学习笔记（C#篇）-- 替换空格

    题目描述 请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 一 . 自己的想法 老实说,貌 ...

  3. How to generate a CSR in Microsoft IIS 7

    How to generate a CSR in Microsoft IIS 7 To help you generate your CSR for Microsoft IIS 7 we've pre ...

  4. 这几道Python面试题，稳准狠，Python面试题No15

    必须放一个表情包,太魔性了! 第1题: 修改以下Python代码,使得下面的代码调用类A的show方法? 原始代码 class A(object): def run(self): print(&quo ...

  5. shell脚本编程入门

    Linux的Shell种类众多,这里我们关注的重点是Bash. 基本语法 环境变量$PATH IO重定向:  以<改变标准输入 如:tr -d '\r' < dos-file.txt 以& ...

  6. 微信小程序请求openid错误码40163

    通过wx.login({})方法获取到的code只能使用一次,如果需要在哎服务器端再次请求获取openid来进行校验,需要再次通过wx.login({})方法获取code 否则会报错误代码40163, ...

  7. day4列表作业详解

    1.day4题目 day4作业 1,写代码,有如下列表,按照要求实现每一个功能 li = ["alex", "WuSir", "ritian" ...

  8. bzoj4650: [Noi2016]优秀的拆分 hash

    好气啊,没开longlong又biubiu了 底层: 用hash或者奇奇怪怪的算法兹磁logn求最长公共前后缀 思路: 统计出从一个点开始和结束的形如AA的子串的个数 统计的时候把相邻的结果相乘加起来 ...

  9. Uva1377

    /* 在n个刻度和他们的差里挑不超过7个刻度,0是固定的,最大的刻度肯定是最大值,然后剩下的dfs挑. */ #include<bits/stdc++.h> #define inf 0x3 ...

  10. Hive_Hive的数据模型_视图

    - 视图是一种虚表,是一个逻辑概念:可以跨越多张表- 视图建立在已有表的基础上,视图赖以建立的这些表称为基表.- 视图可以简化复杂的查询. 创建视图 create view viewName as s ...