建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

jQuery.masterPage.js 功能强大的轻量级JQuery模板驱动引擎

来源:易助科技网浏览量:47收藏

简介

jQuery.masterPage.js是一个超轻量级的基于jQuery的母版页驱动引擎,代码文件仅1.01KB,样式文件38Bytes。虽然轻量级,但是功能并不含糊,提供了前端解析的母版页结构,该引擎可与php, jsp, asp,asp.net 等多种动态网页技术搭配使用。

(下载的附件中附有DEMO)


主要特性

1)占位符在母板中可重复使用,应用页面只需一次定义即可;

2)母版中可指定占位符的默认实现;

3)母版页中的公共样式、代码作用域覆盖到子页面;

4)体积极小,兼容其它各类前端样式库。


使用

1.  引入文件


<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" />


说明:jquery 1.11.1 及以上版本


2.  简单用法

1)母版页制作

制作母版页时,只需要在需要标记为占位符的标签上添加属性masterPlaceHolder="占位符名称"即可,在应用母版的页面中,用<div>标签实现占位符内容,在<div>标签上设置属性masterTag="占位符名称"指明占位符名称即可。在模版页中按照完整的HTML格式书写HTML, 需要使用占位符时给对应元素添加属性masterPlaceHolder, 其中填写占位符名称,  如:


<head>
  <title masterPlaceHolder="title">默认标题</title>
  <!-- TODO: 添加母版中需要引入的其它库和样式文件 -->
</head>

<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>


上例中三处占位符分别为:


<title masterPlaceHolder="title">默认标题</title>

<div class="masterTitle" masterPlaceHolder="title">默认标题</div>

<div class="masterBody" masterPlaceHolder="body"></div>


注意:

可以在母版页中引用公共的库、样式, 定义公共的javascript函数、javascript全局变量, 定义公共的样式, 所有上述内容均在子页中可见. 因此也应当注意进行命名规避, 以避免冲突。


2)子页面制作

在子页面中, 首先需要以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>



💡 注意:

1.子页中若不提供母版页中要求的占位符实现, 将会采用母版页中默认的实现;

2.子页中若提供了母板页中未要求的占位符实现, 将会自动抛弃该实现;

3.母版页中的所有前端脚本、样式子页中均可见, 应注意命名规避避免冲突。



3)页面初试化

在母板页中可以声明函数 beforePageLoad 和 afterPageLoad:



function beforePageLoad() { ... } // 或
window.beforePageLoad = function () { ... }
function afterPageLoad() { ... } // 或
window.afterPageLoad = function () { ... }



在子页面中可以声明函数 pageLoad:



function pageLoad() { ... } // 或
window.pageLoad = function () { ... }


上述三个函数的调用顺序为


1. beforePageLoad

2. pageLoad

3. afterPageLoad



相关链接

Gitee 地址:https://gitee.com/Esmool/jQuery.masterPage.js