Esmool-jQuery.masterPage.js: На основе материнского драйвера страниц на jQuery.

jQuery.masterPage.js

Основанный на 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" masterPlacePlaceholder="body"></div>

Заполнитель может быть заполнен содержимым по умолчанию. Если дочерняя страница не указывает содержимое заполнителя, будет использоваться содержимое по умолчанию из материнской страницы, как показано в примере выше.

Можно использовать один и тот же заполнитель несколько раз в материнской странице, как показано выше.

Примечание:

Материнскую страницу можно использовать для включения общих библиотек, таблиц стилей, определения общих функций JavaScript и глобальных переменных JavaScript. Всё это доступно на дочерних страницах. Поэтому необходимо учитывать конфликты имён при использовании этих элементов.

Создание дочерней страницы

На дочерней странице сначала необходимо объявить ссылку на материнскую страницу с использованием JSP следующим образом:

	<%@ include file="Путь к файлу материнской страницы" %>

Затем заполнить материнскую страницу следующим образом:

	<div masterTag="Заполнитель">
		<!-- TODO: Заполнить содержимое -->
	</div>

Элемент заполнения на дочерней странице должен быть div и не должен иметь никаких атрибутов, кроме masterTag.

Если необходимо выполнить действие после загрузки страницы, рекомендуется определить функцию pageLoad() внутри страницы вместо использования события onload для body или $(document).ready. Использование pageLoad() гарантирует, что материнская страница полностью проанализирована перед запуском.

Если дочерняя страница не предоставляет функцию pageLoad(), браузер выдаст предупреждение о том, что функция не найдена. Если функция действительно не нужна, можно проигнорировать это предупреждение.

Предположим, что пример материнской страницы хранится в пути /view/masters/demoMaster.jsp. Пример полной ссылки на эту материнскую страницу выглядит следующим образом:

	<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
	<%@ include file="/view/masters/demoMaster.jsp" %>
	<div masterTag="title">Демо-страница для плагина jQuery Master Page</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 () { ... }

Эти функции выполняются в следующем порядке: beforePageLoad, pageLoad, afterPageLoad.

Другие примечания

Этот плагин предназначен для анализа материнской страницы на стороне клиента. Все операции сопоставления и замены заполнителей выполняются на стороне клиента.

Плагин был протестирован в среде JSP, но теоретически его можно применять в любых динамических веб-страницах, таких как ASP/ASP.NET, PHP и т. д., после соответствующей настройки ссылок на серверные скрипты. Однако это не было проверено. Если вы заинтересованы в участии в тестировании и улучшении, добро пожаловать.

Данный плагин не совместим с одностраничными приложениями (SPA).

OSCHINA-MIRROR/Esmool-jQuery.masterPage.js

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия