背景:

  快速将一个页面分成几个部分,在导航和页眉的位置放置公用的元素。

准备:

  jquery.layout.js

首先,向页面中引入如下js文件和css文件,代码:

 <link href="~/Resource/Css/Site.css" rel="stylesheet" />
<link href="~/Resource/Script/jquery.layout/jquery.layout.css" rel="stylesheet" />
<script src="~/Resource/Script/jquery.js"></script>
<script src="~/Resource/Script/jquery.layout/jquery.layout.js"></script>

然后,在指定的视图页面中,添加如下四个div元素,注意各div元素的class。

      <div class="ui-layout-north" style="padding-left:20px;padding-top:10px;height:38px;background-color:#C00">
北山北
</div>
<div class="ui-layout-south">南山南</div>
<div class="ui-layout-west">西山西</div>
<div class="ui-layout-center">
中间有谷堆
</div>

最后添加如下JS代码:

     $(function () {
$("body").layout();
})

编译并运行,效果图如下:

只是截取了网页的一部分。

使用jquery.layout.js构建页眉/页脚/左侧导航/中间展示内容的网页结构的更多相关文章

  1. jquery.pagination.js 新增 首页 尾页 功能

    jquery.pagination.js 新增 首页 尾页 功能 废话不多说,直接上修改后的代码,修改部分已经用 update 注释包含 17-20行 99-103行 141-145行 /** * T ...

  2. js中window.print()去除页眉页脚

    //jsp打印时去除页眉页页脚 打印前加入下面代码即可 var HKEY_Root,HKEY_Path,HKEY_Key; HKEY_Root="HKEY_CURRENT_USER" ...

  3. 使用js打印时去除页眉页脚

    写在前面 今天的开发遇到了使用window.print()功能进行当前页面打印的功能,因为页脚左边部分显示了url,这是不能存在的,已解决,写在这里. 正文 很多网上的方法都是不能用的,最后我找到一个 ...

  4. NPOI 表头、页眉页脚重复设置

    NPOI 是 POI 项目的 .NET 版本.POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目. 使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 ...

  5. LODOP在页面不同位置输出页眉页脚

    Lodop中的页眉页脚项的特点是:每页固定位置输出,具体该特点可查看本博客的其他博文:Lodop打印项对象类型属性区分 Lodop中有可以设置打印项次页偏移属性,但是该方法是针对单个打印项自动分页的, ...

  6. ★itext-为pdf文件添加页眉页脚 | 3步完成 |

    由于上一篇自定义生成pdf的功能需求又增加了,需要加上页码.所以本博客诞生了~ 1. 通过继承PdfPageEventHelper类,实现需要实现的方法 import com.lowagie.text ...

  7. LaTeX 页眉页脚的设置

    Latex中页眉页脚的设置 1. 首先要加页眉页脚的话,需要启动宏: 我通常用fancyhdr宏包来设置页眉和页脚. \usepackage{fancyhdr} 我们在 LaTeX 中先把 page ...

  8. 关于JavaScript打印去掉页眉页脚

    因为这个问题,Google和百度都查了个遍,网上主要解决方案都是这一个代码: <script language="JavaScript"> var hkey_root, ...

  9. 使用C#在word中插入页眉页脚

    //插入页脚 public void InsertFooter(string footer) { if (ActiveWindow.ActivePane.View.Type == WdViewType ...

随机推荐

  1. (转)sudo配置文件/etc/sudoers详解及实战用法

    sudo配置文件/etc/sudoers详解及实战用法 原文:http://blog.csdn.net/field_yang/article/details/51547804 一.sudo执行命令的流 ...

  2. 在linux上怎么查看tomcat日志

    进入到tomcat的logs文件夹 tail -f catalina.out

  3. 【翻译转载】【官方教程】Asp.Net MVC4入门指南(3):添加一个视图

    3. 添加一个视图 · 原文地址:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-vi ...

  4. 关于编译错误ambiguous call of overridden pre R14 auto-imported BIF get/1

    今天写代码用到了进程字典,出现了一个编译错误 根据相关提示改成了erlang:put erlang/get以后即编译通过

  5. CSS布局技巧之——各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  6. Android笔记--View绘制流程源码分析(一)

    Android笔记--View绘制流程源码分析 View绘制之前框架流程分析 View绘制的分析始终是离不开Activity及其内部的Window的.在Activity的源码启动流程中,一并包含 着A ...

  7. cmd下查询端口占用以及根据进程id名称结束进程

    cmd窗口中: C:\Users\insentek>netstat -aon|findstr "1099" TCP 0.0.0.0:1099 0.0.0.0:0 LISTEN ...

  8. Wannafly Union Goodbye 2016-A//初识随机化~

    想来想去还是把这个题写下来了.自己在补题遇到了许多问题. 给出n(n<=1e5)个点,求是否存在多于p(p>=20)×n/100的点在一条直线上... 时限20s,多组数据,暴力至少n^2 ...

  9. FreeRTOS_信号量

    FreeRTOS信号量 信号量是操作系统总重要的一部分,信号量一般用来进行资源管理和任务同步,FreeRTOS中信号量又分为二值信号量.计数型信号量.互斥信号量和递归互斥信号量.不同的信号量其应用场景 ...

  10. 2018.2.14 Java中的哈夫曼编码

    概念 哈夫曼编码(Huffman Coding),又称霍夫曼编码,是一种编码方式,哈夫曼编码是可变字长编码(VLC)的一种.Huffman于1952年提出一种编码方法,该方法完全依据字符出现概率来构造 ...