Учебник по плагину jQuery «Pinify» для создания сайтов, похожих на приложения

$('head').pinify({
                applicationName: 'mySite1',
                favIcon: 'sample_icon.ico',
                navColor: 'Black',
                startUrl: '/sample/pinify_simple.html',
                tooltip: 'mySite',
                window: 'width=800;height=600',
                tasks: [
             {
               	     'name': 'jQuery Twitter feed',
                    	     'action': 'http://twitter.com/jQuery',
                    	     'icon': 'http://jquery.com/favicon.ico'
                	},
 	              {
                    	     'name': 'Microsoft blog',
                    	     'action': 'http://blogs.technet.com/b/microsoft_blog/',
                    	     'icon': 'http://blogs.technet.com/themes/wireframe/favicon.ico'
                	}]
 });

При щелчке правой кнопкой мыши на закрепленном сайте отображаются указанные параметры. Как видно, ссылки навигации добавляются в категорию задач. Эта категория может содержать до пяти элементов. Эти навигационные ссылки остаются неизменными независимо от статуса приложения.

Сервисные функции

Плагин Pinify содержит различные служебные функции, которые используют новые функции, представленные в Internet Explorer 9, и делают закрепленный сайт более похожим на настольное приложение. Кроме того, эти функции выполняют специфичные для браузера проверки и обрабатывают исключения. Эти функции подключаемых модулей гарантируют, что функции, специфичные для Internet Explorer 9, не будут вызывать ошибки в других браузерах. Таким образом, разработчик веб-сайта не должен добавлять какие-либо проверки браузера или выполнять какие-либо исключения в явном виде.

Проверка, закреплен ли сайт

Прежде чем показывать пользователю баннер для закрепления сайта, важно проверить, закреплен ли сайт. Если нет, то баннер с уведомлением может попросить пользователя закрепить сайт. Функция isPinned возвращает true, если рассматриваемый сайт уже был закреплен, и false в противном случае.

$.pinify.isPinned();

Проверка состояния первого запуска

Иногда важно выяснить, когда закрепленный сайт запускается впервые. При первом запуске с панели задач или из меню «Пуск» могут быть вызваны некоторые служебные функции. Функция firstRunState используется для определения того, был ли впервые закрепленный сайт запущен. Возвращает «0», если сайт не закреплен или никогда не запускается. Он возвращает «1», если сайт запускается впервые с панели задач, и возвращает «2», если сайт запускается впервые из меню «Пуск».

$.pinify.firstRunState();

Добавление списка переходов

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

Плагин включает функцию, которая позволяет разработчикам динамически добавлять список навигационных ссылок. Они могут относиться к конкретному пользователю и могут отображаться в указанной вами категории списка переходов. Например, если пользователь просматривает книги в онлайн-магазине книг и добавляет их в корзину, в него можно добавить ссылки, такие как «Недавно просмотренные», «Моя корзина», «Мой список желаний» и т. Д. Список прыжков. Функция addJumpList используется для добавления динамического списка переходов на закрепленный сайт:

$.pinify.addJumpList(options);

Пример:

$.pinify.addJumpList({
                title: 'My stuff',
                items: [
			{
				name: 'Recently viewed books',
				url: '/recentlyView.html',
				icon: 'book.ico'
			},
			{
				name: 'New book releases',
				url: '/newBookReleases.html',
				icon: 'recent.ico'
			}
		]
});

Как уже отмечалось, список переходов с названием категории «Мои материалы» появляется над категорией «Задачи». Когда пользователи хотят просмотреть книги, которые просматривались в последний раз, тогда навигационная ссылка в списке переходов позволяет им  быстро перейти на страницу. Также разработчик сайта может добавлять ссылки, которые могут их заинтересовать. Например, ссылка «Новые выпуски книг» заинтересует   пользователей и побудит их узнать о новых доступных книгах.

Удаление списка переходов

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

$.pinify.clearJumpList();

Создание панелей миниатюр

В Windows при наведении курсора мыши  на кнопку на панели задач отображается эскиз приложения. В некоторых приложениях панель инструментов отображается под предварительным просмотром миниатюр приложения. Эта панель инструментов в основном используется в качестве пульта дистанционного управления. Например, когда пользователь наводит указатель мыши на кнопку медиаплеера на панели задач, появляется предварительный просмотр миниатюр с изображением текущего альбома. Прямо под предварительным просмотром миниатюр отображаются кнопки «Предыдущий», «Воспроизвести \ Пауза» и «Далее». Эти кнопки могут использоваться для управления воспроизводимым мультимедиа.

Точно так же, когда пользователь наводит указатель мыши на кнопку на панели задач свернутого закрепленного сайта, отображается предварительный просмотр в виде миниатюр. Функция createThumbbarButtons позволяет разработчикам добавлять набор кнопок панели большого пальца под предварительный просмотр миниатюр. Эти кнопки затем можно использовать для управления поведением сайта. Например, кнопки «Домой», «Поиск» и «Связаться с нами» могут быть добавлены в качестве кнопок на панели большого пальца, и при нажатии на одну из этих кнопок пользователь будет перемещен на выбранную страницу.

$.pinify.createThumbbarButtons(options);

Пример:

$.pinify.createThumbbarButtons({
		buttons: [
				{
					name: 'Home',
					icon: 'Home.ico',
					click: function() {
						document.location = "home.html"
					}
				},
				{
					name: 'Contact Us',
					icon: 'email-icon.ico',
					click: function() {
						document.location = "contact_us.html"
					}
				}
			 ]
});

Showing Notifications

Several web applications look for new data by sending request to the server at regular intervals. If there is any new data available, then the entire page or a part of the page is updated and new content is shown. The plugin includes functions that enable developers to show notification by adding an overlay icon and by flashing the taskbar for the pinned site. These notifications appear only when the user launches the pinned site.

Showing notifications by adding an overlay icon

Overlay icons are small icons drawn over an existing one. Windows uses these overlay icons to distinguish it from other files. For example, an arrow icon is used as an overlay icon for files to indicate them as shortcut files or an application requiring administrator privileges has a shield as an overlay icon. Similarly, in a web application, an overlay icon can be used to notify the user of the new content. The addOverlay function can be used to add a custom overlay icon over the taskbar button for the pinned site. The icon would appear in the lower right corner of the taskbar button.

$.pinify.addOverlay(options);

Example:

$.pinify.addOverlay({
           title: 'New Message',
           icon: 'newmessage.ico'
});

Once a user restores the browser window, the overlay icon should be removed from the taskbar button.  The clearOverlay function can be called to clear any overlay icon.

$.pinify.clearOverlay();

Showing notifications by flashing the taskbar button

Another way to show notification or to grab user’s attention is to flash the taskbar button. The function flashTaskbar flashes the pinned site button on the taskbar. This function would flash the taskbar button only when the browser window is minimized.

This function should be used only when an important event occurs;  events that require immediate attention. For example, if the user session is about to expire, then it would be a good idea to flash the taskbar button to grab the user’s attention.

$.pinify.flashTaskbar();

Summary

The Pinify plugin allows developers to add Internet Explorer 9 site-specific features with minimum effort. A developer can provide rich desktop-like experience to the user using this plugin. The plugin can also be used to encourage the users to pin the site. Once a site is pinned to the taskbar, various utility functions included in the plugin can be used to make the website appear more like a desktop application. The plugin ensures that no errors are thrown on other browsers and therefore, doesn’t require developers to add browser specific checks.