Penanda lintas browser. Tambahkan ke favorit untuk semua browser Tambahkan skrip ke favorit untuk semua browser
Pada suatu waktu, tautan "Tambahkan situs ke favorit" populer di situs, ketika diklik, alamat situs tersebut ditandai di browser. Namun, mengapa itu? Secara berkala, tautan semacam itu masih ditemukan di situs. Masalahnya adalah skrip yang digunakan untuk tujuan ini tidak berfungsi di banyak browser, sehingga nilainya mendekati nol. HTML5 memperluas kemampuan atribut tag rel dan sekarang dengan bantuannya Anda dapat dengan mudah menambahkan situs dan halaman individual apa pun ke favorit Anda.
Cukup menambahkan rel="sidebar" ke tautan dan saat Anda mengekliknya, panel khusus akan terbuka di browser untuk membuat bookmark baru. Sementara nilai sidebar didukung oleh dua browser - Firefox dan Opera, sisanya abaikan atribut rel dan ikuti tautan yang ditentukan seperti biasa.
Untuk menambah jumlah browser dan menambahkan IE ke dalamnya, Anda juga dapat menghubungkan skrip kecil ke tautan. Alhasil, ternyata Firefox, Opera, Internet Explorer akan memanggil panel khusus, browser lain akan mengikuti link tersebut (contoh 1).
Contoh 1: Tambahkan ke favorit
HTML5 IE Cr Op Sa Fx
Tambahkan ke fungsi favorit addBookmark() ( if (document.all) window.external..ru"); )
Tambahkan ke Favorit
Seperti apa aplikasi rel="sidebar" pada akhirnya? Hasilnya tergantung pada browser. Firefox, misalnya, membuka jendela seperti itu (Gbr. 1).
Beras. 1. Tambahkan ke Favorit di Firefox
Di Opera, tampilannya agak berbeda, tetapi artinya serupa (Gbr. 2).
Beras. 2. Menambah favorit di browser Opera
Internet Explorer memiliki antarmuka paling ringkas (Gbr. 3).
Beras. 3. Tambahkan ke Favorit di Internet Explorer
Meskipun penggunaan atribut rel tidak biasa karena dukungan browsernya yang buruk, atribut ini memiliki potensi yang sangat besar, dan jumlah nilainya terus bertambah. Jadi itu harus dimasukkan dalam tautan.
Banyak toko online memiliki hal yang berguna seperti fungsi tambahkan ke favorit, yang dengannya Anda dapat dengan mudah menemukan produk di bagian tersebut favorit kantor pribadi Anda. Jadi hari ini kita akan membuat bagian pertama dari bahan ini menggunakan HTML, css Dan JQUERY, dan pada artikel selanjutnya kami akan menambahkan ke favorit di PHP dan MYSQL.
Mengenai desain tambahan, saya memutuskan untuk membuat desain sendiri, yang pada prinsipnya dapat dengan mudah ditemukan serupa di situs lain. Ini, seperti yang mereka katakan, adalah masalah prinsip, semua orang dapat memilih sendiri) Anda dapat melihat contoh desain di versi demo atau pada gambar di bawah.
Langkah pertama. HTML.
Jadi, mari kita lanjutkan ke langkah pertama dan paling sederhana, yaitu menulis HTML kode dan pertama hubungkan semua skrip dan gaya yang diperlukan.
Sekarang kita membuat bingkai untuk, katakanlah, produk kita, tentukan kelas untuknya produk, yang akan membentuk blok umum dari produk itu sendiri, maka kita membutuhkan tombol untuk menambahkan ke favorit, itu akan terlihat seperti bookmark, jadi ketika ditekan, itu harus bersembunyi di dalam, ketika ditekan lagi, terbuka ke keadaan semula.
Untuk melakukan ini, kami membuat blok dengan kelas favorit, di mana kami menempatkan dua tombol menambahkan- tambahkan ke favorit dan menghapus- hapus dari favorit. Seperti yang Anda lihat, semuanya sangat sederhana, yang tersisa hanyalah menambahkan gambar apa pun dengan produk dan dengan ini Anda dapat melanjutkan ke langkah berikutnya JQUERY.
Tahap kedua. JQUERY.
Karena pekerjaan menambah dan menghapus dari favorit terkait dengan klik, jadi kita perlu memulai dengan acara klik. Buat variabel di dalam dokumen pengenal, di mana kita menulis status awal menggunakan metode hasClass.
Kemudian kami membuat kondisi di mana, mengacu pada variabel pengenal dan periksa apakah kita telah menambahkan produk, lalu tambahkan kelas sederhana menggunakan metode addClass.
Begitu pula sebaliknya, jika produk tersebut dihapus dari favorit, maka kami menghapus kelasnya sederhana menggunakan metode hapus Kelas.
$(document).on("click", ".favorites", function () ( var id = $(this).hasClass("simple"); if (!id) ( $(this).addClass("simple "); ) else ( $(ini).removeClass("sederhana"); ) ));
Langkah ketiga. CSS.
Nah, tetap menerapkan langkah terakhir, ini adalah gaya kami, yang tanpanya tidak ada yang pasti akan berfungsi dengan baik. Karena di sini semuanya dibangun, baik dalam memposisikan maupun membentuk transformasi tombol. Pertama, kita akan memposisikan blok utama kita dengan tepat dan membuatnya sejajar.
Produk ( posisi: relatif; tampilan: blok-sebaris;)
Sekarang mari kita lihat lokasi tombol untuk menambah dan menghapus dari favorit. Dari properti utama, kami akan menyoroti pemosisian, posisi samping, tinggi, lebar, dan indeks, yang tanpanya tombol kami tidak akan terlihat.
Sebagai kontrol, saya memilih Di barisan gambar, jadi kami akan bekerja dengan posisinya.
Favorit ( posisi: absolut; atas: 0; kanan: 0; lebar: 55px; tinggi: 55px; indeks-z: 1; ) .favorit .gambar ( posisi: absolut; lebar: 55px; tinggi: 55px; latar belakang: url( "../img/favorites.png") no-repeat; kursor: pointer; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; ) .favorites.simple ( background : url("../img/favorites.png") no-repeat 100% 100%; )
Terakhir, kita perlu bekerja dengan kelas sederhana, yang akan menangani penambahan dan penghapusan kontrol, serta dengan transformasi dan pemosisian latar belakang.
Favorit .add ( background-position: 0 0; -webkit-transform: rotate3d(1,1,0,0deg); -moz-transform: rotate3d(1,1,0,0deg); -ms-transform: rotate3d( 1,1,0,0deg); -o-transform: rotate3d(1,1,0,0deg); transform: rotate3d(1,1,0,0deg); ) .favorites.simple .add ( -webkit-transform : rotate3d(1,1,0,180deg); -moz-transform: rotate3d(1,1,0,180deg); -ms-transform: rotate3d(1,1,0,180deg); -o-transform: rotate3d(1, 1,0,180deg); transform: rotate3d(1,1,0,180deg); ) .favorites:hover .add, .favorites.simple .add ( background-position: -56px 0; ) .favorites .remove( background-position : -111px 0; -webkit-transform: rotate3d(1,1,0,180deg); -moz-transform: rotate3d(1,1,0,180deg); -ms-transform: rotate3d(1,1,0,180deg); -o-transform: rotate3d(1,1,0,180deg); transform: rotate3d(1,1,0,180deg); ); -moz-transform: rotate3d(1,1,0,0deg); -ms-transform: rotate3d(1,1,0,0deg); -o-transform: rotate3d(1,1,0,0deg); transform : rotate3d(1,1,0,0deg); ) .favorites .remove:hover ( background-position: -167px 0; )
Jangan lupa! Sekali lagi saya ulangi bahwa semua properti diperlukan, karena dirancang untuk jenis kontrol elemen yang murni diberikan. Sejujurnya, di browser lama, hal ini tidak terlihat bagus, jika, misalnya, ambil IE8, karena ini terutama menyangkut transformasi, tapi apa lagi, saya pikir keputusan itu sepenuhnya dibenarkan.
Setiap hari jumlah webmaster meningkat, yang berusaha membuat situs mereka sama nyamannya bagi pengguna semua browser, dan tidak mempertajamnya hanya untuk Internet Explorer, seperti sebelumnya. Mungkin yang terpenting, pengguna browser alternatif tidak menyukai tautan "Tambahkan ke Favorit", yang ditemukan di setiap situs, tetapi hanya berfungsi di Internet Explorer. Sekarang saya akan memberi tahu Anda cara mengimplementasikan fungsi ini dengan benar di situs Anda sehingga berfungsi di semua browser umum.
Karena pengguna mungkin perlu menambahkan ke Favorit tidak hanya situs (halaman utama), tetapi juga halaman tempatnya berada, kami akan mempertimbangkan kedua opsi secara mendetail, dan Anda sendiri yang memutuskan mana yang akan digunakan.
Tambahkan ke Favorit halaman utama situsPertama mari kita lihat bagaimana tautan "Tambahkan ke Favorit" untuk Internet Explorer berbeda dari pasangannya di peramban lain, lalu gabungkan menjadi satu. Di IE, fungsi window.external.AddFavorite() digunakan, yang mengambil dua nilai: alamat halaman untuk bookmark dan namanya:
Tambahkan situs ke FavoritSaya rasa tidak perlu dijelaskan disini. Mari kita lihat lebih dekat contoh berikutnya. Kode untuk menambahkan Favorit untuk Opera, Firefox dan Netscape adalah sebagai berikut:
Tambahkan situs ke FavoritSeperti yang Anda lihat, ini adalah tautan biasa dengan parameter rel="sidebar" tambahan, yang hanya memberi tahu browser untuk mem-bookmark situs saat mengeklik tautan. Selain itu, dalam parameter title="", Anda perlu menentukan dengan nama apa untuk mem-bookmark situs tersebut. Namun alamat halaman yang ditambahkan ditulis dalam href="". Biasanya halaman utama situs dan namanya ditunjukkan.
Jendela yang muncul saat Anda mengklik tautan
Sekarang kita perlu membuat tautan "Tambahkan ke Favorit" berfungsi sama baiknya di semua browser. Karena kode untuk IE hanya berfungsi di dalamnya, dan parameter rel="sidebar" hanya didukung oleh Opera, Firefox, dan Netscape, tidak ada yang menghalangi kami untuk menggabungkan kedua opsi menjadi satu tautan:
Tambahkan situs ke FavoritMari selesaikan masalah yang lebih kompleks dan alih-alih memasukkan alamat dan nama situs secara manual, kami akan secara otomatis menentukan halaman mana yang sedang dikunjungi pengunjung dan memberinya kesempatan untuk menambahkan halaman saat ini ke Favorit dengan alamat dan nama yang sesuai.
Tambahkan ke Favorit halaman saat iniJadi mari kita mulai lagi dengan Internet Explorer:
Seperti yang Anda lihat, tidak ada yang berubah dalam kode, kecuali untuk parameter yang masuk dari fungsi window.external.AddFavorite(). Parameter document.title JavaScript berisi judul halaman, yang diambil oleh browser dari judul dokumen yang kami tentukan, terletak di antara tag Judul Halaman. Browser menerima alamat halaman saat ini dari bilah alamat dan menetapkannya ke parameter location.href. Jadi, tidak perlu mengubah parameter yang kita butuhkan di setiap halaman secara manual.
Bookmark baru di Internet Explorer
Dengan browser Opera, Firefox, dan Netscape, segalanya menjadi sedikit lebih rumit. Kita harus menulis fungsi JavaScript kecil yang akan bekerja dengan cara yang hampir sama dengan fungsi yang sudah kita ketahui di Internet Explorer. Kami akan meletakkannya di dalam tautan sehingga hanya membutuhkan satu baris, tetapi saya telah memformatnya sedikit agar lebih mudah dibaca:
Tambahkan halaman saat ini ke FavoritPada awalnya, kami menetapkan nilai parameter JavaScript window.document.location (alamat halaman) dan window.document.title (judul halaman) ke variabel url dan judul. Selanjutnya, kita membuat fungsi bookmark(). Dengan bantuannya, kami membuat tautan dari beberapa variabel, yang nilainya adalah alamat dan judul halaman. Jangan lupakan parameter rel="sidebar", yang juga akan dihasilkan menggunakan bookmark().
Sekarang kita harus menggabungkan kode untuk Internet Explorer dan browser lain untuk mendapatkan satu tautan lintas-browser:
Tambahkan halaman saat ini ke FavoritKami sudah memiliki fitur yang kompatibel dengan browser utama. Sekarang kita perlu menggabungkannya dengan pengguna.
Melanggar stereotipKarena banyak pengguna browser alternatif sudah terbiasa dengan fakta bahwa tautan "Tambahkan ke Favorit" hanya berfungsi di Internet Explorer dan tidak memperhatikannya, kami perlu menunjukkan kepada pengunjung secara diam-diam bahwa kami telah menjaga fungsionalitas dari tautan ini di browsernya. Saya pikir opsi yang paling berhasil adalah menentukan browser mana yang digunakan pengunjung situs kami dan menampilkan logo yang sesuai di sebelah tautan. Atau Anda cukup menampilkan semua logo sekaligus:
Seperti inilah hasil akhirnya
Dilarang menyalin artikel.
Silakan tulis kode Html agar ketika Anda membuka situs, saran untuk menambahkan situs ke favorit atau bookmark browser ditampilkan secara otomatis di layar. jika situs tersebut di-bookmark di browser atau favorit, maka penawaran tersebut tidak akan muncul.
Terima kasih sebelumnya. Konstantin
Dimungkinkan untuk menulis konstruksi seperti itu, hanya konstruksi yang kompleks yang akan dihasilkan.
1) Anda perlu memasukkan jendela pop-up. (Mesin pencari tidak menyukai halaman ini, dan pengunjung juga tidak.
2) Bagaimana cara mengotorisasi pengunjung, apakah dia menandainya atau tidak? Untuk melakukan ini, Anda perlu menyetel cookie untuk browser ini.
(Seiring waktu, pengguna akan membersihkan komputer dan menghapus semua cookie, misalnya, saya melakukan ini setiap 2 minggu sekali.)
3) Tulis atau gunakan kode yang akan berfungsi dan panggil jendela untuk menyimpan bookmark.
(Apa yang berfungsi di Mozilla atau Firefox tidak berfungsi di Opera atau IE atau sebaliknya!)
4) Kode besar tambahan yang harus diinstal pada halaman agar pengunjung dapat mem-bookmark Anda. (Waktu muat halaman meningkat. Google tidak menyukai halaman yang memuat lama, mengecualikan situs semacam itu dari pencarian, Yandex tidak menyukai semua yang muncul: Popap Popover.)
KESIMPULAN: Ini tidak layak diletakkan di situs. Lebih baik memasang kode kecil di situs untuk ditambahkan ke bookmark, dan mengundang pengunjung untuk memilih sendiri apakah dia memerlukan situs Anda di bookmark. Munculan digunakan untuk sesuatu yang lebih bermanfaat, seperti mendaftarkan pengunjung.
Saya menemukan kode di web dan memodifikasinya agar berfungsi di semua browser populer.
Berikut adalah kode html sederhana:
KODE:
Tambahkan ke bookmark browser.
fungsi addBookmark()
if (document.all) window.external.addFavorite("http://infopodsolnux.ru/", "Situs web infopodsolnux.ru");
Tambahkan ke Favorit
Dengan menggunakan kode ini, Anda hanya mendapatkan tautan teks di situs Anda: Tambahkan ke Favorit
Di sini, di kode ini Anda perlu menambahkan tautan ke situs Anda dan mengubah deskripsi situs Anda di tag.
Tempel kode ini di tempat Anda ingin menampilkan penawaran Anda. (Lebih baik di bagian atas situs.)
Saat diklik, pengunjung disajikan jendela untuk menyimpan bookmark di browser.
Penjelajah Magang
Di situs saya, saya melangkah lebih jauh dan membuat
blok kecil dengan penjelasan kepada pengunjung.
Berikut beberapa contohnya:
Berikut adalah kode html yang saya gunakan:
KODE: PILIH SEMUA
fungsi addBookmark() if (document.all) window.external.addFavorite("http://infopodsolnux.ru/", "Situs web http://infopodsolnux.ru");
Jika Anda suka
|
lebar="139">
Dalam kode ini, seperti yang sebelumnya, kami mengubah tautan ke situs dan deskripsi Anda.
Berturut-turut:
