Smart Web App Banner Download - Smart Web App Banner Quellcode Download

Smart Web App Banner

Website-Daten

Version 1.5

Herunterladen

JQuery Smart Web App Banner

Offizielle Projekt-URL: http://kurtzenisek.com/p/smart-web-banner/

Suchen Sie nach dem iOS 6 & 7+ Smart Banner, aber traurig darüber, dass es nur Apps im App Store unterstützt und nicht Web -Apps? Dieses kleine JQuery-Drehbuch ist hier, um zu helfen. Fügen Sie dieses kleine Skript zu Ihrer Website hinzu und laden Sie Ihre Besucher ein, Ihre Website neben den Rest ihrer Apps auf dem Startbildschirm zu speichern!

Schnelle Vorschau

Verfügbar unter: http://kurtzenisek.com/p/smart-web-banner/

Merkmale

Das iOS 6 & 7+ Smart Banner Look & Feel, hat aber für Web -Apps hergestellt!
Zeigt intelligent iOS 6/7+ Banner -Design an, abhängig von dem, was der Besucher verwendet.
Schieben Sie die gesamte Website ab, anstatt die Seite von Ihren Besuchern mit einem Popup zu behindern.
Fügen Sie CSS & JavaScript hinzu und rufen Sie das Skript an ... das war's. Grafiken verwenden CSS 3 und verwenden eingebettete Symbole bei Retina -Auflösung (was perfekt für mobile Safari geeignet ist), daher müssen keine Bilder besorgt sein.
Nur angezeigt, wenn mobile Safari verwendet wird, da dies der einzige Browser mit Startbildschirmintegration ist.
Stellen Sie fest, wie lange es dauern wird, bevor das Banner erneut angezeigt wird, nachdem es geschlossen ist, und nachdem der Besucher auf "Speichern" gedrückt wird (vermeidet ärgerliche Besucher).
Die automatische Symbolerkennung über Tag (wird nicht angezeigt, wenn es nicht verfügbar ist, können Sie sie bei Wunsch problemlos überschreiben und dem Symbol sogar Glanz hinzugefügt, wenn es erkennt, dass es nicht vorkomponiert ist [kann auch über eine Option festgelegt werden]).
Kann automatisch <meta name="apple-mobile-web-app-capable" content="yes" /> fügen, wenn noch nicht bereits vorhanden ist (Speichern Sie die Website als Web-App, wenn Sie auf dem Startbildschirm hinzugefügt werden, und erzeugt es so, dass das Banner bei der Überprüfung der Website nicht angezeigt wird).
Helle & dunkle Themen, um es zu Ihrem Site -Design zu machen (ich liebe beide). Vorschau der Themen mit den Schaltflächen auf http://kurtzenisek.com/p/smart-web-banner/
Zeigen/verstecken Sie das Banner auf Bedarf mit <a href="#show">$().smartWebBanner('show');</a> <a href="#hide">$().smartWebBanner('hide');</a></a>
Ereignisauslöser für SWB: gezeigt, SWB: geschlossen, SWB: Anweisungen und SWB: Anweisungen: geschlossen auf dem Bannerelement für zusätzliche Aktionen, wenn das Banner oder die Anweisungen angezeigt oder geschlossen werden.
Fügt Klassen zum HTML -Element der Seite auf der Grundlage des Zustands des Banners hinzu, um Aspekte der Website über CSS basierend auf dem Bundesstaat des Banners anzupassen.
Kann skaliert/geändert werden, um das mobile Ansichtsfenster Ihrer Website anzupassen, indem Sie die Schriftgröße von #SmartWebBanner & #SWB-Inructions über CSS ändern, um die REST-Skalen dabei zu haben (fügen Sie .Ipad zum Selektor für iPad-spezifische Größen hinzu).
Gerätespezifische Anweisungen ("zum Startbildschirm hinzufügen" befindet sich oben auf einem iPad, während es sich am unteren Rand eines iPhone befindet). Sogar entspricht das Erscheinungsbild des nativen Popups des Geräts (subtile Farb- und Größenunterschiede).
Vergrößert die URL der Seite mit der angegebenen URL (mithilfe von HTML5 -Austausch). Damit ist das Symbol des Startbildschirms nach dem Speichern des Startbildschirms statt, auf dem sie sich zufällig befanden, als sie sie zu ihrem Startbildschirm hinzufügen (was das Standardverhalten ist). Machen Sie es beispielsweise so, dass die Schaltfläche Startbildschirm immer Ihre Startseite ist.
Vergrößert den Titel der Seite mit dem angegebenen Titel aus, so dass das Standardetikett des Symbols beim Startbildschirm hinzugefügt wird (der sonst das vorhandene Apple-Mobile-Web-App-Title-Meta-Tag oder den Titel der Seite verwenden würde). Scheint gering, aber das kann wirkungsvoll sein.
Hilfreiche Debug -Optionen (legt das Banner in allen Browsern und ignoriert die bereits geschlossenen/gespeicherten Cookies) macht die Vorschau des Banners zum Kinderspiel.
Unglaublich konfigurierbar über viele Optionen! *Siehe Beispiel unten für die vollständige Liste.

Roadmap

Implementieren Sie Chrome Support & Style für Android -Geräte.
Verbessern Sie die AutoApp-Funktion, mit der das Mobile-Web-App-Meta-Tag hinzugefügt wird, damit auch normale (Nicht-Ajax-) Links in Safari geöffnet werden (es sei denn, die Domäne verlassen oder eine Mediendatei aufweist [aufgrund des Mangels an einer Back-Button]). Ändern Sie die Standard -AutoApp -Einstellung, da sie jetzt für Standard -Websites viel nützlicher ist.
Erwägen Sie, im WordPress -Plugin -Formular für diejenigen zu implementieren, die nach dieser Funktionalität suchen, ohne die Fähigkeit/Zeit zu implementieren, das Skript selbst zu implementieren. Außerdem sollte das Skript aktualisiert werden, um die Verwaltungsleiste von WordPress automatisch zu erhalten.
Codeüberholung/Umschreiben/Aufräumarbeiten.
Erstellen Sie ein Themensystem, mit dem CSS -Dateien einzeln bereitgestellt werden können, um das Design zu bestimmen (getrennt von den Kernstilen). Dies ist technisch möglich, aber viele der vorhandenen CSS -Stile müssen überschrieben werden, um ein neues Design zu erreichen.
Holen Sie sich Feedback von der Community! (Mailen Sie mir)

Changelog

Version 1.5 - 11. August 2017

swb:shown , swb:closed , swb:instructions-shown und swb:instructions-closed Ereignisse/Auslöser für das Element $('#smartWebBanner') , das abgefeuert wird, wenn das Banner gezeigt und geschlossen wird. Dies ermöglicht Maßnahmen $('#smartWebBanner').on('swb:closed',function(){alert('Banner was closed');}); wenn das Banner angezeigt/versteckt wird (z.
Das HTML-Element hat .swb-shown und .swb-closed geschaltet, je nachdem, ob das Banner angezeigt oder geschlossen ist. Auf diese Weise kann alle Teile der Site geändert werden, basierend auf dem Banner, indem das Banner auf diese CSS -Klassen verweist.
Aktualisiertes Skript, um JSHINT zu folgen.
Implementierte SCSS für das Arbeitsstiltheet.
Stellen Sie sicher, dass "Apple-Mobile-Web-App-Title" -Meta-Tag-Inhalt/-wert für das Textbezeichnung/den Titel des Homescreen-Symbols anstelle des <title> -Tag der Seite bei der vorhandenen (immer noch als Fallback verwendet) verwendet wird.

Version 1.4 - 24. Mai 2014

Aktualisiert, um iOS 7 -Design auf iPhones und iPads zu verwenden, die iOS 7 (neue Symbole, Standorte, Popups und Gesamtdesign) ausführen.
Jetzt senkt sich der iOS 6/7-Stil, gegebenenfalls, automatisch aus. Wichtig: Themennamen haben sich geändert, da es jetzt "Auto" (Standard), "iOS 6", "iOS 7" und "dunkel" gibt. Auto verwendet entweder iOS 6 und 7, je nachdem, was das Gerät ausgeführt wird.

20. Mai 2014

JQuery Smart Web App Banner ist ab sofort auf CDNJs.com als gehostete CDN -Option verfügbar!

Version 1.3 - 22. März 2013

Feature fügte hinzu, die die URL der Seite mit der URL ausgetauscht, die über die Optionen des Skripts angegeben ist. Dies bedeutet, dass Sie es auf die Homepage Ihrer Website einstellen können, damit die Verwendung der Funktion zum Hinzufügen zum Startbildschirm die Startseite und nicht die Seite speichert, auf der sich der Besucher befindet (das Standardverhalten).
Immer noch auf JQuery älter als Version 1.7? Diese URL -Tauschfunktion wurde ebenfalls zu dieser Version hinzugefügt und ist hier verfügbar (es wird ansonsten empfohlen, die neueste Version unten auszuführen).

Version 1.2 - 20. März 2013

Veränderte, wie das CSS strukturiert ist, um nur drei PX -Werte zu verwenden und EM für den Rest zu verwenden. Dies ermöglicht es, dass die Skala des Banners geändert wird und gleichzeitig verhindern, dass externe Schriftgrößen es ungewollt beeinflussen.

Version 1.1.2 - 20. März 2013

Ausgetauscht .Live () für .on () für jQuery 1.9+ Kompatibilität.
Benötigt jetzt JQuery 1.7+, aber die vorherige Version kann hier heruntergeladen werden (mit den neuesten CSS funktioniert).

Version 1.1.1 - 3. Oktober 2012

Option hinzugefügt, um die automatische Addition des Mobile-Web-App-Meta-Tags (standardmäßig deaktiviert) zu aktivieren.

Version 1.1 - 27. September 2012

Feature fügte hinzu, die das Attribut der Seite <titels> mit dem Titel, der über die Optionen des Skripts angegeben ist, ausgeht.
Option hinzugefügt, um die neue Funktion "Title Swap" zu deaktivieren.

Version 1.0 - 19. September 2012

Erstveröffentlichung (selben Tag wie iOS 6).

Anfänger Erste Anleitung

Offener Einstiegsanleitung

Beispiel (Verwenden der Standardeinstellungen)

Beispiele/Basic.js

Beispiel (mit vollständigen Optionen)

Beispiele/full-options.js

Beispiele für Aktionen, wenn das Banner angezeigt und/oder versteckt wird

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

Jetzt herunterladen

Herunterladen
Verwenden Sie CDNJs

Es ist Open Source: Sie können es auf GitHub anzeigen und auch von dort herunterladen!

Benötigt: jQuery v1.7 oder später noch immer noch JQuery 1.3.2 - 1.8.x? Verwenden Sie stattdessen die Datei jQuery.smartwebBanner.pre-1.7.min.js.

Unterstützung

Mailen Sie mir

FAQs

Müssen Sie die Startseite Ihrer Website speichern und nicht die Seite, auf der sich der Besucher befindet? Das Speichern einer Seite auf dem Startbildschirm speichert standardmäßig die aktuelle Seite. Sie können jedoch die URL -Option so einstellen, dass sie die URL sein möchten, die Sie speichern möchten, und das Plugin kümmert sich um den Rest.

Tipp: Setzen Sie die URL auf '/', damit es immer die Homepage Ihrer Website ist, während sie unabhängig von der Domain selbst ist. Außerdem kann es aus Sicherheitsgründen keine andere Domäne sein.

Müssen Sie die Größe des Banners an die Skala Ihrer Website anpassen? Das CSS dieses Plugins wurde erstellt, um sich auf zwei Elemente (mit einer Variante) zu beziehen, die dann die Größe von allem anderen bestimmt. Ändern Sie einfach die Schriftgröße für #SmartWebBanner & #SWB-Instructions (fügen Sie .ipad für iPad-spezifische Größen hinzu) in Ihrem eigenen CSS (oder bearbeiten Sie das Plugin direkt bearbeiten), um Ihren Anforderungen zu entsprechen.

Möchten Sie dies verwenden, um nicht webbasierte Android-Apps und/oder iOS-Apps in älteren iOS-Versionen und/oder verschiedenen Browsern zu bewerben? Schauen Sie sich Jasnys Gabel für Android -Apps und oder iOS -Apps an, die älter sind als iOS 6. Außerdem sehen Sie sich Ijasons Fork an, um es für iOS -Apps in anderen iOS -Browsern (Google Chrome) und älteren iOS -Versionen zur Verfügung zu stellen. HINWEIS: Beide sind für Nicht-Web-Apps. Dies ist das einzige Plugin, das auf Web -Apps abzielt (meines Wissens).