Smart Web App Banner Download - Smart Web App Banner Source Source Download

Smart Web App Banner

ข้อมูลเว็บไซต์

Version 1.5

ดาวน์โหลด

แบนเนอร์แอปพลิเคชัน JQuery Smart Web

URL โครงการอย่างเป็นทางการ: http://kurtzenisek.com/p/smart-web-banner/

กำลังมองหาแบนเนอร์อัจฉริยะ iOS 6 & 7+ แต่เสียใจกับแอพที่รองรับแอพใน App Store และไม่ใช่เว็บแอพเท่านั้น? สคริปต์ที่ขับเคลื่อนด้วย jQuery เล็ก ๆ นี้พร้อมให้ความช่วยเหลือ เพิ่มสคริปต์เล็ก ๆ นี้ลงในเว็บไซต์ของคุณและเชิญผู้เยี่ยมชมของคุณเพื่อบันทึกไซต์ของคุณลงในหน้าจอหลักของพวกเขาควบคู่ไปกับแอพที่เหลือของพวกเขา!

ตัวอย่างด่วน

มีให้ที่: http://kurtzenisek.com/p/smart-web-banner/

คุณสมบัติ

รูปลักษณ์และความรู้สึกอัจฉริยะของ iOS 6 & 7+ แต่สร้างขึ้นสำหรับเว็บแอพ!
แสดงการออกแบบแบนเนอร์ iOS 6/7+ อย่างชาญฉลาดขึ้นอยู่กับสิ่งที่ผู้เยี่ยมชมใช้
เลื่อน ไซต์ทั้งหมด ลงแทนที่จะขัดขวางเพจจากผู้เข้าชมด้วยป๊อปอัป
เพิ่ม CSS & JavaScript และเรียกสคริปต์ ... นั่นแหละ กราฟิกใช้ CSS 3 & ใช้ไอคอนฝังตัวที่ Retina Resolution (ซึ่งเหมาะสำหรับ Safari มือถือ) ดังนั้นจึงไม่มีภาพที่เกี่ยวข้อง
แสดงเฉพาะเมื่อใช้ Safari มือถือเนื่องจากเป็นเบราว์เซอร์เดียวที่มีการรวมหน้าจอหลัก
กำหนดระยะเวลาที่จะแสดงให้เห็นถึงแบนเนอร์อีกครั้งหลังจากปิดและหลังจากผู้เข้าชมกด "บันทึก" (หลีกเลี่ยงผู้เข้าชมที่น่ารำคาญ)
การตรวจจับไอคอนอัตโนมัติผ่านแท็ก (ไม่แสดงหากไม่สามารถใช้งานได้ให้คุณเขียนทับได้อย่างง่ายดายหากต้องการและมันจะเพิ่มความเงาให้กับไอคอนหากตรวจพบว่ามันไม่ได้ precomposed [สามารถตั้งค่าผ่านตัวเลือก])
สามารถเพิ่ม <meta name="apple-mobile-web-app-capable" content="yes" /> หากยังไม่ปรากฏ (บันทึกไซต์เป็นเว็บแอปเมื่อเพิ่มลงในหน้าจอหลัก
ธีมแสงและมืดเพื่อให้พอดีกับการออกแบบเว็บไซต์ของคุณ (ฉันรักทั้งสองอย่างมาก) ดูตัวอย่างธีมด้วยปุ่มบน http://kurtzenisek.com/p/smart-web-banner/
แสดง/ซ่อนแบนเนอร์ตามความต้องการโดยใช้ <a href="#show">$().smartWebBanner('show');</a> & <a href="#hide">$().smartWebBanner('hide');</a></a>
ทริกเกอร์เหตุการณ์สำหรับ SWB: แสดง, SWB: ปิด, SWB: คำแนะนำ-ชื้นและ SWB: คำแนะนำ: ปิดองค์ประกอบแบนเนอร์สำหรับการดำเนินการเพิ่มเติมเมื่อแบนเนอร์หรือคำแนะนำแสดงหรือปิด
เพิ่มคลาสลงในองค์ประกอบ HTML ของหน้าตามสถานะของแบนเนอร์สำหรับการปรับแง่มุมของไซต์ผ่าน CSS ตามสถานะของแบนเนอร์
สามารถปรับขนาด/ปรับขนาดให้พอดีกับวิวพอร์ตมือถือของไซต์ของคุณโดยการเปลี่ยนขนาดตัวอักษรของ #SmartWebbanner & #SWB-instructions ผ่าน CSS เพื่อให้มีส่วนที่เหลือด้วย (เพิ่ม. iPad ลงในตัวเลือกสำหรับขนาดเฉพาะ iPad)
คำแนะนำเฉพาะอุปกรณ์ ("เพิ่มลงในหน้าจอหลัก" อยู่ที่ด้านบนของ iPad ในขณะที่อยู่ด้านล่างของ iPhone) แม้แต่ตรงกับรูปลักษณ์และความรู้สึกของป๊อปอัพดั้งเดิมของอุปกรณ์ (ความแตกต่างของสีและขนาดที่ละเอียด)
สลับ URL ของหน้าด้วย URL ที่ระบุ (โดยใช้ HTML5 replaceState) ดังนั้นนั่นคือสิ่งที่ไอคอนหน้าจอหลักนำผู้เข้าชมไปหลังจากบันทึกมากกว่าหน้าเว็บที่พวกเขาเกิดขึ้นเมื่อพวกเขาไปเพิ่มลงในหน้าจอหลักของพวกเขา (ซึ่งเป็นพฤติกรรมเริ่มต้น) ตัวอย่างเช่นทำให้ปุ่มหน้าจอหลักเป็นหน้าแรกของคุณเสมอ
สลับชื่อหน้าของหน้าด้วยชื่อที่ระบุไว้นั่นคือสิ่งที่ฉลากเริ่มต้นของไอคอนคือเมื่อเพิ่มลงในหน้าจอหลัก (ซึ่งจะใช้แท็ก Meta Apple-Mobile-Web-App-Title หรือชื่อของหน้าเว็บ) ดูเหมือนเล็กน้อย แต่สิ่งนี้อาจส่งผลกระทบ
ตัวเลือกการดีบักที่เป็นประโยชน์ (ตั้งค่าแบนเนอร์ที่จะแสดงในเบราว์เซอร์ทั้งหมดและไม่สนใจคุกกี้ที่ปิด/บันทึกไว้แล้ว) ทำให้การดูตัวอย่าง/ทดสอบแบนเนอร์เป็นเรื่องง่าย
กำหนดค่าได้อย่างไม่น่าเชื่อผ่านตัวเลือกมากมาย! *ดูตัวอย่างด้านล่างสำหรับรายการเต็ม

แผนงาน

ใช้การสนับสนุนและสไตล์ Chrome สำหรับอุปกรณ์ Android
ปรับปรุงคุณสมบัติ AutoApp ที่เพิ่มแท็ก Meta-Web-App-App เพื่อให้สามารถป้องกันลิงก์ปกติ (ไม่ใช่ Ajax) จากการเปิดใน Safari (เว้นแต่จะออกจากโดเมนหรือไปที่ไฟล์สื่อ [เนื่องจากขาดปุ่มย้อนกลับ]) เปลี่ยนการตั้งค่า AutoApp เริ่มต้นเนื่องจากตอนนี้มีประโยชน์มากขึ้นสำหรับเว็บไซต์มาตรฐาน
พิจารณาการใช้งานในรูปแบบปลั๊กอิน WordPress สำหรับผู้ที่กำลังมองหาฟังก์ชั่นนี้โดยไม่มีความสามารถ/เวลาในการใช้สคริปต์เอง (ให้มันดึงชื่อบล็อกสำหรับชื่อและคำอธิบายสำหรับ "ผู้เขียน") และดูการสร้างหน้าการตั้งค่าปลั๊กอินสำหรับตัวเลือกของสคริปต์ นอกจากนี้ควรอัปเดตสคริปต์เพื่อรองรับแถบผู้ดูแลระบบของ WordPress โดยอัตโนมัติ
การยกเครื่องรหัส/การเขียนใหม่/การล้างข้อมูล
สร้างระบบธีมที่อนุญาตให้ไฟล์ CSS จัดเตรียมเป็นรายบุคคลเพื่อกำหนดการออกแบบ (แยกจากรูปแบบหลัก) นี่เป็นไปได้ทางเทคนิค แต่รูปแบบ CSS ที่มีอยู่จำนวนมากจำเป็นต้องเขียนทับเพื่อให้ได้การออกแบบใหม่
รับข้อเสนอแนะจากชุมชน! (ส่งอีเมลถึงฉัน)

การเปลี่ยนแปลง

เวอร์ชัน 1.5 - 11 สิงหาคม 2017

เพิ่ม 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
ใช้งาน SCSS สำหรับสไตล์การทำงาน
ทำให้แน่ใจว่าเนื้อหา/ค่าเมตาแท็ก Apple-Mobile-Web-Title "จะใช้สำหรับป้ายข้อความ/ชื่อข้อความของไอคอน Homescreen แทนแท็ก <title> ของหน้าเว็บเมื่อมีอยู่ (ยังคงใช้เป็นทางเลือก)

เวอร์ชัน 1.4 - 24 พฤษภาคม 2014

อัปเดตเพื่อใช้การออกแบบ iOS 7 บน iPhones & iPads ที่ใช้ iOS 7 (ไอคอนใหม่สถานที่ป๊อปอัปและการออกแบบโดยรวม)
ตอนนี้เลือกสไตล์ iOS 6/7 โดยอัตโนมัติเมื่อเหมาะสม สำคัญ: ชื่อธีมมีการเปลี่ยนแปลงเนื่องจากตอนนี้ "อัตโนมัติ" (ค่าเริ่มต้น), "iOS 6", "iOS 7" และ "มืด" Auto จะใช้ iOS 6 & 7 ขึ้นอยู่กับว่าอุปกรณ์กำลังทำงานอยู่

20 พฤษภาคม 2014

JQuery Smart Web App Banner พร้อมใช้งานใน CDNJS.com เป็นตัวเลือก CDN ที่โฮสต์!

เวอร์ชัน 1.3 - 22 มีนาคม 2013

เพิ่มคุณสมบัติที่สลับ URL ของหน้าด้วย URL ที่ระบุผ่านตัวเลือกของสคริปต์ ซึ่งหมายความว่าคุณสามารถตั้งค่าไว้ในหน้าแรกของเว็บไซต์ของคุณเพื่อให้การใช้คุณสมบัติ Add to Home Screen จะบันทึกหน้าแรกมากกว่าหน้าเว็บที่ผู้เข้าชมเปิดอยู่ (พฤติกรรมเริ่มต้น)
ยังคงติดอยู่กับ jQuery เก่ากว่าเวอร์ชัน 1.7 หรือไม่? คุณลักษณะการสลับ URL นี้ได้รับการเพิ่มในเวอร์ชันนั้นเช่นกัน & มีให้ที่นี่ (แนะนำให้เรียกใช้เวอร์ชันล่าสุดที่พบด้านล่าง)

เวอร์ชัน 1.2 - 20 มีนาคม 2013

เปลี่ยนวิธีการที่ CSS มีโครงสร้างเพื่อใช้ค่า PX สามค่าเท่านั้นและใช้ EM สำหรับส่วนที่เหลือ สิ่งนี้ช่วยให้ขนาดของแบนเนอร์เปลี่ยนไปในขณะที่ยังคงป้องกันขนาดตัวอักษรภายนอกจากการไม่ได้ตั้งใจส่งผลกระทบต่อมันโดยไม่ได้ตั้งใจ

เวอร์ชัน 1.1.2 - 20 มีนาคม 2013

สลับ. live () สำหรับ. on () สำหรับความเข้ากันได้ของ jQuery 1.9+
ตอนนี้ต้องใช้ jQuery 1.7+ แต่สามารถดาวน์โหลดเวอร์ชันก่อนหน้าได้ที่นี่ (โดยใช้ CSS ล่าสุดจะใช้งานได้)

เวอร์ชัน 1.1.1 - 3 ตุลาคม 2555

เพิ่มตัวเลือกเพื่อเปิดใช้งานการเพิ่มขึ้นอัตโนมัติของแท็ก Meta Meta-Web-App (ปิดใช้งานโดยค่าเริ่มต้น)

เวอร์ชัน 1.1 - 27 กันยายน 2555

เพิ่มคุณสมบัติที่สลับแอตทริบิวต์ <title> ของหน้าด้วยชื่อที่ระบุผ่านตัวเลือกของสคริปต์
เพิ่มตัวเลือกเพื่อปิดใช้งานคุณสมบัติการแลกเปลี่ยนชื่อใหม่

เวอร์ชัน 1.0 - 19 กันยายน 2555

การเปิดตัวครั้งแรก (วันเดียวกับ iOS 6)

คู่มือการเริ่มต้นใช้งานของผู้เริ่มต้น

คู่มือการเริ่มต้นใช้งาน

ตัวอย่าง (ใช้การตั้งค่าเริ่มต้น)

ตัวอย่าง/basic.js

ตัวอย่าง (พร้อมตัวเลือกเต็ม)

ตัวอย่าง/ตัวเลือกเต็มรูปแบบ js

ตัวอย่างการดำเนินการเมื่อมีการแสดงแบนเนอร์และ/หรือซ่อน

https://github.com/kzeni/smart-web-app-banner/blob/master/examples/perform-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 ของปลั๊กอินนี้ถูกสร้างขึ้นเพื่ออ้างถึงสององค์ประกอบ (พร้อมตัวแปรหนึ่ง) ซึ่งจะกำหนดขนาดของทุกอย่างอื่น เพียงเปลี่ยนขนาดตัวอักษรสำหรับ #SmartWebbanner & #SWB-Instructions (เพิ่ม. iPad สำหรับขนาดเฉพาะ iPad) ใน CSS ของคุณเอง (หรือแก้ไขปลั๊กอินโดยตรง) เพื่อให้เหมาะกับความต้องการของคุณ

กำลังมองหาการใช้สิ่งนี้เพื่อส่งเสริมแอพ Android ที่ไม่ใช่เว็บ และ/หรือแอพ iOS ในเวอร์ชัน iOS รุ่นเก่าและ/หรือเบราว์เซอร์ที่แตกต่างกัน? ลองดูแอพ Android Apps & หรือ iOS ของ Jasny ที่เก่ากว่า iOS 6 นอกจากนี้ยังตรวจสอบ Fork ของ Ijason Fork ที่มีจุดมุ่งหมายอย่างหมดจดเพื่อให้พร้อมใช้งานสำหรับแอพ iOS ในเบราว์เซอร์ iOS อื่น ๆ (Google Chrome) และรุ่น iOS ที่เก่ากว่า หมายเหตุ: ทั้งสองอย่างนี้มีไว้สำหรับแอพที่ไม่ใช่ WEB นี่เป็นปลั๊กอินเดียวที่มุ่งไปที่เว็บแอป (สำหรับความรู้ของฉัน)