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+智能横幅，但仅支持App Store上的应用程序而不是Web应用程序感到难过？这个小小的JQuery供电脚本在这里提供帮助。将此小脚本添加到您的网站中，并邀请您的访问者将您的网站与其余的应用程序一起保存到他们的主屏幕上！

快速预览

可在以下网址找到：http：//kurtzenisek.com/p/smart-web-banner/

特征

iOS 6和7+智能横幅外观和感觉，但为Web应用程序制作！
智能地显示iOS 6/7+横幅设计，具体取决于访问者的使用。
将整个站点滑动，而不是通过弹出窗口阻塞访客的页面。
添加CSS和JavaScript，然后调用脚本...就是这样。图形利用CSS 3并在视网膜分辨率上使用嵌入式图标（非常适合移动野生动物园），因此无需关注图像。
仅在使用移动野生动物园时显示，因为这是唯一具有主屏幕集成的浏览器。
设置横幅关闭后再次显示横幅并在访客按“保存”（避免烦人的访客）之后再次显示。
自动图标检测通过标签检测（如果不可用，则不会显示它，可以在需要的情况下轻松覆盖它，甚至可以在图标中添加光泽，如果它检测到它不预先构造它[也可以通过选项设置]）。
可以自动添加<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> （可以在http://kurtzenisek.com.com.com.com.com.com.com.com.com-p/p/p/p/p/p/p/p/p/p/p/p/p/p/p/p/p.-ban/-k..com.com-ban/-
SWB的事件触发器：显示，SWB：封闭，SWB：指令示波和SWB：指令：在显示或封闭的横幅或说明时，在横幅元素上闭合，以执行其他操作。
根据横幅的状态将类别的类添加到页面的HTML元素中，以根据横幅状态通过CSS调整网站的各个方面。
可以通过更改CSS的#SmartWebbanner＆＃SWB-Instructions的字体大小来缩放/调整大小以适合您的网站的移动视口，以使其具有其余尺度（添加.IPAD的iPad for iPad特定尺寸）。
特定于设备的说明（“添加到主屏幕”是iPad的顶部，而它位于iPhone的底部）。甚至与设备本机弹出窗口的外观和感觉（微妙的颜色和尺寸差异）相匹配。
将页面的URL与指定的URL交换（使用HTML5替换），因此这就是主屏幕图标保存后将访问者带到的，而不是将其添加到主屏幕上（这是默认行为）时恰好打开的页面。例如，将其制作为“主屏幕”按钮始终是您的主页。
将页面的标题与指定的标题交换，因此在将其添加到主屏幕中时，这就是图标的默认标签（否则它将使用现有的Apple-Mobile-web-app-app-app-title meta标签或页面标题）。似乎很小，但这可能会有影响。
有用的调试选项（设置要在所有浏览器中显示的横幅，并无视已经关闭/保存的cookie）使预览/测试横幅变得轻而易举。
通过大量选项可配置令人难以置信的配置！ *请参阅下面的示例以获取完整列表。

路线图

为Android设备实施Chrome支持和样式。
改进添加Mobile-Web-App Meta标签的AutoApp功能，以防止正常（非AJAX）链接在Safari中打开（除非离开域或去媒体文件（由于缺少后退按钮））。更改默认的AutoApp设置，因为现在对标准站点更有用。
考虑为寻求此功能的人以WordPress插件的形式实现，而无需/时间实现脚本本身（请为“作者”的标题和描述提取博客的名称），并考虑为脚本选项构建插件设置页面。另外，应更新脚本以自动适应WordPress的管理栏。
代码大修/重写/清理。
创建一个主题系统，该系统允许单独提供CSS文件以确定设计（与核心样式分开）。从技术上讲，这是可能的，但是许多现有的CSS样式都需要覆盖以完成新的设计。
获取社区的反馈！（给我发电子邮件）

ChangElog

版本1.5- 2017年8月11日

添加的swb:shown ， swb:closed ， swb:instructions-shown和swb:instructions-closed事件/触发器分别在显示和关闭横幅时被解雇的$('#smartWebBanner')元素。这允许在显示横幅/隐藏横幅时发生操作（例如$('#smartWebBanner').on('swb:closed',function(){alert('Banner was closed');}); ）;
制造的HTML元素具有.swb-shown和.swb-closed切换，具体取决于横幅是否显示出来或关闭。这允许通过引用这些CSS类显示横幅显示网站的任何部分。
更新脚本以关注Jshint。
实施了工作样式表的SCS。
确保使用“ Apple-Mobile-web-app-title”元标记内容/值用于HomeScreen图标的文本标签/标题/标题，而不是当前的页面的<title>标签（仍然用作后备）。

版本1.4- 2014年5月24日

更新以在运行iOS 7（新图标，位置，弹出窗口和总体设计）上使用iOS 7设计。
现在，在适当的情况下自动选择iOS 6/7样式。重要：主题名称已经改变，因为现在有“自动”（默认），“ 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交换。这意味着您可以将其设置为网站的主页，以便使用“添加到主屏幕”功能可以节省主页，而不是访问者所打开的页面（默认行为）。
仍然卡在比版本1.7年龄大的JQuery上？此URL交换功能也已添加到该版本中，并且在此处可用（否则建议运行下面找到的最新版本）。

1.2版 - 2013年3月20日

更改了CSS的结构方式仅使用三个PX值并在其余部分中使用EM。这使横幅的尺度可以更改，同时仍防止外部字体大小无意间影响它。

版本1.1.2- 2013年3月20日

将.on（）换出.on（）以换取.on（）以1.9+兼容性。
现在需要JQuery 1.7+，但是可以在此处下载以前的版本（使用最新的CSS可以使用）。

版本1.1.1- 2012年10月3日

添加的选项以启用移动-Web-App Meta标签的自动添加（默认情况下禁用）。

版本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-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构建是指两个元素（带有一个变体），然后确定其他所有内容的大小。只需在您自己的CSS（或直接编辑插件）中更改#SmartWebbanner＆＃swb-inscructions＆＃swb-inscructions（添加.IPAD）的字体大小。

是否想使用它来推广旧iOS版本和/或不同浏览器上的非基于Web的Android应用程序和/或iOS应用？请查看Jasny的Android应用程序和iOS应用程序的叉子，该应用比iOS 6年龄较大。还请查看Ijason的叉子，旨在纯粹旨在使其可用于其他iOS浏览器（Google Chrome）和较旧的iOS版本中的iOS应用程序。注意：这两者都适用于非WEB应用程序。据我所知，这是针对Web应用程序的唯一插件。