Закреплённые сайты: создание и управление из сценариев (ч.3)
12697
Третья часть статьи, посвящённой управлению закреплёнными веб-сайтами Internet Explorer 9 из сценариев.
6. Панели инструментов закреплённых веб-сайтов и работа с ней
Кроме команд в списке переходов, Internet Explorer 9 позволяет создать у закреплённого веб-сайта панель инструментов. Она будет располагаться в нижней части миниатюры, которая появляется при наведении курсора мыши на ярлык закреплённого сайта, помещённый в панель задач, при условии, что веб-сайт открыт.
Панель инструментов закреплённого веб-сайта может содержать до 7 кнопок. При щелчке на любой из этих кнопок может выполняться любой JavaScript-код, что открывает нам большие возможности по управлению сайтом. При желании мы можем делать кнопки панели инструментов доступными и недоступными, видимыми и невидимыми и даже менять расположенные на них иконки.
Давайте же рассмотрим процесс создания панели инструментов закреплённого веб-сайта и работу с ней.
Примечание:
Перед созданием панели инструментов обязательно следует проверить, был ли веб-сайт закреплён. Для этого можно использовать уже знакомый нам метод msIsSiteMode.
6.1. Создание панели инструментов закреплённого веб-сайта
Чтобы создать панель инструментов, нам достаточно добавить в неё кнопки и вывести её на экран.
Добавление одной кнопки выполняется вызовом метода msSiteModeAddThumbBarButton объекта External. Формат вызова этого метода таков:
window.external.msSiteModeAddThumbBarButton(
<интернет-адрес файла иконки, которая будет отображаться на кнопке>,
<текст всплывающей подсказки для кнопки>
);
е>,
<текст всплывающей подсказки для кнопки>
);[/code]
Назначение обоих параметров этого метода понятно из их описания. Их значения должны быть представлены в виде строк.
Иконки, которые будут выводиться на кнопках панели инструментов, должны иметь размеры 16х16 пикселов.
Метод msSiteModeAddThumbBarButton возвращает особое целочисленное значение, называемое идентификатором созданной кнопки. Этот идентификатор нам обязательно понадобится впоследствии, поэтому сохраним его в какой-либо переменной.
[code]var iPlayID = window.external.msSiteModeAddThumbBarButton(
"/icons/play-icon.ico", "Начать воспроизведение");
var iStopID = window.external.msSiteModeAddThumbBarButton(
"/icons/stop-icon.ico", "Остановить воспроизведение");[/code]
Здесь мы создали для веб-сайта две кнопки: одна запускает воспроизведение аудио- или видеоролика, другая его останавливает.
После того как мы создадим все нужные нам кнопки панели инструментов, нам следует вывести панель на экран. Для этого применяется метод msSiteModeShowThumbBar объекта External. Он не принимает параметров и не возвращает результата.
[code]window.external.msSiteModeShowThumbBar();[/code]
А теперь уясним несколько очень важных моментов, связанных с панелями инструментов.
- После вывода созданной панели инструментов на экран вызовом метода msSiteModeShowThumbBar мы больше не сможем добавить на неё ни одной кнопки. Поэтому нам следует сразу же создать все кнопки панели инструментов, что могут нам понадобиться. Впоследствии мы можем сделать какие-то кнопки панели инструментов недоступными для пользователя или вообще невидимыми, а также заменить иконки, которые на них отображаются, другими. Как это делается, мы скоро узнаем.
- Будучи однажды созданной, панель инструментов прикрепляется к данному окну или вкладке браузера и остаётся на экране даже после того, как пользователь уйдёт с веб-страницы, которая её создала. Панель инструментов будет удалена только после закрытия данного окна или вкладки. Поскольку обычно панель инструментов актуальна только для определённых веб-страниц, то при уходе с веб-страницы, где она не должна действовать, нам придётся её явно скрыть. Как это делается, мы узнаем потом.
- Предположим, что на какой-то веб-странице закреплённого сайта мы создали панель инструментов с кнопками. Как мы уже знаем, эта панель инструментов так и останется на экране даже послу ухода с создавшей её веб-страницы. Впоследствии, уже на другой странице, мы создаём эту панель с кнопками повторно. При этом значения параметров создаваемой кнопки (интернет-адреса иконки и текста всплывающей подсказки) совпадают со значениями параметров кнопки, уже присутствующей на панели инструментов. Будет ли эта кнопка создана повторно? Нет. Метод msSiteModeAddThumbBarButton просто вернёт то же значение идентификатора, которое имеет созданная ранее кнопка. Это позволит нам использовать для обработки щелчков на кнопках один и тот же код на разных веб-страницах.
6.2. Обработка щелчков на кнопках панели инструментов
Так, панель инструментов с кнопками мы создали. Только на данный момент от неё мало толку. Чтобы толк был, нам надо как-то обрабатывать щелчки на кнопках, выполняя действия, ради которых и создавалась эта панель инструментов. Этим-то мы сейчас и займёмся.
Любой браузер поддерживает объект HTMLDocument, представляющий саму веб-страницу. Экземпляр этого объекта, представляющий текущую веб-страницу и созданный самим браузером, хранится в переменной document, которая доступна в любом веб-сценарии.
Объект HTMLDocument в реализации Internet Explorer 9 поддерживает событие msthumbnailclick. Оно возникает, когда пользователь щёлкает на любой кнопке панели инструментов закреплённого веб-сайта. То, что нам нужно.
[code]document.addEventListener("msthumbnailclick",
function (evt)
{
. . .
}, false);[/code]
Здесь мы привязали к событию msthumbnailclick функцию-обработчик, которая будет обрабатывать щелчки на всех кнопках панели инструментов.
В функцию-обработчик всегда передаётся экземпляр объекта Event или производного от него объекта, хранящий сведения о возникшем событии. Чтобы мы смогли получить к нему доступ, мы должны указать в списке параметров объявляемой функции-обработчика параметр, которому будет присвоен этот экземпляр объекта. Так, в приведённом выше примере этот параметр указан под именем evt.
В случае события msthumbnailclick функции-обработчику передаётся экземпляр объекта MSSiteModeEvent, производного от объекта Event. В дополнение к свойствам, унаследованным от объекта Event, он поддерживает ещё одно свойство.
Это свойство buttonID, хранящее идентификатор кнопки, на которой щёлкнул пользователь (вот нам и пригодились сохранённые ранее идентификаторы кнопок!). Оно доступно только для чтения.
Чтобы выяснить, на какой именно кнопке щёлкнул пользователь, мы можем использовать такой код:
[code]document.addEventListener("msthumbnailclick",
function (evt)
{
switch (evt.buttonID) {
case iPlayID:
. . .
case iStopID:
. . .
}
}, false);[/code]
6.3. Управление доступностью и видимостью кнопок панели инструментов
Изначально все создаваемые кнопки панели инструментов доступны для пользователя и видимы на экране. Однако мы можем при желании сделать какую-то кнопку недоступной или даже невидимой.
Управлять доступностью и видимостью кнопки можно с помощью метода msSiteModeUpdateThumbBarButton объекта External. Формат вызова этого метода приведён ниже.
[code]window.external.msSiteModeUpdateThumbBarButton(
<идентификатор кнопки>,
<доступность кнопки>,
<видимость кнопки>
);[/code]
Первым параметром этому методу передаётся целочисленный идентификатор кнопки. Второй параметр позволяет управлять доступностью этой кнопки: значение true делает кнопку доступной для пользователя, значение false - недоступной. Третий же параметр задаёт видимость кнопки: значение true делает кнопку видимой на экране, а значение false - невидимой.
Результата метод msSiteModeUpdateThumbBarButton не возвращает.
[code]window.external.msSiteModeUpdateThumbBarButton(iPlayID, false, true);[/code]
Здесь мы делаем первую из созданных нами ранее кнопок видимой, но недоступной.
[code]window.external.msSiteModeUpdateThumbBarButton(iStopID, true, false);[/code]А здесь мы скрываем вторую кнопку, созданную нами.
6.4. Альтернативные стили кнопок
А ещё мы можем заменить иконку, отображающуюся на какой-либо кнопке панели инструментов, другой и, при желании, задать для неё другой текст всплывающей подсказки.
В терминологии Internet Explorer 9 комбинация иконки, которая отображается на кнопке, и текста всплывающей подсказки для этой кнопки называется стилем кнопки. Стиль следует отличать от состояния: состояние указывает доступность и видимость кнопки, а стиль - иконку и текст всплывающей подсказки.
Иконка и текст всплывающей подсказки, что мы указали при создании кнопки, формируют стиль кнопки по умолчанию. Этот стиль неявно создаётся самим браузером.
Если мы хотим заменить иконку и, возможно, текст всплывающей посказки кнопки другими, мы должны зарегистрировать их в составе альтернативного стиля кнопки. Отметим, что каждый альтернативный стиль при регистрации привязывается к конкретной кнопке; таким образом, использовать один стиль сразу для нескольких кнопок мы не сможем. После регистрации стиля мы сможем присвоить его кнопке, и она получит иконку и текст всплывающей подсказки, определённые в этом стиле.
Регистрацию альтернативного стиля выполняет метод msSiteModeAddButtonStyle объекта External. Вот формат его вызова:
[code]window.external.msSiteModeAddButtonStyle(
<идентификатор кнопки, для которой регистрируется альтернативный стиль>,
<интернет-адрес файла новой иконки, которая будет отображаться на кнопке>[,
<текст новой всплывающей подсказки для кнопки>]
);[/code]
Назначения параметров этого метода понятно без дополнительных объяснений. Значение первого параметра должно быть целым числом (что и понятно - ведь идентификатор кнопки является целочисленной величиной), а значения остальных двух параметров - строками. Третий параметр является необязательным; если он опущен, альтернативный стиль не изменит текст всплывающей подсказки, определённый для кнопки ранее.
Метод msSiteModeAddButtonStyle возвращает особое целочисленное значение, называемую идентификатором зарегистрированного стиля. Это значение нам следует сохранить в какой-либо переменной, иначе мы не сможем потом присвоить зарегистрированный стиль кнопке.
[code]var iSPauseID = window.external.msSiteModeAddButtonStyle(iPlayID,
"/icons/pause-icon.ico", "Приостановить воспроизведение");[/code]
Здесь мы регистрируем новый альтернативный стиль для первой кнопки из созданных нами ранее. Этот стиль включит в себя новую иконку и новый текст всплывающей подсказки.
Осталось уяснить несколько важных моментов, связанных с альтернативными стилями.
- Уже зарегистрированный альтернативный стиль не может быть впоследствии изменён. Так, мы не можем указать для стиля другую иконку или текст всплывающей подсказки.
- Каждый альтернативный стиль привязывается к конкретной кнопке. Впоследствии мы можем присвоить его только той кнопке, для которой он зарегистрирован. Собственно, об этом уже говорилось.
- Стиль кнопки по умолчанию всегда имеет идентификатор 0. Это позволит нам быстро вернуться к изначальному виду кнопки.
- Если для регистрации альтернативного стиля мы вызовем метод msSiteModeAddButtonStyle с теми же значениями его параметров (идентификатора кнопки, интернет-адреса иконки и текста всплывающей подсказки), что использовались в вызове этого же метода ранее, на другой веб-странице, данный метод вернёт то же значение идентификатора зарегистрированного стиля, что и при предыдущем вызове. Это позволит нам использовать для изменения внешнего вида кнопок один и тот же код на разных веб-страницах.
Итак, нужный альтернативный стиль мы зарегистрировали. Как теперь присвоить его кнопке? Вызвать метод msSiteModeShowButtonStyle объекта External. Формат его вызова таков:
[code]window.external.msSiteModeShowButtonStyle(
<идентификатор кнопки, для которой был зарегистрован
присваиваемый альтернативный стиль>,
<идентификатор присваиваемого альтернативного стиля>
);[/code]
Назначение параметров этого метода понятно сразу. Также понятно, что их значения должны быть целочисленными.
Метод msSiteModeShowButtonStyle не возвращает результата.
Примечание:
При присвоении кнопке какого-либо стиля - альтернативного или стиля по умолчанию - она автоматически становится доступной и видимой. Поэтому, если кнопка после присвоения стиля должна оставаться в том же состоянии, в котором она находилась до этого, нам придётся явно задать ей нужное состояние, вызвав метод msSiteModeUpdateThumbBarButton (см. параграф 6.3).
[code]window.external.msSiteModeShowButtonStyle(iPlayID, iSPauseID);[/code]
Здесь мы присваиваем первой кнопке из созданных нами ранее только что зарегистрированный стиль. После этого кнопка запуска воспроизведения станет кнопкой его приостановки.
[code]window.external.msSiteModeShowButtonStyle(iPlayID, 0);[/code]
А здесь мы присваиваем этой же кнопке стиль по умолчанию (он, как мы помним, имеет идентификатор 0), тем самым возвращая кнопке изначальный вид.
6.5. Скрытие панели инструментов после ухода с веб-страницы
В параграфе 6.1 говорилось, что панель инструментов при создании привязывается к текущей вкладке или окну браузера и остаётся на экране даже после ухода с веб-страницы, которая, собственно, её и создала. Иногда это может быть полезно, но чаще - нет.
К сожалению, в текущей реализации Internet Explorer мы не можем ни удалить, ни даже скрыть панель инструментов. Единственное, что мы можем сделать, - сделать все её кнопки невидимыми, воспользовавшись уже знакомым нам методом msSiteModeUpdateThumbBarButton.
Уже знакомый нам объект Window, представляющий окно или вкладку браузера, поддерживает событие unload, возникающее перед выгрузкой открытой веб-страницы из памяти. Выгрузка веб-страницы производится при уходе с неё каким-либо способом (щелчком на гиперссылке, вводом нового интернет-адреса, программной переадресацией), закрытии вкладки или окна браузера, в котором она открыта, и др.
Обработчик события unload - лучшее место, где можно поместить код, который скроет кнопки не нужной более панели инструментов.
[code]window.addEventListener("unload",
function ()
{
window.external.msSiteModeUpdateThumbBarButton(iPlayID, true, false);
window.external.msSiteModeUpdateThumbBarButton(iStopID, true, false);
}, false);[/code]
6.6. Пример веб-страницы с панелью инструментов
В качестве примера давайте возьмём веб-страницу с размещённым на ней аудиороликом, описанную в , и дополним её кодом, создающим панель инструментов с двумя кнопками. Первая кнопка будет запускать и приостанавливать воспроизведение, а вторая - останавливать его полностью. HTML-код этой веб-страницы приведён ниже.
[code]<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Панель инструментов</TITLE>
</HEAD>
<BODY>
<AUDIO ID="aud1" SRC="sound.mp3" CONTROLS></AUDIO>
<SCRIPT>
var oAud1 = document.getElementById("aud1");
if (window.external.msIsSiteMode()) {
var iPlayID = window.external.msSiteModeAddThumbBarButton("play-icon.ico",
"Воспроизведение");
var iStopID = window.external.msSiteModeAddThumbBarButton("stop-icon.ico",
"Стоп");
var iSPauseID = window.external.msSiteModeAddButtonStyle(iPlayID,
"pause-icon.ico", "Пауза");
window.external.msSiteModeShowThumbBar();
window.external.msSiteModeUpdateThumbBarButton(iPlayID, true, true);
window.external.msSiteModeUpdateThumbBarButton(iStopID, false, true);
document.addEventListener("msthumbnailclick",
function (evt)
{
switch (evt.buttonID) {
case iPlayID:
if (oAud1.paused) {
oAud1.play();
window.external.msSiteModeShowButtonStyle(iPlayID, iSPauseID);
} else {
oAud1.pause();
window.external.msSiteModeShowButtonStyle(iPlayID, 0);
}
window.external.msSiteModeUpdateThumbBarButton(iStopID, true, true);
break;
case iStopID:
oAud1.pause();
oAud1.currentTime = 0;
window.external.msSiteModeShowButtonStyle(iPlayID, 0);
window.external.msSiteModeUpdateThumbBarButton(iStopID, false, true);
break;
}
}, false);
window.addEventListener("unload",
function ()
{
window.external.msSiteModeUpdateThumbBarButton(iPlayID, true, false);
window.external.msSiteModeUpdateThumbBarButton(iStopID, true, false);
}, false);
}
</SCRIPT>
</BODY>
</HTML>[/code]
Сначала мы проверяем, принадлежит данная веб-страница закреплённому веб-сайту. Если это так, мы выполняем код, создающий панель инструментов и обрабатывающий щелчки на её кнопках.
Сначала мы создаём сами кнопки и регистрируем альтернативный стиль, который потом используем, чтобы превратить кнопку, запускающую воспроизведение аудиоролика, в кнопку его приостановки. Напоследок мы выводим панель инструментов на экран.
Далее мы задаём состояние кнопки, останавливающей воспроизведение, делая её недоступной и видимой. Это нужно, чтобы пользователь не смог остановить воспроизведение, которое ещё не началось.
Но мы также задаём состояние кнопки, запускающей и приостанавливающей воспроизведение, причём делаем её доступной и видимой. Но зачем? Ведь любая кнопка уже после её создания доступна и видима! Давайте разберёмся...
Предположим, пользователь зашёл на данную веб-страницу, что-то там сделал и ушёл с неё. При уходе с веб-страницы она выгружается из памяти, и выполняется обработчик события unload, скрывающий кнопки панели инструментов (мы рассмотрим его потом). Таким образом, панель инструментов останется на экране, но все её кнопки будут скрыты.
Далее пользователь решил вернуться на данную страницу. Снова выполнится код, создающий кнопки, но, поскольку эти кнопки уже присутствуют в панели инструментов (хотя и скрыты), повторного их создания выполнено не будет. Но они всё ещё будут скрыты, так что воспользоваться ими пользователь не сможет.
Именно поэтому мы сразу же после создания кнопок задаём для всех них соответствующее изначальное состояние.
Далее мы регистрируем обработчик события msthumbnailclick, который будет обрабатывать щелчки на кнопках панели инструментов. Рассмотрим его.
Если был выполнен щелчок на первой кнопке (она запускает воспроизведение), мы проверяем, было ли воспроизведение ранее приостановлено. Если оно было приостановлено, мы запускаем его и присваиваем кнопке альтернативный стиль, после чего она станет кнопкой приостановки воспроизведения. Если же воспроизведение ещё не было приостановлено, мы приостанавливаем его и присваиваем кнопке стиль по умолчанию, делая её кнопкой запуска воспроизведения. В любом случае мы также делаем кнопку остановки доступной, чтобы пользователь смог остановить воспроизведение.
Если же был выполнен щелчок на кнопке остановки воспроизведения, мы его останавливаем. К сожалению, встроенный аудиопроигрыватель Internet Explorer 9, создаваемый тегом <AUDIO>, не имеет средств для полной остановки воспроизведения. Поэтому мы пошли на хитрость: мы сначала приостанавливаем воспроизведение, а потом "перематываем" аудиоролик в самое начало. После этого мы присваиваем кнопке воспроизведения стиль по умолчанию, делая её тем самым именно кнопкой запуска воспроизведения (а не его приостановки), и делаем кнопку остановки недоступной. То есть возвращаем обе кнопки в изначальное состояние.
Напоследок мы привязываем к событию unload обработчик, который скроет обе кнопки панели инструментов. Там комментировать нечего.
Чтобы проверить этот пример в действии, нам понадобится веб-сервер. Процедура проверки описана в параграфе 3.
Дополнительные материалы
Окончание следует...
Март 2011
Комментарии
