Téléchargement Smart Web App Banner - Téléchargement du code source Smart Web App Banner

Smart Web App Banner

Données du site Web

Version 1.5

Télécharger

Bannière d'application Web Smart JQuery

URL du projet officiel: http://kurtzenisek.com/p/smart-web-banner/

Vous cherchez la bannière intelligente iOS 6 et 7+, mais attristée par elle ne prenant que des applications sur l'App Store et pas sur les applications Web? Ce petit script alimenté par jQuery est là pour vous aider. Ajoutez ce petit script à votre site et invitez vos visiteurs à enregistrer votre site sur leur écran d'accueil aux côtés du reste de leurs applications!

Aperçu rapide

Disponible sur: http://kurtzenisek.com/p/smart-web-banner/

Caractéristiques

La bannière intelligente iOS 6 et 7+ look & se sentir, mais a fait pour les applications Web!
Montre intelligemment la conception de la bannière iOS 6/7 + en fonction de ce que le visiteur utilise.
Faire tomber l' ensemble du site plutôt que d'entraver la page de vos visiteurs avec une popup.
Ajoutez CSS et JavaScript et appelez le script ... c'est tout. Les graphiques utilisent CSS 3 et utilisent des icônes intégrées à la résolution de la rétine (ce qui est parfait pour le safari mobile), il n'y a donc pas d'images à préoccuper.
Il est montré uniquement lors de l'utilisation de safari mobile, car c'est le seul navigateur avec l'intégration de l'écran d'accueil.
Définissez combien de temps il restera avant que la bannière ne soit affichée après sa fermeture et après que le visiteur appuie sur "Save" (évite les visiteurs ennuyeux).
La détection automatique de l'icône via TAG (n'est pas affiché si elle n'est pas disponible, vous permet de le remplacer facilement si vous le souhaitez, et il ajoute même de brillant à l'icône s'il détecte qu'il n'est pas précomposé [peut également être défini via une option]).
Peut ajouter automatiquement <meta name="apple-mobile-web-app-capable" content="yes" /> Si ce n'est pas déjà présent (enregistre le site en tant qu'application Web lorsqu'il est ajouté à l'écran d'accueil et le rend afin que la bannière ne soit pas affichée lors de la révision du site).
Des thèmes légers et sombres pour le faire s'adapter à la conception de votre site (j'aime vraiment les deux). Aperçu les thèmes avec les boutons sur http://kurtzenisek.com/p/smart-web-banner/
Afficher / masquer la bannière à la demande en utilisant <a href="#show">$().smartWebBanner('show');</a> & <a href="#hide">$().smartWebBanner('hide');</a></a> /)
Les déclencheurs de l'événement pour SWB: montré, SWB: fermé, SWB: Instructions décortisées et SWB: Instructions: Fermé sur l'élément de bannière pour effectuer des actions supplémentaires lorsque la bannière ou les instructions est affichée ou fermée.
Ajoute des classes à l'élément HTML de la page en fonction de l'état de la bannière pour ajuster les aspects du site via CSS en fonction de l'état de la bannière.
Peut être mis à l'échelle / redimensionné pour s'adapter à la fenêtre mobile de votre site en modifiant la taille de la police de #smartwebbanner & # swb-instructions via CSS pour avoir les échelles de repos avec elle (ajoutez .Ipad au sélecteur pour les tailles spécifiques à l'iPAD).
Les instructions spécifiques à l'appareil ("Ajouter à l'écran d'accueil" sont en haut d'un iPad alors qu'elle est au bas d'un iPhone). Même correspond à l'apparence et à la sensation de la fenêtre contextuelle native de l'appareil (Couleur subtile et différence de taille).
Échange l'URL de la page avec l'URL spécifiée (en utilisant le remplacement HTML5) afin que l'icône de l'écran d'accueil amène le visiteur après l'avoir enregistré plutôt que la page sur laquelle ils se trouvaient lorsqu'ils sont allés l'ajouter à leur écran d'accueil (ce qui est le comportement par défaut). Par exemple, faites-le pour que le bouton de l'écran d'accueil soit toujours votre page d'accueil.
Échange le titre de la page avec le titre spécifié afin que ce soit l'étiquette par défaut de l'icône lors de l'ajout de l'écran d'accueil (qui utiliserait autrement la balise Meta ou le titre de la page) existante Apple-Mobile-Web-App-Title ou le titre de la page). Semble mineur, mais cela peut avoir un impact.
L'option de débogage utile (définit la bannière à afficher dans tous les navigateurs et ne tient pas compte des cookies déjà fermés / enregistrés) fait de la prévisualisation / des tests de la bannière.
Incroyablement configurable via de nombreuses options! * Voir l'exemple ci-dessous pour la liste complète.

