使用jquery.layout.js构建页眉/页脚/左侧导航/中间展示内容的网页结构
背景:
快速将一个页面分成几个部分,在导航和页眉的位置放置公用的元素。
准备:
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构建页眉/页脚/左侧导航/中间展示内容的网页结构的更多相关文章
- jquery.pagination.js 新增 首页 尾页 功能
jquery.pagination.js 新增 首页 尾页 功能 废话不多说,直接上修改后的代码,修改部分已经用 update 注释包含 17-20行 99-103行 141-145行 /** * T ...
- js中window.print()去除页眉页脚
//jsp打印时去除页眉页页脚 打印前加入下面代码即可 var HKEY_Root,HKEY_Path,HKEY_Key; HKEY_Root="HKEY_CURRENT_USER" ...
- 使用js打印时去除页眉页脚
写在前面 今天的开发遇到了使用window.print()功能进行当前页面打印的功能,因为页脚左边部分显示了url,这是不能存在的,已解决,写在这里. 正文 很多网上的方法都是不能用的,最后我找到一个 ...
- NPOI 表头、页眉页脚重复设置
NPOI 是 POI 项目的 .NET 版本.POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目. 使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 ...
- LODOP在页面不同位置输出页眉页脚
Lodop中的页眉页脚项的特点是:每页固定位置输出,具体该特点可查看本博客的其他博文:Lodop打印项对象类型属性区分 Lodop中有可以设置打印项次页偏移属性,但是该方法是针对单个打印项自动分页的, ...
- ★itext-为pdf文件添加页眉页脚 | 3步完成 |
由于上一篇自定义生成pdf的功能需求又增加了,需要加上页码.所以本博客诞生了~ 1. 通过继承PdfPageEventHelper类,实现需要实现的方法 import com.lowagie.text ...
- LaTeX 页眉页脚的设置
Latex中页眉页脚的设置 1. 首先要加页眉页脚的话,需要启动宏: 我通常用fancyhdr宏包来设置页眉和页脚. \usepackage{fancyhdr} 我们在 LaTeX 中先把 page ...
- 关于JavaScript打印去掉页眉页脚
因为这个问题,Google和百度都查了个遍,网上主要解决方案都是这一个代码: <script language="JavaScript"> var hkey_root, ...
- 使用C#在word中插入页眉页脚
//插入页脚 public void InsertFooter(string footer) { if (ActiveWindow.ActivePane.View.Type == WdViewType ...
随机推荐
- (转)sudo配置文件/etc/sudoers详解及实战用法
sudo配置文件/etc/sudoers详解及实战用法 原文:http://blog.csdn.net/field_yang/article/details/51547804 一.sudo执行命令的流 ...
- 在linux上怎么查看tomcat日志
进入到tomcat的logs文件夹 tail -f catalina.out
- 【翻译转载】【官方教程】Asp.Net MVC4入门指南(3):添加一个视图
3. 添加一个视图 · 原文地址:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-vi ...
- 关于编译错误ambiguous call of overridden pre R14 auto-imported BIF get/1
今天写代码用到了进程字典,出现了一个编译错误 根据相关提示改成了erlang:put erlang/get以后即编译通过
- CSS布局技巧之——各种居中
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
- Android笔记--View绘制流程源码分析(一)
Android笔记--View绘制流程源码分析 View绘制之前框架流程分析 View绘制的分析始终是离不开Activity及其内部的Window的.在Activity的源码启动流程中,一并包含 着A ...
- cmd下查询端口占用以及根据进程id名称结束进程
cmd窗口中: C:\Users\insentek>netstat -aon|findstr "1099" TCP 0.0.0.0:1099 0.0.0.0:0 LISTEN ...
- Wannafly Union Goodbye 2016-A//初识随机化~
想来想去还是把这个题写下来了.自己在补题遇到了许多问题. 给出n(n<=1e5)个点,求是否存在多于p(p>=20)×n/100的点在一条直线上... 时限20s,多组数据,暴力至少n^2 ...
- FreeRTOS_信号量
FreeRTOS信号量 信号量是操作系统总重要的一部分,信号量一般用来进行资源管理和任务同步,FreeRTOS中信号量又分为二值信号量.计数型信号量.互斥信号量和递归互斥信号量.不同的信号量其应用场景 ...
- 2018.2.14 Java中的哈夫曼编码
概念 哈夫曼编码(Huffman Coding),又称霍夫曼编码,是一种编码方式,哈夫曼编码是可变字长编码(VLC)的一种.Huffman于1952年提出一种编码方法,该方法完全依据字符出现概率来构造 ...