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應用程序的唯一插件。