代码拉取完成，页面将自动刷新
基于 jQuery 的母版页驱动引擎
jQuery 1.11.1 (通过测试, 早期版本不做保证)
使用jsp制作母版页, 在母版页中按照完整的HTML格式书写HTML, 需要使用占位符时给对应元素添加属性masterPlaceHolder, 其中填写占位符名称, 例如
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title masterPlaceHolder="title">默认标题</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.masterPage.js"></script>
<link rel="StyleSheet" src="css/jquery.masterPage.css" />
<!-- TODO: 添加母版中需要引入的其它库和样式文件 -->
</head>
<body>
<div class="masterTop">
<div class="masterLogo"></div>
<div class="masterTitle" masterPlaceHolder="title">默认标题</div>
<div class="masterNavButtons">
<!-- TODO: 添加母版上公共的导航按钮 -->
</div>
<div class="masterLoginPanel">
<!-- TODO: 添加母版上公共的登录按钮 -->
</div>
</div>
<div class="masterBody" masterPlaceHolder="body"></div>
<div class="masterTail">
<!-- TODO: 添加母版上公共的底部栏目 -->
</div>
</body>
</html>
上例中三处占位符分别为
<title masterPlaceHolder="title">默认标题</title>
<div class="masterTitle" masterPlaceHolder="title">默认标题</div>
<div class="masterBody" masterPlaceHolder="body"></div>
占位符中可以填充默认HTML内容, 当引用母版页的子页没有指定占位符内容时, 将会使用母版页中默认的内容, 如上例中title占位符所示.
可以在母版页中多次引用同名占位符, 如上例中title占位符所示.
注意
可以在母版页中引用公共的库、样式, 定义公共的javascript函数、javascript全局变量, 定义公共的样式, 所有上述内容均在子页中可见. 因此也应当注意进行命名规避, 以避免冲突.
在子页面中, 首先需要以JSP方式声明对母版页的引用, 按照如下格式
<%@ include file="母版页文件路径" %>
之后使用如下格式填充母版页中
<div masterTag="占位符名称">
<!-- TODO: 填充内容 -->
</div>
子页面的填充元素应当为div, 且不应当给其设置除masterTag以外的任何属性.
当需要执行页面加载完毕后动作时, 建议定义页面内全局pageLoad()函数代替使用body的onload事件和$(document).ready事件. 使用pageLoad()可以确保母版页完成了前端解析之后方被触发.
若子页面不提供pageLoad()函数, 浏览器控制台将输出警告, 指示无法找到该函数, 若确实不需要此函数, 可以忽略此警告.
假设上例的母版页保存在路径/view/master/demoMaster.jsp下, 引用该母版的完整的示例如下
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/view/masters/demoMaster.jsp" %>
<div masterTag="title">Demo Page for jQuery Master Page plugin</div>
<div masterTag="body">
<p>Hello World!</p>
<div id="txtResult"></div>
</div>
<!-- TODO: 在此引入子页面专用的库和样式 -->
<script type="text/javascript">
function pageLoad() {
$('#txtResult').text("Ready to Go");
}
</script>
注意
子页中若不提供母版页中要求的占位符实现, 将会采用母版页中默认的实现;
子页中若提供了母板页中未要求的占位符实现, 将会自动抛弃该实现;
母版页中的所有前端脚本、样式子页中均可见, 应注意命名规避避免冲突.
在母板页中可以声明函数 beforePageLoad 和 afterPageLoad
function beforePageLoad() { ... } // 或
window.beforePageLoad = function () { ... }
function afterPageLoad() { ... } // 或
window.afterPageLoad = function () { ... }
在子页面中可以声明函数 pageLoad
function pageLoad() { ... } // 或
window.pageLoad = function () { ... }
以完成页面初始化动作.
上述三个函数的调用顺序为
本插件为前端母版解析插件, 所有占位符匹配、替换动作均在前端完成.
目前本插件在JSP环境下测试正常, 理论上可在ASP/ASP.NET, PHP等任何动态网页中应用, 相应的对头部服务器脚本引用格式进行对应调整即可. 但未经测试不做保证. 有兴趣参与贡献者, 欢迎加入测试和改进行列.
本插件为针对传统多页面应用设计, 不兼容单页应用(Single Page Application, SPA)框架.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型
马建仓 AI 助手
