使用(或不使用)jQuery在你的网站中实现智能应用横幅

本文概述

1.使用SmartApp标语
2.使用jquery.smartbanner
3.使用CSS和jQuery自行实现的横幅

智能标语是一个有用的元素, 应该在每个具有移动应用程序的网站上显示, 以鼓励和鼓励应用程序的下载(和使用), 而不是使用网站。尽管此标语应鼓励使用该应用程序, 但这并不意味着你作为开发人员会忽略或放弃你的网站与移动设备的响应能力和兼容性！标语的使用仅是为了推广你的应用程序, 而绝不应像” 下载我们的应用程序, 我们的网站在移动设备上无法正常工作” 之类的信息。
在本文中, 你将学习如何在网站上实现此功能, 以防你有自己的网站应用程序, 使用插件, 甚至使用标记, 一些CSS和VanillaJS(或jQuery)自己实现横幅。
1.使用SmartApp标语我们认为, 最有用, 易于使用和实现的插件可以创建横幅广告, 以在你的网站中推广你的移动应用程序。 SmartApp标语是没有jQuery(或任何其他框架)要求的轻量级智能应用标语。易于实施, 并且具有非常可接受的设计(易于定制)。
该插件将自动检查是否是移动设备, 并在适用时显示横幅。
你可以通过从官方github仓库下载.zip文件来获取插件, 也可以使用npm install – save smart-app-banner从npm安装软件包。
以下代码包含可用于插件和初始化方式的所有选项。在文档中添加css和js文件：

< !-- Style --> < link rel="stylesheet" href="http://www.srcmini.com/smart-app-banner.css" type="text/css" media="screen"> < !-- Smart Banner Plugin --> < script src="http://www.srcmini.com/smart-app-banner.js"> < /script>

请注意, URL是由插件生成的(如果你在读取源代码的情况下可以更改URL, 以防某些生成URL不能正常工作), 因此你需要在元数据中提供应用ID在文档中分别为每个平台标记：

< !-- App store --> < meta name="apple-itunes-app" content="app-id=< id-of-your-app> "> < !-- Play Store --> < meta name="google-play-app" content="app-id=< id.of.your.app> "> < !-- Windows App Store --> < meta name="msApplication-ID" content="app-id=< id-of-your-app> ">

和初始化：

// Initialize Bannernew SmartBanner({daysHidden: 15, // days to hide banner after close button is clicked (defaults to 15)daysReminder: 90, // days to hide banner after "VIEW" button is clicked (defaults to 90)appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language)title: 'Our Code Editor', author: 'Our Code World', button: 'Download', store: {ios: 'On the App Store', android: 'In Google Play', windows: 'In Windows store'}, price: {ios: 'FREE', android: 'FREE', windows: 'FREE'}, force:'ios', // Add an icon (in this example the icon of Our Code Editor)icon: "https://lh3.googleusercontent.com/yyEmckv5badLAHiu8y5rH1ieZNqxeuZOaWPZoj7o3yHujtNWffzZFLeXdOHJ3q2HrIA=w300-rw", //theme: '', // put platform type ('ios', 'android', etc.) here to force single theme on all device//icon: '', // full path to icon image if not using website icon image//force: 'windows' // Uncomment for platform emulation});

每个平台上的横幅应如下所示：

文章图片
2.使用jquery.smartbanner 智能横幅用于在网站上的所有应用程序商店中推广应用程序。这个jQuery插件将此功能引入了iOS, Android设备和Windows Store应用。
注意：jQuery Smart Banner目前尚未得到积极维护, 但可以正常使用, 你可以使用它并自行修改, 以备不时之需。

< meta name="apple-itunes-app" content="app-id=< id-of-your-app> "> < !-- Play Store --> < meta name="google-play-app" content="app-id=< id.of.your.app> "> < !-- Windows App Store --> < meta name="msApplication-ID" content="app-id=< id-of-your-app> "> < !-- Add jQuery --> < script src="http://img.readke.com/220524/1KK150V-2.jpg"integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"> < /script> < !-- Add the required scripts --> < link rel="stylesheet" href="http://www.srcmini.com/resources/jquery.smartbanner.css" type="text/css" media="screen"> < script src="http://www.srcmini.com/resources/jquery.smartbanner.js"> < /script> < !-- Start smartbanner --> < script type="text/javascript"> $(function () {$.smartbanner({title: "Our Code Editor Free", // What the title of the app should be in the banner (defaults to < title> )author: null, // What the author of the app should be in the banner (defaults to < meta name="author"> or hostname)price: 'FREE', // Price of the appappStoreLanguage: 'us', // Language code for App StoreinAppStore: 'On the App Store', // Text of price for iOSinGooglePlay: 'In Google Play', // Text of price for AndroidinAmazonAppStore: 'In the Amazon Appstore', inWindowsStore: 'In the Windows Store', // Text of price for WindowsGooglePlayParams: null, // Aditional parameters for the marketicon: null, // The URL of the icon (defaults to < meta name="apple-touch-icon"> )iconGloss: null, // Force gloss effect for iOS even for precomposedurl: null, // The URL for the button. Keep null if you want the button to link to the app store.button: 'VIEW', // Text for the install buttonscale: 'auto', // Scale based on viewport size (set to 1 to disable)speedIn: 300, // Show animation speed of the bannerspeedOut: 400, // Close animation speed of the bannerdaysHidden: 15, // Duration to hide the banner after being closed (0 = always show banner)daysReminder: 90, // Duration to hide the banner after "VIEW" is clicked *separate from when the close button is clicked* (0 = always show banner)force: null, // Choose 'ios', 'android' or 'windows'. Don't do a browser check, just always show this bannerhideOnInstall: true, // Hide the banner after "VIEW" is clicked.layer: false, // Display as overlay layer or slide down the pageiOSUniversalApp: true, // If the iOS App is a universal app for both iPad and iPhone, display Smart Banner to iPad users, too.appendToSelector: 'body', //Append the banner to a specific selectoronInstall: function () {// alert('Click install'); }, onClose: function () {// alert('Click close'); }}); }); < /script>

与第一个插件相同, 你需要在每个商店中添加带有应用程序ID的meta标签。样式与第一个插件的标语相似(几乎相同)(因为第一个插件基于此)：

文章图片
3.使用CSS和jQuery自行实现的横幅你甚至可以创建自己的横幅, 而无需依赖任何插件。要获得这样的促销标语：

文章图片
你可以在项目中看到使用一些标记, CSS和jQuery的出色实现。请注意, 以下示例基于此存储库的代码。
标记如下：

< div class="smartbanner" id="smartabanner"> < div class="smartbanner-container"> < a href="http://www.srcmini.com/#" id="smb-close" class="smartbanner-close"> & times; < /a> < span class="smartbanner-icon"> < /span> < div class="smartbanner-info"> < div class="smartbanner-title"> Our Code Editor< /div> < div> Our Code World< /div> < span> Free & ndash; Google Play< /span> < /div> < a href="https://play.google.com/store/apps/details?id=com.ourcodeworld.ourcodeeditorfree" target="_blank" class="smartbanner-button"> < span class="smartbanner-button-text"> Get it< /span> < /a> < /div> < /div>

CSS将是(请记住更改图标源)：

.smartbanner {left:0; top:0; width:100%; height:78px; font-family: "Helvetica Neue", helvetica, arial, sans-serif; background:#fff; overflow:hidden; border-bottom: 1px solid #ccc; margin-bottom: 10px; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; }.smartbanner-container {margin:0 auto; }.smartbanner-close {position:absolute; left:7px; top:7px; display:block; font-family:'ArialRoundedMTBold', Arial; font-size:15px; text-align:center; text-decoration:none; border-radius:14px; -webkit-font-smoothing:subpixel-antialiased; border:0; width:17px; height:17px; line-height:17px; color:#b1b1b3; background:#efefef; }.smartbanner-close:active, .smartbanner-close:hover {color:#333; }.smartbanner-icon{position:absolute; left:30px; top:10px; display:block; width:57px; height:57px; background-color: #fff; background-size:cover; background-image: url("https://lh3.googleusercontent.com/yyEmckv5badLAHiu8y5rH1ieZNqxeuZOaWPZoj7o3yHujtNWffzZFLeXdOHJ3q2HrIA=w300-rw"); }.smartbanner-info{position:absolute; left:98px; top:15px; width:44%; font-size:12px; line-height:1.2em; font-weight:bold; color:#999; }.smartbanner-title {font-size:15px; line-height:17px; color:#000; font-weight:bold; }.smartbanner-button{position:absolute; right:20px; top:24px; border-bottom:3px solid #b3c833; padding:0 10px; min-width:12%; height:24px; font-size:14px; line-height:24px; text-align:center; font-weight:bold; color:#fff; background-color:#b3c833; text-decoration:none; border-radius:5px; }.smartbanner-button:hover {background-color: #c1d739; border-bottom:3px solid #8c9c29; }.smartbanner-button-text {text-align:center; display:block; padding:0 5px; }

你可以添加一些JS来处理诸如close banner事件之类的简单操作：