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에서 앱을 지원하는 것만으로도 슬프다. 이 작은 jquery 구동 스크립트가 도움이됩니다. 이 작은 스크립트를 사이트에 추가하고 방문자를 초대하여 나머지 앱과 함께 사이트를 홈 화면에 저장하십시오!

빠른 미리보기

AT : http://kurtzenisek.com/p/smart-web-banner/

특징

iOS 6 & 7+ 스마트 배너 모양 및 느낌이지만 웹 앱을 위해 만들어졌습니다!
방문자가 사용하는 내용에 따라 iOS 6/7+ 배너 설계를 지능적으로 표시합니다.
팝업으로 방문자로부터 페이지를 방해하지 않고 전체 사이트를 아래로 미끄러 뜨립니다.
CSS & JavaScript를 추가하고 스크립트를 호출하십시오. 그래픽은 CSS 3을 사용하고 Retina 해상도 (모바일 사파리에 적합)에서 임베디드 아이콘을 사용하므로 우려 할 이미지가 없습니다.
Mobile Safari를 사용할 때만 표시되므로 홈 화면 통합이있는 유일한 브라우저입니다.
배너가 닫히고 방문자가 "저장"을 누른 후 배너가 다시 표시되기 전에 시간을 설정하십시오 (성가신 방문자를 피하기).
태그를 통한 자동 아이콘 감지 (사용할 수없는 경우 표시되지 않으면 원하는 경우 쉽게 덮어 쓸 수 있으며 아이콘에 광택이 감지되면 미리 작성되지 않으면 (옵션을 통해 설정할 수 있음]).
<meta name="apple-mobile-web-app-capable" content="yes" /> 아직 존재하지 않으면 자동으로 추가 할 수 있습니다 (홈 화면에 추가 할 때 웹 앱으로 사이트를 저장하고 사이트를 다시 방문 할 때 배너가 표시되지 않도록합니다).
사이트 디자인에 맞게 만들기위한 Light & Dark 테마 (정말 좋아합니다). http://kurtzenisek.com/p/smart-web-banner/의 버튼으로 테마를 미리 봅니다.
<a href="#show">$().smartWebBanner('show');</a> & <a href="#hide">$().smartWebBanner('hide');</a></a> (http://kurtzenisek.com/smart-webanner/)에서 미리보기를 사용하여 수요에 대한 배너를 표시/숨기십시오.
SWB에 대한 이벤트 트리거 : SHIP, SWB : 닫는, SWB : 지시 사항 및 SWB : 지침 : 배너 또는 지침이 표시되거나 닫을 때 추가 작업을 수행하기 위해 배너 요소에서 닫힙니다.
배너 상태를 기반으로 CSS를 통해 사이트의 측면을 조정하기 위해 배너 상태를 기반으로 페이지의 HTML 요소에 클래스를 추가합니다.
CSS를 통해 #SMARTWEBBANNER & #SWB-Instructions의 글꼴 크기를 변경하여 나머지 스케일을 갖도록 (iPad 관련 크기의 선택기에 .ipad를 추가)를 통해 사이트의 모바일 뷰포트에 맞게 조정/크기를 조정할 수 있습니다.
장치 별 지침 ( "홈 화면 추가"는 iPad의 상단에 있고 iPhone의 맨 아래에 있습니다). 장치의 기본 팝업 (미묘한 색상 및 크기 차이)의 모양과 느낌과 일치합니다.
지정된 URL (html5 replacestate 사용)으로 페이지의 URL을 교환하여 홈 화면 아이콘이 홈 화면에 추가 할 때 발생했을 때 발생한 페이지 (기본 동작)를 저장 한 후 방문자에게 가져가는 것입니다. 예를 들어, 홈 화면 버튼이 항상 홈페이지입니다.
지정된 제목으로 페이지 제목을 교체하여 홈 화면에 추가 할 때 아이콘의 기본 레이블이있는 것입니다 (그렇지 않으면 기존 Apple-Mobile-Web-App-Title Meta 태그 또는 페이지 제목을 사용합니다). 사소한 것처럼 보이지만 이것은 영향을 줄 수 있습니다.
유용한 디버그 옵션 (모든 브라우저에 표시 될 배너를 설정하고 이미 닫힌/저장된 쿠키를 무시합니다)은 배너를 미리보기/테스트하는 것이 바람을 산들 바람으로 만듭니다.
많은 옵션을 통해 엄청나게 구성 가능합니다! *전체 목록은 아래 예제를 참조하십시오.

로드맵

Android 장치 용 Chrome 지원 및 스타일을 구현하십시오.
모바일 -WEB-APP 메타 태그를 추가하는 AUTOAPP 기능을 향상시켜 Safari에서 정상 (비 Ajax) 링크가 열리는 것을 방지 할 수 있도록 (도메인을 떠나거나 미디어 파일로 이동하지 않는 한). 표준 사이트에 훨씬 더 유용하므로 기본 자동 자동 설정을 변경하십시오.
스크립트 자체를 구현할 수있는 능력/시간 없이이 기능을 찾는 사람들을 위해 WordPress 플러그인 양식에서 구현을 고려하고 ( "저자"의 제목 및 설명의 블로그 이름을 가져 오도록) 스크립트 옵션에 대한 플러그인 설정 페이지를 작성하십시오. 또한 스크립트는 WordPress 'Admin Bar를 자동으로 수용하기 위해 업데이트되어야합니다.
코드 점검/재 작성/청소.
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 토글이 있습니다. 이를 통해 사이트의 모든 부분을 Wheter를 기반으로 CSS 클래스를 참조하여 배너가 표시됩니다.
Jshint를 따르도록 업데이트 된 스크립트.
작업 스타일 시트 용 SCS를 구현했습니다.
"Apple-Mobile-Web-App-Title"메타 태그 내용/값이 Page의 <title> 태그 대신 <title> 태그 대신 홈 화면 아이콘의 텍스트 레이블/제목에 사용되는지 확인하십시오 (여전히 폴백으로 사용됨).

버전 1.4- 2014 년 5 월 24 일

iOS 7 (새로운 아이콘, 위치, 팝업 및 전반적인 디자인)을 실행하는 iPhone 및 iPad에서 iOS 7 디자인을 사용하도록 업데이트되었습니다.
이제 적절한 경우 iOS 6/7 스타일을 자동으로 선택합니다. 중요 : "Auto"(기본값), "iOS 6", "iOS 7"및 "Dark"가 있으므로 테마 이름이 변경되었습니다. Auto는 장치가 실행중인 내용에 따라 iOS 6 및 7을 사용합니다.

2014 년 5 월 20 일

JQuery Smart Web App Banner는 이제 cdnjs.com에서 호스팅 된 CDN 옵션으로 제공됩니다!

버전 1.3-2013 년 3 월 22 일

스크립트 옵션을 통해 지정된 URL과 페이지의 URL을 교체하는 기능이 추가되었습니다. 즉, 홈 화면 기능을 사용하면 방문자가있는 페이지가 아닌 홈페이지 (기본 동작)가 아닌 홈페이지를 저장할 수 있습니다.
버전 1.7보다 오래된 jQuery에 여전히 붙어 있습니까? 이 URL 스와핑 기능은 해당 버전에도 추가되었으며 여기에서 사용할 수 있습니다 (아래에서 볼 수있는 최신 버전을 실행하는 것이 좋습니다).

버전 1.2-2013 년 3 월 20 일

CSS가 3 개의 PX 값 만 사용하고 나머지에는 EM을 사용하도록 구성된 방식을 변경했습니다. 이를 통해 배너의 스케일을 변경하면서 외부 글꼴 크기가 의도하지 않게 영향을 미치는 것을 방지합니다.

버전 1.1.2-2013 년 3 월 20 일

jQuery 1.9+ 호환성에 대해 .on ()로 .live ()를 교체했습니다.
이제 jQuery 1.7+가 필요하지만 이전 버전은 여기에서 다운로드 할 수 있습니다 (최신 CSS를 사용하면 작동합니다).

버전 1.1.1- 2012 년 10 월 3 일

추가 옵션이 추가되어 모바일 -WEB-APP 메타 태그 (기본적으로 비활성화)를 자동 조정 할 수 있습니다.

버전 1.1-9 월 27 일

페이지의 <title> 속성을 스크립트의 옵션을 통해 지정된 제목으로 교체하는 기능이 추가되었습니다.
새로운 타이틀 스왑 기능을 비활성화하기위한 옵션이 추가되었습니다.

버전 1.0-9 월 19 일

초기 릴리스 (iOS 6과 같은 날).

초보자의 시작 가이드

시작 가이드를 열어보세요

예제 (기본 설정 사용)

예제/BASIC.JS

예제 (전체 옵션 포함)

예제/전체 options.js

배너가 표시되고/또는 숨겨진 경우 행동 수행 예

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

지금 다운로드하십시오

다운로드
cdnjs를 사용하십시오

그것은 오픈 소스입니다 : 당신은 github에서 그것을보고 거기에서 다운로드 할 수 있습니다!

필요 : jQuery v1.7 이후에도 여전히 jQuery 1.3.2-1.8.x를 사용하고 있습니까? 대신 jquery.smartwebbanner.pre-1.7.min.js 파일을 사용하십시오.

지원하다

이메일을 보내주세요

FAQ

방문자가 켜져있는 페이지 대신 사이트의 홈페이지를 저장해야합니까? 홈 화면에 페이지를 저장하면 기본적으로 현재 페이지를 저장하지만 저장하려는 URL로 URL 옵션을 설정하고 플러그인이 나머지를 처리합니다.

팁 : 도메인 자체와 무관 한 상태에서 항상 사이트의 홈페이지가되도록 URL을 '/'로 설정하십시오. 또한 보안상의 이유로 다른 도메인이 될 수는 없습니다.

사이트 규모에 맞게 배너 크기를 조정해야합니까? 이 플러그인의 CSS는 다른 모든 것의 크기를 결정하는 두 가지 요소 (하나의 변형 포함)를 참조하도록 만들어졌습니다. 자신의 CSS에서 #SmartWebbanner & #SWB-Instructions (iPad 특정 크기에 대한 .ipad 추가)에 대한 글꼴 크기를 변경하십시오 (또는 플러그인을 직접 편집) 요구에 맞게 변경하십시오.

이를 사용하여 이전 iOS 버전 및/또는 다른 브라우저에서 비 웹 기반 Android 앱 및/또는 iOS 앱을 홍보하려고합니까? iOS 6보다 오래된 Android Apps & 또는 iOS 앱 용 Jasny의 Fork를 확인하십시오. 또한 Ijason의 Fork는 다른 iOS 브라우저 (Google Chrome) 및 이전 iOS 버전에서 iOS 앱에서 사용할 수 있도록 순전히 목표로하는 것을 확인하십시오. 참고 :이 두 가지 모두 비 WEB 앱을위한 것입니다. 이것은 웹 앱을 목표로하는 유일한 플러그인입니다 (내 지식으로).