Скачать Smart Web App Banner - Скачать исходный код Smart Web App Banner

Smart Web App Banner

Данные веб-сайта

Version 1.5

Скачать

JQuery Smart Web App Banner

Официальный URL проекта: http://kurtzenisek.com/p/smart-web-banner/

Ищете интеллектуальный баннер iOS 6 и 7+, но опечален им только для поддержки приложений в App Store, а не в веб -приложениях? Этот маленький сценарий с питанием от jQuery здесь, чтобы помочь. Добавьте этот небольшой сценарий на свой сайт и пригласите своих посетителей сохранить ваш сайт на своем домашнем экране вместе с остальными их приложениями!

Быстрый предварительный просмотр

Доступно по адресу: http://kurtzenisek.com/p/smart-web-banner/

Функции

Smart Banner Banner IOS 6 и 7+, но сделано для веб -приложений!
Интеллектуально показывает дизайн баннера iOS 6/7+ в зависимости от того, что использует посетитель.
Сдвиньте весь сайт вниз, а не препятствует странице от ваших посетителей с помощью всплывающего окна.
Добавьте CSS и JavaScript и вызовите сценарий ... вот и все. Графика использует CSS 3 и используйте встроенные значки в Retina Resolution (которая идеально подходит для мобильного сафари), поэтому не нужно беспокоиться об изображениях.
Показано только при использовании мобильного сафари, так как это единственный браузер с интеграцией домашнего экрана.
Установите, сколько времени будет до того, как баннер снова будет показан после того, как он будет закрыт, и после того, как посетитель нажимает «Сохранить» (избегает раздражающих посетителей).
Автоматическое обнаружение значков с помощью тега (не показано, если он недоступен, позволяет легко перезаписать его, если это необходимо, и даже добавляет глянец к значке, если он обнаруживает, он не предварительно не сочинен [также может быть установлен с помощью опции]).
Может автоматически добавить <meta name="apple-mobile-web-app-capable" content="yes" /> если еще не присутствует (сохраняет сайт как веб-приложение, когда добавлено на домашний экран, и делает его так, чтобы баннер не отображался при пересмотре сайта).
Легкие и темные темы, чтобы сделать его в соответствии с дизайном вашего сайта (я действительно люблю оба). Предварительно просмотрите темы с помощью кнопок на http://kurtzenisek.com/p/smart-web-banner/
Покажите/скрыть баннер по требованию с использованием <a href="#show">$().smartWebBanner('show');</a> & <a href="#hide">$().smartWebBanner('hide');</a></a> (может быть предварительно просмотреть по адресу htttp://kurtzenisek.com/smart-web-))
Триггеры события для SWB: Показано, SWB: закрыто, SWB: инструкции-Shown и SWB: Инструкции: закрыто на элементе баннера для выполнения дополнительных действий, когда баннер или инструкции будут показаны или закрыты.
Добавляет классы в HTML -элемент страницы на основе состояния баннера для корректировки аспектов сайта через CSS на основе состояния баннера.
Может быть масштабирован/изменен, чтобы соответствовать мобильному просмотру вашего сайта, изменяя размер шрифта #Smartwebbanner & #SWB-инструктивы через CSS, чтобы остальные шкалы с ним (добавьте .ipad к селектору для специфических для iPad размера).
Инструкции по конкретным устройствам («Добавить на домашний экран» находится в верхней части iPad, пока он находится в нижней части iPhone). Даже соответствует внешнему виду нативного всплывающего окна устройства (тонкая разница в цвете и размерах).
Отключите URL -адрес страницы с указанным URL -адресом (с использованием html5 Replacestate), так что это то, к чему значок домашнего экрана берет посетителя после его сохранения, а не на странице, на которой они оказались, когда пошли, чтобы добавить его на свой домашний экран (что является поведением по умолчанию). Например, сделайте это так, чтобы кнопка домашнего экрана всегда была вашей домашней страницей.
Отключите заголовок страницы указанным заголовком, так что это то, что является меткой значка по умолчанию при добавлении его на домашний экран (который в противном случае использовал бы существующую мета-тег-титул-ап-ап-ап-ап или название страницы). Кажется незначительным, но это может быть влиятельным.
Полезное вариант отладки (устанавливает баннер, который будет показан во всех браузерах и игнорирует уже закрытые/сохраненные файлы cookie) делает предварительный просмотр/тестирование баннера на бризе.
Невероятно настраивается через множество вариантов! *См. Пример ниже для полного списка.

Дорожная карта

Реализуйте Hrome Support & Style для устройств Android.
Улучшите функцию AutoApp, которая добавляет метатет Mobile-Web-App, чтобы также предотвратить открытие нормальных (не AJAX) ссылок в Safari (если не покинуть домен или не перейти в файл медиа [из-за отсутствия кнопки спины]). Измените настройку AutoApp по умолчанию, так как теперь она гораздо более полезна для стандартных сайтов.
Рассмотрите возможность реализации в форме плагина WordPress для тех, кто ищет эту функциональность без возможности/времени для реализации самого скрипта (пусть он вытягивает имя блога для заголовка и описания для «Автор») и посмотрите на создание страницы настроек плагина для параметров сценария. Кроме того, сценарий должен быть обновлен для автоматического приспособления административного панели WordPress.
Кодовый капитальный ремонт/переписать/очистить.
Создайте систему темы, которая позволяет предоставлять файлы CSS индивидуально, чтобы определить дизайн (отдельный от основных стилей). Это технически возможно, но многие из существующих стилей CSS должны быть перезаписаны, чтобы выполнить новый дизайн.
Получите обратную связь от сообщества! (Напишите мне)

Изменение

Версия 1.5 - 11 августа 2017 г.

Добавлен swb:shown , swb:closed , swb:instructions-shown и swb:instructions-closed события/триггеры, к элементу $('#smartWebBanner') , который запускается, когда баннер показан и закрыт соответственно. Это позволяет действовать, когда баннер показан/скрыт (Ex. $('#smartWebBanner').on('swb:closed',function(){alert('Banner was closed');}); );
Сделан элементом HTML имеет .swb-shown и .swb-closed в зависимости от того, показан или закрыт баннер. Это позволяет изменению любых частей сайта на основе Wheter, который баннер показан путем ссылки на эти классы CSS.
Обновленный скрипт, чтобы следовать JSHINT.
Реализовано SCSS для таблицы рабочих стилей.
Убедитесь, что Meta TAG Content "Apple-Mobile-Web-App-Title" Content/значение используется для текстовой метки/заголовка значка HomeScreen вместо тега Page <title> , когда они присутствуют (все еще используется в качестве запасного).

Версия 1.4 - 24 мая 2014 г.

Обновлено для использования дизайна iOS 7 на iPhone и iPad под управлением iOS 7 (новые значки, местоположения, всплывающие окна и общий дизайн).
Теперь автоматически выбирает стиль iOS 6/7, когда это необходимо. Важно: имена тем изменились, так как теперь есть «Авто» (по умолчанию), «iOS 6», «iOS 7» и «Темный». Auto будет использовать либо iOS 6 и 7 в зависимости от того, что работает устройство.

20 мая 2014 года

JQUERY Smart Web App Banner теперь доступен на cdnjs.com в качестве размещенной опции CDN!

Версия 1.3 - 22 марта 2013 г.

Добавлена функция, которая заменяет URL -адрес страницы с помощью URL -адреса, указанного через параметры сценария. Это означает, что вы можете установить его на домашнюю страницу вашего сайта, чтобы использование функции Addt To Home Screen сохранила домашнюю страницу, а не страницу, на которой находится посетитель (поведение по умолчанию).
Все еще застрял на jQuery старше версии 1.7? Эта функция обмена URL была добавлена в эту версию и доступна здесь (в противном случае рекомендуется запустить последнюю версию, найденную ниже).

Версия 1.2 - 20 марта 2013 г.

Изменено, как CSS структурирован, чтобы использовать только три значения PX и использовать EM для остальных. Это позволяет изменять масштаб баннера, в то же время предотвращая непреднамеренное воздействие на его размеры.

Версия 1.1.2 - 20 марта 2013 г.

Замену.
Теперь требуется JQUERY 1.7+, но предыдущая версия может быть загружена здесь (использование последних CSS будет работать).

Версия 1.1.1 - 3 октября 2012 г.

Добавлена опция, чтобы включить автоматическую метаг Mobile-Web-App (отключен по умолчанию).

Версия 1.1 - 27 сентября 2012 г.

Добавлена функция, которая заменяет атрибут страницы <Title> с заголовком, который указан с помощью параметров сценария.
Добавлена опция, чтобы отключить новую функцию свопа заголовка.

Версия 1.0 - 19 сентября 2012 г.

Первоначальный выпуск (в тот же день, как iOS 6).

Руководство по началу работы новичка

Открытое начало начала работы

Пример (используя настройки по умолчанию)

Примеры/Basic.js

Пример (с полными параметрами)

Примеры/Full-Options.js

Пример выполнения действий, когда баннер показан и/или скрыт

https://github.com/kzeni/smart-web-app-banner/blob/master/examples/perform-actions-on-toggle.js

Скачать сейчас

Скачать
Используйте CDNJS

Это открытый исходный код: вы можете просмотреть его на GitHub и скачать оттуда!

Требуется: jquery v1.7 или более позднее, все еще используя jquery 1.3.2 - 1.8.x? Вместо этого используйте файл jQuery.smartwebbanner.pre-1.7.min.js.

Поддерживать

Напишите мне

Часто задаваемые вопросы

Нужно, чтобы он сохранил домашнюю страницу вашего сайта, а не страницу, на которой находится посетитель? Сохранение страницы на главном экране по умолчанию сохраняет текущую страницу, но вы можете установить опцию URL, чтобы быть любым URL -адресом, который вы хотели бы сохранить, и плагин заботится об остальных.

Совет: установите URL на '/', чтобы он всегда был домашней страницей вашего сайта, независимо от самого домена. Кроме того, это не может быть другой домен по соображениям безопасности.

Нужно отрегулировать размер баннера, чтобы соответствовать масштабам вашего сайта? CSS этого плагина был построен для обозначения двух элементов (с одним вариантом), которые затем определяют размер всего остального. Просто измените размер шрифта для #Smartwebbanner & #SWB-Instructions (Add .ipad для специфичных размеров iPad) в собственном CSS (или редактируйте плагин напрямую), чтобы соответствовать вашим потребностям.

Хотите использовать это для продвижения не веб- приложений Android и/или приложений для iOS в более старых версиях iOS и/или различных браузерах? Проверьте вилку Jasny для Android Apps и или iOS -приложения, старше iOS 6. Также проверьте вилку Ijason, предназначенную исключительно для того, чтобы сделать ее доступным для приложений для iOS в других браузерах iOS (Google Chrome) и старых версиях iOS. Примечание: оба они предназначены для приложений, не являющихся WEB. Это единственный плагин, предназначенный для веб -приложений (насколько мне известно).