Feuille de route

Implémentez la prise en charge et le style Chrome pour les appareils Android.
Améliorez la fonction AutoApp qui ajoute la balise META Mobile-Web-App afin qu'elle empêche également les liens normaux (non ajax) d'ouvrir en safari (sauf en laissant le domaine ou en allant dans un fichier multimédia [en raison de l'absence d'un bouton de retour]). Modifiez le paramètre AutoApp par défaut car il est désormais beaucoup plus utile pour les sites standard.
Envisagez d'implémenter dans le formulaire de plugin WordPress pour ceux qui recherchent cette fonctionnalité sans la capacité / le temps d'implémenter le script lui-même (faites-le extraire le nom du blog pour le titre et la description de "l'auteur") et envisagez de créer une page de paramètres de plugin pour les options du script. De plus, le script doit être mis à jour pour accueillir automatiquement la barre d'administration de WordPress.
CODE POURHAUL / REWRITE / CLASEUP.
Créez un système de thème qui permet à des fichiers CSS d'être fournis individuellement pour déterminer la conception (distincte des styles de base). Cela est techniquement possible, mais bon nombre des styles CSS existants doivent être remplacés pour accomplir un nouveau design.
Obtenez des commentaires de la communauté! (Envoyez-moi un e-mail)

Changelog

Version 1.5 - 11 août 2017

Ajout de swb:shown , swb:closed , swb:instructions-shown et swb:instructions-closed à l'élément $('#smartWebBanner') qui sont tirés lorsque la bannière est affichée et fermée, respectivement. Cela permet aux actions de se produire lorsque la bannière est affichée / cachée (ex. $('#smartWebBanner').on('swb:closed',function(){alert('Banner was closed');}); )
Fait que l'élément HTML a .swb-shown et .swb-closed en fonction si la bannière est affichée ou fermée. Cela permet à toutes les parties du site d'être modifiées en fonction de Wheter, la bannière est montrée en faisant référence à ces classes CSS.
Script mis à jour pour suivre Jshint.
Implémenté SCSS pour la feuille de style de travail.
Assurez-vous que le contenu / la valeur / valeur de la balise Meta-Tag "Apple-Mobile-Web-Apptiple" est utilisé pour l'étiquette de texte / titre de texte de l'icône de l'écran au lieu de la balise <title> de la page lorsqu'elle est présente (toujours utilisée comme secours).

Version 1.4 - 24 mai 2014

Mise à jour pour utiliser iOS 7 Design sur iPhones & iPads exécutant iOS 7 (nouvelles icônes, emplacements, popups et conception globale).
Maintenant, sélectionne automatiquement le style iOS 6/7 le cas échéant. IMPORTANT: Les noms de thème ont changé car il y a maintenant "Auto" (par défaut), "iOS 6", "iOS 7" et "Dark". Auto utilisera les iOS 6 et 7 en fonction de ce que l'appareil s'exécute.

20 mai 2014

JQUERY SMART WEB APP Banner est maintenant disponible sur CDNJS.com en tant qu'option CDN hébergée!

Version 1.3 - 22 mars 2013

