Download Smart Web App Banner - Unduh Kode Sumber Smart Web App Banner

Smart Web App Banner

Data situs web

Version 1.5

Unduh

JQuery Smart Web App Banner

URL Proyek Resmi: http://kurtzenisek.com/p/smart-web-banner/

Mencari spanduk pintar iOS 6 & 7+, tetapi sedih dengan itu hanya mendukung aplikasi di App Store & bukan aplikasi web? Script bertenaga jQuery kecil ini ada di sini untuk membantu. Tambahkan skrip kecil ini ke situs Anda & undang pengunjung Anda untuk menyimpan situs Anda ke layar beranda mereka di samping sisa aplikasi mereka!

Pratinjau Cepat

Tersedia di: http://kurtzenisek.com/p/smart-web-banner/

Fitur

Tampilan & rasakan spanduk pintar iOS 6 & 7+, tetapi dibuat untuk aplikasi web!
Secara cerdas menunjukkan desain spanduk iOS 6/7+ tergantung pada apa yang digunakan pengunjung.
Geser seluruh situs ke bawah daripada menghalangi halaman dari pengunjung Anda dengan popup.
Tambahkan CSS & JavaScript, dan panggil skripnya ... itu saja. Grafik menggunakan CSS 3 & menggunakan ikon tertanam di resolusi retina (yang sempurna untuk safari seluler) sehingga tidak ada gambar yang perlu dikhawatirkan.
Hanya ditampilkan saat menggunakan safari seluler karena itu satu -satunya browser dengan integrasi layar beranda.
Tetapkan berapa lama sebelum spanduk ditampilkan lagi setelah ditutup & setelah pengunjung menekan "simpan" (menghindari pengunjung yang mengganggu).
Deteksi ikon otomatis melalui tag (tidak ditampilkan jika tidak tersedia, memungkinkan Anda dengan mudah menimpanya jika diinginkan, dan bahkan menambahkan gloss ke ikon jika mendeteksi itu tidak dikomposisi [juga dapat diatur melalui opsi]).
Dapat secara otomatis menambahkan <meta name="apple-mobile-web-app-capable" content="yes" /> Jika belum ada (menyimpan situs sebagai aplikasi web saat ditambahkan ke layar beranda & membuatnya sehingga spanduk tidak ditampilkan saat meninjau kembali situs).
Tema terang & gelap agar sesuai dengan desain situs Anda (saya sangat menyukai keduanya). Pratinjau tema dengan tombol di http://kurtzenisek.com/p/smart-web-banner/
Tunjukkan/Sembunyikan Banner sesuai permintaan menggunakan <a href="#show">$().smartWebBanner('show');</a> & <a href="#hide">$().smartWebBanner('hide');</a></a> (dapat diprisualkan di http://kurtzen..com.
Pemicu Acara untuk SWB: Ditampilkan, SWB: Tertutup, SWB: Shown, dan SWB: Instruksi: Tertutup pada elemen spanduk untuk melakukan tindakan tambahan ketika spanduk atau instruksi ditampilkan atau ditutup.
Menambahkan kelas ke elemen HTML halaman berdasarkan keadaan spanduk untuk menyesuaikan aspek situs melalui CSS berdasarkan keadaan spanduk.
Dapat diskalakan/diubah ukurannya agar sesuai dengan viewport seluler situs Anda dengan mengubah ukuran font #smartwebbanner & #swb-instruksi melalui CSS untuk memiliki skala sisanya dengan itu (tambahkan .ipad ke pemilih untuk ukuran spesifik iPad).
Instruksi khusus perangkat ("Tambahkan ke Layar Beranda" berada di bagian atas iPad saat berada di bagian bawah iPhone). Bahkan cocok dengan tampilan & nuansa popup asli perangkat (perbedaan warna & ukuran halus).
Bertukar URL halaman dengan URL yang ditentukan (menggunakan HTML5 ReplaceState) jadi itulah yang dilakukan ikon layar Beranda untuk menabung setelah menyimpannya daripada halaman yang kebetulan mereka lakukan ketika mereka pergi untuk menambahkannya ke layar beranda mereka (yang merupakan perilaku default). Misalnya, buat jadi tombol layar beranda selalu beranda Anda.
Bertukar judul halaman dengan judul yang ditentukan jadi itulah label default ikon saat menambahkannya ke layar beranda (yang sebaliknya akan menggunakan tag meta Apple-Mobile-WeB-App-title yang ada atau judul halaman). Tampaknya kecil, tetapi ini bisa berdampak.
Opsi Debug yang membantu (mengatur spanduk yang akan ditampilkan di semua browser & mengabaikan cookie yang sudah tertutup/disimpan) membuat pratinjau/pengujian spanduk menjadi mudah.
Sangat dapat dikonfigurasi melalui banyak opsi! *Lihat contoh di bawah ini untuk daftar lengkap.

Peta jalan

Menerapkan Dukungan & Gaya Chrome untuk perangkat Android.
Tingkatkan fitur AutoApp yang menambahkan tag meta mobile-web-app sehingga juga mencegah tautan normal (non-Ajax) dari pembukaan di Safari (kecuali meninggalkan domain atau pergi ke file media [karena kurangnya tombol kembali]). Ubah pengaturan AutoApp default karena sekarang jauh lebih berguna untuk situs standar.
Pertimbangkan menerapkan formulir plugin WordPress bagi mereka yang mencari fungsi ini tanpa kemampuan/waktu untuk mengimplementasikan skrip itu sendiri (apakah tarik nama blog untuk judul & deskripsi untuk "penulis"), dan lihat membangun halaman pengaturan plugin untuk opsi skrip. Juga, skrip harus diperbarui untuk secara otomatis mengakomodasi bilah admin WordPress.
Kode Overhaul/Tulis ulang/Pembersihan.
Buat sistem tema yang memungkinkan file CSS disediakan secara individual untuk menentukan desain (terpisah dari gaya inti). Ini secara teknis mungkin tetapi banyak gaya CSS yang ada perlu ditimpa untuk mencapai desain baru.
Dapatkan umpan balik dari komunitas! (Email saya)

Changelog

Versi 1.5 - 11 Agustus 2017

Menambahkan swb:shown , swb:closed , swb:instructions-shown dan swb:instructions-closed Acara/Pemicu ke Elemen $('#smartWebBanner') yang ditembakkan ketika spanduk ditampilkan dan ditutup, masing-masing. Ini memungkinkan tindakan terjadi ketika spanduk ditampilkan/disembunyikan (mis. $('#smartWebBanner').on('swb:closed',function(){alert('Banner was closed');}); );
Membuat elemen html memiliki .swb-shown dan .swb-closed dimatikan tergantung pada apakah spanduk ditampilkan atau ditutup. Hal ini memungkinkan setiap bagian dari situs untuk diubah berdasarkan pada apa pun spanduk ditunjukkan dengan merujuk kelas -kelas CSS tersebut.
Skrip yang diperbarui untuk mengikuti jShint.
SCSS yang diimplementasikan untuk stylesheet kerja.
Pastikan "Apple-Mobile-Web-App-Title" Meta Tag Content/Value digunakan untuk label/judul teks ikon homescreen alih-alih tag <title> halaman saat hadir (masih digunakan sebagai fallback).

Versi 1.4 - 24 Mei 2014

Diperbarui untuk menggunakan desain iOS 7 pada iPhone & iPad yang menjalankan iOS 7 (ikon baru, lokasi, popup, dan desain keseluruhan).
Sekarang seleksi otomatis gaya iOS 6/7 bila perlu. Penting: Nama tema telah berubah karena sekarang ada "Auto" (default), "iOS 6", "iOS 7", dan "Dark". Otomatis akan menggunakan iOS 6 & 7 tergantung pada apa yang sedang dijalankan perangkat.

20 Mei 2014

JQuery Smart Web App Banner sekarang tersedia di cdnjs.com sebagai opsi CDN yang dihosting!

Versi 1.3 - 22 Maret 2013

Fitur tambahan yang menukar URL halaman dengan URL yang ditentukan melalui opsi skrip. Ini berarti Anda dapat mengaturnya ke beranda situs Anda sehingga menggunakan fitur Add to Home Screen akan menyimpan beranda daripada halaman tempat pengunjung (perilaku default).
Masih terjebak di jQuery lebih tua dari versi 1.7? Fitur pertukaran URL ini telah ditambahkan ke versi itu juga & tersedia di sini (sebaliknya disarankan untuk menjalankan versi terbaru yang ditemukan di bawah).

Versi 1.2 - 20 Maret 2013

Mengubah bagaimana CSS disusun untuk hanya menggunakan tiga nilai px & menggunakan EM untuk sisanya. Hal ini memungkinkan skala spanduk diubah sambil tetap mencegah ukuran font eksternal dari secara tidak sengaja mempengaruhi itu.

Versi 1.1.2 - 20 Maret 2013

Ditukar .live () untuk .on () untuk kompatibilitas jQuery 1.9+.
Sekarang membutuhkan jQuery 1.7+, tetapi versi sebelumnya dapat diunduh di sini (menggunakan CSS terbaru akan berfungsi).

Versi 1.1.1 - 3 Oktober 2012

Opsi yang ditambahkan untuk mengaktifkan addisi otomatis tag meta Mobile-Web-App (dinonaktifkan secara default).

Versi 1.1 - 27 September 2012

Fitur tambahan yang menukar atribut halaman <Title> halaman dengan judul yang ditentukan melalui opsi skrip.
Opsi tambahan untuk menonaktifkan fitur swap judul baru.

Versi 1.0 - 19 September 2012

Rilis awal (hari yang sama dengan iOS 6).

Panduan Memulai Pemula

Panduan Open Memulai

Contoh (Menggunakan Pengaturan Default)

Contoh/Basic.js

Contoh (dengan opsi lengkap)

Contoh/opsi penuh.js

Contoh melakukan tindakan saat spanduk ditampilkan dan/atau disembunyikan

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

Unduh sekarang

Unduh
Gunakan CDNJS

Ini adalah open source: Anda dapat melihatnya di github dan mengunduh dari sana juga!

Membutuhkan: jQuery v1.7 atau lebih baru menggunakan jQuery 1.3.2 - 1.8.x? Gunakan file jQuery.smartwebbanner.pre-1.7.min.js sebagai gantinya.

Mendukung

Email saya

FAQ

Perlu menyimpan beranda situs Anda daripada halaman pengunjung? Menyimpan halaman ke layar beranda menyimpan halaman saat ini secara default, tetapi Anda dapat mengatur opsi URL untuk menjadi URL apa pun yang Anda ingin simpan & plugin menangani sisanya.

Kiat: Atur URL ke '/' untuk memilikinya selalu menjadi beranda situs Anda sambil independen dari domain itu sendiri. Juga, itu tidak bisa menjadi domain yang berbeda untuk alasan keamanan.

Perlu menyesuaikan ukuran spanduk agar sesuai dengan skala situs Anda? CSS plugin ini dibangun untuk merujuk ke dua elemen (dengan satu varian) yang kemudian menentukan ukuran yang lainnya. Cukup ubah ukuran font untuk #Smartwebbanner & #swb-instruksi (tambahkan .IPAD untuk ukuran khusus iPad) di CSS Anda sendiri (atau edit plugin secara langsung) agar sesuai dengan kebutuhan Anda.

Ingin menggunakan ini untuk mempromosikan aplikasi Android berbasis web dan/atau aplikasi iOS pada versi iOS yang lebih lama dan/atau browser yang berbeda? Lihat Jasny's Fork for Android Apps & atau iOS Apps yang lebih tua dari iOS 6. Lihat juga Ijason's Fork yang ditujukan murni untuk membuatnya tersedia untuk aplikasi iOS di browser iOS lainnya (Google Chrome) & versi iOS yang lebih tua. Catatan: Keduanya untuk aplikasi non-WEB. Ini adalah satu -satunya plugin yang ditujukan untuk aplikasi web (sepengetahuan saya).