Smart Web App Bannerダウンロード - Smart Web App Bannerソースコードダウンロード

Smart Web App Banner

ウェブサイトデータ

Version 1.5

ダウンロード

jQueryスマートウェブアプリバナー

公式プロジェクトURL：http：//kurtzenisek.com/p/smart-web-banner/

iOS 6および7+のスマートバナーを探していますが、WebアプリではなくApp Storeでアプリのみをサポートするだけで悲しんでいますか？この小さなjQuery駆動のスクリプトがここにあります。この小さなスクリプトをサイトに追加し、訪問者を招待して、他のアプリと一緒にサイトをホーム画面に保存してください！

クイックプレビュー

http://kurtzenisek.com/p/smart-web-banner/で入手可能

特徴

iOS 6および7+スマートバナーのルックアンドフィールですが、Webアプリ用に作られています！
訪問者が使用しているものに応じて、iOS 6/7+バナーのデザインをインテリジェントに表示します。
ポップアップで訪問者からページを妨害するのではなく、サイト全体を下にスライドさせます。
CSS＆JavaScriptを追加し、スクリプトを呼び出します...それだけです。グラフィックスはCSS 3を利用して、Retina解像度（モバイルSafariに最適です）で埋め込みアイコンを使用しているため、心配する画像はありません。
モバイルSafariを使用する場合にのみ表示されます。これは、ホーム画面統合を備えた唯一のブラウザであるためです。
バナーが閉じた後、訪問者が「保存」を押した後に再び表示されるまでの時間を設定します（迷惑な訪問者を避けます）。
タグを介した自動アイコン検出（使用できない場合は表示されず、必要に応じて簡単に上書きすることができます。また、検出されない場合は、アイコンにグロスを追加します[オプションで設定することもできます））。
<meta name="apple-mobile-web-app-capable" content="yes" />まだ存在しない場合は自動的に追加できます（ホーム画面に追加されたときにサイトをWebアプリとして保存し、サイトを再訪するときにバナーが表示されないようにします）。
あなたのサイトのデザインに合うようにライトとダークのテーマ（私は両方が本当に大好きです）。 http://kurtzenisek.com/p/smart-web-banner/のボタンでテーマをプレビューします
<a href="#show">$().smartWebBanner('show');</a> ＆ <a href="#hide">$().smartWebBanner('hide');</a></a>を使用して、バナーを表示/非表示
SWBのイベントトリガー：表示、SWB：閉じて、SWB：命令ショーン、およびSWB：命令：バナーまたは命令が表示または閉じたときに追加のアクションを実行するためのバナー要素で閉じます。
バナーの状態に基づいてCSSを介してサイトの側面を調整するために、バナーの状態に基づいて、ページのHTML要素にクラスを追加します。
CSSを介して#SmartWebbannerおよび＃SWB-Instructionsのフォントサイズを変更して、RESTスケールを使用することにより、サイトのモバイルビューポートに合わせてスケーリング/サイズを変更できます（iPad固有のサイズのためにセレクターに.ipadを追加）。
デバイス固有の指示（「ホーム画面への追加」は、iPhoneの下部にある間にiPadの上部にあります）。デバイスのネイティブポップアップ（微妙な色とサイズの違い）のルック＆フィールにも一致します。
指定されたURLでページのURLを交換します（HTML5代替品を使用）。これは、ホーム画面の画面に加えたページではなく、ホーム画面のアイコンが保存した後に訪問者を採用するものです（デフォルトの動作です）。たとえば、ホーム画面ボタンが常にホームページになるようにします。
指定されたタイトルでページのタイトルを交換するので、それがホーム画面に追加するときのアイコンのデフォルトラベル（それ以外の場合は既存のApple-Mobile-Web-App-Title Metaタグまたはページのタイトルを使用します）です。軽微なように見えますが、これはインパクトがある場合があります。
役立つデバッグオプション（すべてのブラウザに表示されるバナーを設定し、すでに閉じられている/保存されたCookieを無視します）により、バナーのプレビュー/テストが簡単になります。
たくさんのオプションで信じられないほど構成可能です！ *完全なリストについては、以下の例を参照してください。

ロードマップ

AndroidデバイスにChromeサポートとスタイルを実装します。
モバイル-WEB-Appメタタグを追加する自動アプリ機能を改善して、通常（非アジャックス）リンクがSafariで開くのを防ぎます（ドメインを離れたり、メディアファイルに移動しない限り[バックボタンがないため]）。デフォルトのAutoApp設定を変更すると、標準サイトにとってはるかに便利になりました。
スクリプト自体を実装する機能/時間なしにこの機能を探している人のためにWordPressプラグインフォームに実装することを検討し、スクリプトのオプションのプラグイン設定ページの構築を検討してください。また、WordPressの管理バーを自動的に付着するように、スクリプトを更新する必要があります。
コードオーバーホール/書き換え/クリーンアップ。
CSSファイルを個別に提供できるようにするテーマシステムを作成して、デザインを決定します（コアスタイルとは別）。これは技術的に可能ですが、既存のCSSスタイルの多くは、新しいデザインを達成するために上書きする必要があります。
コミュニティからフィードバックを得てください！（私にメールしてください）

Changelog

バージョン1.5- 2017年8月11日

追加された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を実装しました。
「Apple-Mobile-Web-App-Title」メタタグのコンテンツ/値が、存在するとき（まだフォールバックとして使用されている）ページの<title>タグの代わりに、ホーム画面アイコンのテキストラベル/タイトルに使用されることを確認しました。

バージョン1.4- 2014年5月24日

iOS 7（新しいアイコン、場所、ポップアップ、および全体的なデザイン）を実行しているiPhoneおよびiPadでiOS 7デザインを使用するように更新されました。
必要に応じてiOS 6/7スタイルを自動選択します。重要：「Auto」（デフォルト）、「iOS 6」、「iOS 7」、および「Dark」があるため、テーマ名が変更されました。 Autoは、デバイスが実行されているものに応じて、iOS 6と7のいずれかを使用します。

2014年5月20日

JQuery Smart Webアプリバナーは、CDNJS.comでホストされたCDNオプションとして入手できるようになりました。

バージョン1.3- 2013年3月22日

スクリプトのオプションを介して指定されたURLとページのURLを交換する機能を追加しました。これは、サイトのホームページに設定できるように、Home Screenへの追加機能を使用すると、訪問者がオンになっているページではなくホームページを保存できるようにすることを意味します（デフォルトの動作）。
まだバージョン1.7よりも古いjQueryに詰まっていますか？このURLスワッピング機能は、そのバージョンにも追加されており、こちらから入手できます（以下にある最新バージョンを実行することをお勧めします）。

バージョン1.2- 2013年3月20日

CSSが3つのPX値のみを使用するように構造化され、残りにEMを使用する方法を変更しました。これにより、外部のフォントサイズが意図せずに影響を与えることを防ぎながら、バナーのスケールを変更できます。

バージョン1.1.2- 2013年3月20日

jQuery 1.9+互換性のために.on（）の.live（）を交換しました。
これでjQuery 1.7+が必要になりましたが、以前のバージョンはここからダウンロードできます（最新のCSSを使用して機能します）。

バージョン1.1.1- 2012年10月3日

モバイルWEB-APPメタタグの自動採用を有効にするためのオプションを追加しました（デフォルトで無効）。

バージョン1.1- 2012年9月27日

ページの<title>属性を交換して、スクリプトのオプションを介して指定されたタイトルを追加した機能を追加しました。
新しいタイトルスワップ機能を無効にするオプションが追加されました。

バージョン1.0- 2012年9月19日

初期リリース（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ファイルを使用します。

サポート

私にメールしてください

FAQ

訪問者がオンになっているページではなく、サイトのホームページを保存する必要がありますか？ページをホーム画面に保存すると、デフォルトで現在のページを保存しますが、URLオプションを保存するために希望するあらゆるURLに設定でき、プラグインが残りを処理します。

ヒント：URLを「/」に設定して、ドメイン自体から独立している間、常にサイトのホームページになります。また、セキュリティ上の理由で別のドメインになることはできません。

サイトのスケールに合わせてバナーのサイズを調整する必要がありますか？このプラグインのCSSは、他のすべてのサイズを決定する2つの要素（1つのバリアントを含む）を参照するように構築されました。 #SmartWebbanner＆＃SWB-Instructions（iPad固有のサイズに.ipadを追加）のフォントサイズを独自のCSSに変更するだけで（またはプラグインを直接編集）、ニーズに合わせてください。

これを使用して、古いiOSバージョンおよび/または異なるブラウザーで、WebベースのAndroidアプリやiOSアプリを宣伝したいですか？ Jasny's Fork for AndroidアプリおよびIOS 6よりも古いIOSアプリのフォークをご覧ください。また、他のiOSブラウザー（Google Chrome）および古いiOSバージョンでiOSアプリを利用できるようにすることを目的としたIjasonのフォークもチェックしてください。注：これらはどちらも非Webアプリ用です。これは、（私の知る限り）Webアプリを対象とした唯一のプラグインです。