Ajout de la fonctionnalité qui remplace l'URL de la page avec l'URL spécifiée via les options du script. Cela signifie que vous pouvez le définir sur la page d'accueil de votre site afin que l'utilisation de la fonction Add to Home Écran enregistre la page d'accueil plutôt que la page sur laquelle le visiteur se trouve (le comportement par défaut).
Toujours coincé sur jQuery plus ancien que la version 1.7? Cette fonction d'échange d'URL a également été ajoutée à cette version et est disponible ici (il est autrement recommandé d'exécuter la dernière version ci-dessous).

Version 1.2 - 20 mars 2013

Changé la façon dont le CSS est structuré pour utiliser uniquement trois valeurs PX et utiliser EM pour le reste. Cela permet à l'échelle de la bannière d'être modifiée tout en empêchant les tailles de police externes de l'affecter involontairement.

Version 1.1.2 - 20 mars 2013

A échangé .live () pour .on () pour la compatibilité jQuery 1.9+.
Nécessite maintenant jQuery 1.7+, mais la version précédente peut être téléchargée ici (en utilisant le dernier CSS fonctionnera).

Version 1.1.1 - 3 octobre 2012

Ajout d'une option pour activer l'addition automatique de la balise Meta Mobile-Web-App (désactivée par défaut).

Version 1.1 - 27 septembre 2012

Ajout de la fonctionnalité qui remplace l'attribut <tight> de la page avec le titre spécifié via les options du script.
Ajout d'une option pour désactiver la nouvelle fonctionnalité d'échange de titre.

Version 1.0 - 19 septembre 2012

Libération initiale (le même jour que iOS 6).

Guide de démarrage du débutant

Guide de démarrage ouvert

Exemple (en utilisant les paramètres par défaut)

Exemples / Basic.js

Exemple (avec des options complètes)

Exemples / compressions complètes.js

Exemple d'exécution des actions lorsque la bannière est affichée et / ou cachée

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

Télécharger maintenant

Télécharger
Utiliser des CDNJ

Il est open source: vous pouvez le voir sur github et télécharger à partir de là aussi!

Exige: jQuery v1.7 ou version ultérieure en utilisant JQuery 1.3.2 - 1.8.x? Utilisez le fichier jQuery.smartwebbanner.pre-1.7.min.js.

Soutien

Envoyez-moi un courriel

FAQ

Besoin de le faire enregistrer la page d'accueil de votre site plutôt que la page sur laquelle se trouve le visiteur? La sauvegarde d'une page sur l'écran d'accueil enregistre la page actuelle par défaut, mais vous pouvez définir l'option URL pour être toute URL que vous souhaitez qu'en enregistrer et le plugin s'occupe du reste.

Astuce: définissez URL sur «/» pour que ce soit toujours la page d'accueil de votre site tout en étant indépendant du domaine lui-même. De plus, il ne peut pas être un domaine différent pour des raisons de sécurité.

Besoin d'ajuster la taille de la bannière pour s'adapter à l'échelle de votre site? Le CSS de ce plugin a été construit pour faire référence à deux éléments (avec une variante) qui détermine ensuite la taille de tout le reste. Changez simplement la taille de la police pour #smartwebbanner & # swb-instructions (ajoutez .Ipad pour les tailles spécifiques à l'iPad) dans votre propre CSS (ou modifiez directement le plugin) pour répondre à vos besoins.

Vous cherchez à l'utiliser pour promouvoir des applications Android non Web et / ou des applications iOS sur les versions iOS et / ou différents navigateurs? Consultez Jasny's Fork pour les applications Android et les applications iOS plus anciennes que iOS 6. Consultez également la fourche d'Ijason visant uniquement à la rendre disponible pour les applications iOS dans d'autres navigateurs iOS (Google Chrome) et versions iOS plus anciennes. Remarque: les deux sont pour les applications non Web. Il s'agit du seul plugin destiné aux applications Web (à ma connaissance).