Cara membuat tombol "tambahkan ke favorit". Tautan "Tambahkan ke Favorit" untuk semua browser Tambahkan ke Favorit q node

Banyak toko online memiliki fitur berguna seperti fungsi tambahkan ke favorit, yang dengannya Anda dapat dengan mudah menemukan produk di bagian tersebut favorit akun pribadi Anda. Hari ini kita akan membuat bagian pertama dari bahan ini menggunakan HTML, CSS Dan JQUERY, dan pada materi selanjutnya kami akan menambahkan favorit di PHP dan MYSQL.

Mengenai desain tambahannya, saya memutuskan untuk membuat desain sendiri, yang pada prinsipnya mudah ditemukan serupa di situs lain. Seperti kata pepatah, ini masalah prinsip, setiap orang bisa memilih sendiri) Contoh desainnya bisa Anda lihat di versi demo atau pada gambar di bawah ini.

Langkah pertama. HTML.

Jadi, mari kita beralih ke langkah pertama dan paling sederhana, yaitu menulis HTML kode dan pertama-tama sambungkan semua skrip dan gaya yang diperlukan.

Sekarang kita membuat kerangka kerja untuk, katakanlah, produk kita, dan berikan kelas padanya produk, yang akan membentuk blok umum dari produk itu sendiri, kemudian kita memerlukan tombol untuk menambahkan ke favorit, akan terlihat seperti bookmark, jadi ketika diklik akan bersembunyi di dalam, dan ketika diklik lagi, akan terbuka ke keadaan semula .

Untuk melakukan ini, buat 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 harus Anda lakukan hanyalah menambahkan gambar produk apa pun dan kemudian Anda dapat melanjutkan ke langkah berikutnya JQUERY.

Tahap kedua.

JQUERY. Karena bekerja dengan menambah dan menghapus dari favorit berhubungan dengan klik, kita perlu memulai dengan peristiwa klik. Buat variabel di dalam dokumen pengenal , di mana kita menulis keadaan awal menggunakan metode ini.

memiliki Kelas Karena bekerja dengan menambah dan menghapus dari favorit berhubungan dengan klik, kita perlu memulai dengan peristiwa klik. Buat variabel di dalam dokumen Kemudian kita membuat kondisi di mana, mengacu pada variabel dan periksa apakah kita sudah menambahkan produk, lalu tambahkan kelas sederhana menggunakan metode tersebut.

tambahkanKelas dan periksa apakah kita sudah menambahkan produk, lalu tambahkan kelas Begitu pula sebaliknya, jika Anda menghapus suatu produk dari favorit Anda, maka hapus kelasnya menggunakan metode tersebut.

hapusKelas

$(document).on("click", ".favorites", function () ( var id = $(this).hasClass("simple"); if (!id) ( $(this).addClass("simple "); ) else ( $(ini).removeClass("sederhana"); ) ));

Nah, yang tersisa hanyalah menerapkan langkah terakhir, ini adalah gaya kami, yang tanpanya tidak ada yang akan berfungsi dengan baik. Karena semuanya di sini didasarkan pada posisi dan pembentukan transformasi tombol. Untuk memulai, kita akan memberikan blok utama kita posisi yang benar dan menjadikannya blok string.

Produk ( posisi: relatif; tampilan: blok sebaris; )

Sekarang mari beralih ke lokasi tombol tambah dan hapus dari favorit. Di antara properti utama, kami menyoroti posisi, posisi samping, tinggi, lebar, dan indeks, yang tanpanya tombol kami tidak akan terlihat.

Untuk 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; ) .favorites .image ( posisi: absolut; lebar: 55px; tinggi: 55px; latar belakang: url( "../img/favorites.png") tanpa pengulangan: penunjuk; -webkit-backface-visibility: tersembunyi; -moz-backface-visibility: tersembunyi; -ulangi 100% 100% )

Terakhir, kita perlu bekerja dengan kelas sederhana, yang akan menangani penambahan dan penghapusan kontrol, serta transformasi dan pemosisian latar belakang.

Favorit .add ( posisi latar belakang: 0 0; -webkit-transform: memutar3d(1,1,0,0deg); -moz-transform: memutar3d(1,1,0,0deg); -ms-transform: memutar3d( 1,1,0,0 derajat); -o-transformasi: putar3d(1,1,0,0 derajat); transformasi moz: putar3d(1,1,0,180deg); -transformasi ms: putar3d(1,1,0,180deg); -o-transformasi: putar3d(1, 1,0,180deg); 1,0,180 derajat); .favorit: arahkan kursor .tambahkan, .favorit.sederhana .tambahkan ( posisi latar belakang: -56px 0; ) .favorit .hapus( posisi latar belakang : -111px 0; -transformasi webkit: putar3d(1 ,1,0,180deg); -moz-transformasi: putar3d(1,1,0,180deg); -ms-transformasi: putar3d(1,1,0,180deg); -o-transformasi: putar3d(1,1,0,180deg ); transformasi: putar3d(1,1,0,180deg); .favorit.sederhana .hapus ( -webkit-transformasi: putar3d(1,1,0,0deg) ; -moz-transformasi: putar3d(1,1,0, 0deg); -ms-transformasi: putar3d(1,1,0,0deg); -o-transformasi: putar3d(1,1,0,0deg); ) .favorites .remove:hover ( posisi latar belakang: -167px 0; )

Jangan lupa! Saya ulangi sekali lagi bahwa semua properti diperlukan, karena dirancang untuk jenis manajemen elemen khusus ini. Sejujurnya, pada browser lama, hal ini tidak terlihat bagus, jika, misalnya, IE8, karena ini terutama berkaitan dengan transformasi, tetapi untuk hal lainnya, saya pikir keputusan tersebut sepenuhnya dapat dibenarkan.

Hari ini saya akan memberi tahu Anda tentang satu fungsi berguna di situs ini - ini adalah tautan, atau tombol "Tambahkan ke bookmark (favorit)". Fitur ini memungkinkan pengguna untuk menandai halaman yang mereka sukai di situs Anda di browser mereka sehingga mereka dapat mengaksesnya dengan cepat dan mudah saat diperlukan.

Banyak dari Anda akan berkata: “Mengapa menduplikasi fungsi browser, karena tombol ini ada di bilah alamat?”

Ya, ada, tapi itu ada, pertama, tidak terlalu terlihat, dan kedua, beberapa pengguna tidak mengetahuinya sama sekali.

Untuk meningkatkan UI (antarmuka pengguna), lebih baik menduplikasi fungsi ini dan menempatkan tautan/tombol “Tambahkan ke bookmark (favorit)” di tempat yang menonjol. Misalnya jika Anda memiliki toko online, sebaiknya dicantumkan di kartu produk; jika Anda memiliki blog, maka di bawah atau di atas artikel. Lokasinya masih perlu diuji. Itu juga dapat ditempatkan di header situs di semua halaman.

Ada banyak cara berbeda untuk mengimplementasikan fungsi ini di Internet, namun kebanyakan dari cara tersebut tidak berfungsi di semua browser, terkadang tidak berfungsi di browser lama, terkadang di browser baru, terkadang di IE, terkadang di tempat lain.

Oleh karena itu, saya harus memilih yang terbaik di antara mereka dan menambahkan sedikit ke dalamnya. Dan hari ini saya akan membagikan metode ini kepada Anda dan memberikan petunjuk langkah demi langkah tentang cara memasang tautan/tombol “Tambahkan ke Bookmark (Favorit)” di situs web Anda.

Untuk membuat tombol “tambahkan ke bookmark” untuk sebuah situs, kita perlu mengikuti 3 langkah sederhana:

Jika Anda memiliki javascript di situs Anda - file yang terhubung di semua halaman situs, gunakan itu dan lanjutkan ke langkah berikutnya. Jika Anda tidak memiliki file seperti itu, Anda harus membuatnya. Untuk melakukan ini, kita akan membuat folder bernama "js" di folder root situs, dan sudah ada file di dalamnya dan menyebutnya "functions.js".

< !DOCTYPE html>Tajuk Toko > Konten Halaman

Di bawah ini adalah kode JavaScript yang perlu Anda tempelkan ke file yang Anda pilih/buat dan simpan:

Fungsi addFavorite(a) ( var title = document.title; var url = document.location; coba ( // Internet Explorer window.external.AddFavorite(url, title); ) catch (e) ( coba ( // Mozilla window. sidebar.addPanel(judul, url, ""); catch (e) ( // Opera if (typeof(opera)=="objek" || window.sidebar) ( a.rel="sidebar"; a.title = title; a.url=url; return true else ( // Peringatan tidak diketahui("Tekan Ctrl-D untuk menandai halaman"); ) ) return false;

Sekarang yang harus kita lakukan adalah memilih tempat di situs dan menempelkan kode HTML berikut di sana:

Tambahkan halaman ini ke favorit Anda!

Itu saja! Anda dapat melihat (dan mencoba) cara kerjanya tepat di bawah, serta di sidebar situs ini.

P.S. Saya ingin menambahkan: Metode ini berfungsi di browser berikut:

• Opera
• Mozilla Firefox
• Google Chrome / Safari - pesan “Tekan Ctrl-D untuk menandai halaman ini” akan ditampilkan; di browser ini fungsi ini dinonaktifkan untuk alasan keamanan.

Halo. Mari kita bicara tentang cara membuat tautan atau tombol untuk ditambahkan ke favorit (bookmark) untuk semua browser: Chrome, Firefox, Opera, Internet Explorer, Safari - lintas browser, sehingga ketika pengguna mengkliknya, dia dapat menyimpannya untuk masa depan dan ingat halaman Anda. Tentu saja, pastikan kontennya menarik, jika tidak, tidak akan ada yang mem-bookmark-nya :)
Jadi ayo pergi.

Masukkan kode di tempat mana pun yang Anda perlukan. Semua pengaturan kecuali yang tercantum di bawah ini dapat diubah atau dihapus.

• id="favorit"
  Petunjuk untuk Chrome, Opera dan semua browser berbasis mesin Webkit akan ditulis di sini
• rel="bilah samping"
  Atribut tersebut diperlukan, diperlukan untuk Firefox, sehingga akan menentukan bahwa halaman melalui link harus dikirim ke favorit
• href=""
  Dianjurkan juga untuk membiarkannya tidak berubah. Firefox akan mengambil link bookmark dari alamat ini

  Jika terserah saya, saya akan mengganti a dengan span , tetapi opsi ini tidak akan berfungsi dengan Firefox

• onclick="tambahkanFav()"
  Skrip javascript akan ditentukan di sini. Lebih banyak tentang dia

Letakkan kode di file eksternal, atau letakkan di tempat mana pun yang Anda suka di halaman, misalnya, di bagian atau sebelum tag penutup
Kodenya dikomentari, menurut saya tidak ada yang ribet. Jika Anda memiliki pertanyaan, tanyakan di komentar.

Tentu saja, tidak ada gunanya menampilkan tautan untuk ditambahkan ke favorit di perangkat seluler; itu tidak akan berfungsi di sana. Oleh karena itu, Anda perlu memfilternya.
Untuk melakukan ini, Anda dapat, misalnya, membuat tautan menggunakan javascript, lalu memfilter semuanya sesuai kebutuhan.

// Fungsi untuk menentukan "mobilitas" fungsi browser MobileDetect() ( var UA = navigator.userAgent.toLowerCase(); return (/android|webos|iris|bolt|mobile|iphone|ipad|ipod|iemobile|blackberry |windows phone |opera mobi|opera mini/i .test(UA)) ? true: false ; ) // Jika browser BUKAN seluler, tampilkan tautan if (!MobileDetect())( document.getElementById("MyID" ).innerHTML = "Di sini kode tautan HTML (lihat di atas)";

Mari kita uraikan sedikit

• var UA = navigator.userAgent.toLowerCase(); — menulis header browser ke variabel, mengubahnya menjadi huruf kecil. Berdasarkan isinya, kami akan menentukan “mobilitas” browser.
• return (/Ekspresi reguler/.test(UA) ? true: false) - filter. Ekspresi reguler mencatat fragmen yang dapat ditemukan di header browser seluler. Anda dapat menambahkan nilai Anda sendiri dengan memisahkannya | .

  Filternya peka huruf besar-kecil. Oleh karena itu, jika Anda memasukkan nilai Anda ke dalam filter, pastikan untuk menuliskannya dalam huruf kecil (huruf kecil).

• document.getElementById("MyID").innerHTML = "Ini kode HTML untuk tautannya"; — mencari tag dengan id="MyID" di kodenya dan menulis tautan kami sebagai gantinya. Agar dapat berfungsi, Anda harus menulis terlebih dahulu di tempat menampilkan tautan tersebut

Izinkan saya meringkas seperti apa tampilan kode html pada akhirnya:

// Fungsi untuk menentukan "mobilitas" fungsi browser MobileDetect() ( var UA = navigator.userAgent.toLowerCase(); return (/android|webos|iris|bolt|mobile|iphone|ipad|ipod|iemobile|blackberry |windows phone |opera mobi|opera mini/i .test(UA)) ? true: false; ) // Jika browser BUKAN seluler, tampilkan tautan if (!MobileDetect()) ( document.getElementById("AddFavViaSheens" ).innerHTML = "Tambahkan ke bookmark"; ) // Fungsi untuk menambahkan favorit ke bookmark | https://site?p=710 document.getElementById("AddFavViaSheens").onclick = function () ( var title = document.title, url = document.location, UA = navigator.userAgent.toLowerCase(), isFF = UA .indexOf("firefox") != -1, isMac = UA.indexOf("mac") != -1, isWebkit = UA.indexOf("webkit") != -1, isIE = UA.indexOf(". net") != -1; if ((isIE || isFF) && window.external) ( // IE, Firefox window.external.AddFavorite(url, title); return false; ) if (isMac || isWebkit) ( // Webkit (Chrome, Opera), Mac document.getElementById("AddFavViaSheens").innerHTML = "Tekan "" + (isMac ? "Command/Cmd" : "Ctrl") + " + D" untuk menandai halaman" ; kembali salah;

Metode ini relevan untuk tahun 2017. Ada kemungkinan bahwa seiring waktu, versi browser baru akan melakukan penyesuaiannya sendiri, dan skrip akan berhenti berfungsi. Jika Anda melihat kegagalan seperti itu, tulis di komentar, kami akan meninjau dan memperbarui kodenya.

Silakan tulis kode Htmlnya sehingga ketika Anda membuka situs tersebut, layar secara otomatis meminta Anda untuk menambahkan situs tersebut ke favorit atau bookmark browser Anda. Jika situs tersebut ditambahkan ke bookmark atau favorit browser Anda, tawaran tersebut tidak akan muncul.
Terima kasih sebelumnya. Konstantin

Anda dapat menulis konstruksi seperti itu, tetapi hasilnya akan menjadi konstruksi yang rumit.

1) Anda perlu memasukkan jendela popup. (Mesin pencari tidak menyukai halaman seperti itu, dan pengunjung juga tidak menyukainya.

2) Bagaimana cara mengotorisasi pengunjung, apakah dia mem-bookmark 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 berfungsi dan panggil jendela untuk menyimpan bookmark.
(Apa yang berfungsi di browser Mozilla atau Firefox tidak berfungsi di Opera atau IE, atau sebaliknya!)

4) Kode besar tambahan yang perlu dipasang pada halaman agar pengunjung dapat mem-bookmark Anda. (Waktu pemuatan halaman meningkat. Google sangat tidak menyukai halaman yang memuat waktu lama, mengecualikan situs seperti itu dari pencarian, Yandex tidak menyukai semua yang muncul: Popap Popover.)

KESIMPULAN: Ini tidak layak untuk ditampilkan 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 bookmarknya. Gunakan jendela pop-up untuk sesuatu yang lebih berguna, misalnya, membuat pengunjung berlangganan.

Saya menemukan kodenya secara online dan memodifikasinya agar berfungsi di semua browser populer.

Hanya kode html sederhana:

KODE:


Tambahkan ke bookmark browser.

fungsi tambahkanBookmark()
if (document.all) window.external.addFavorite("http://infopodsolnux.ru/", "Situs 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.

Tempelkan kode ini ke tempat Anda ingin menampilkan penawaran Anda. (Lebih baik di bagian atas situs.)

Saat diklik, pengunjung disuguhi jendela untuk menyimpan bookmark di browser.

Penjelajah Magang

Di situs web saya, saya melangkah lebih jauh dan membuat
sebuah blok kecil dengan penjelasan untuk pengunjung.

Berikut ini contohnya:

Berikut adalah kode html yang saya gunakan:

KODE: PILIH SEMUA

Dalam kode ini, seperti pada kode sebelumnya, kami mengubah tautan ke situs dan deskripsi Anda.

Persediaan:

Pada suatu waktu, tautan “Tambahkan situs ke favorit” populer di situs web; ketika Anda mengekliknya, alamat situs web ditambahkan ke bookmark browser Anda. Namun, mengapa demikian? Dari waktu ke waktu, tautan seperti itu masih dapat ditemukan di situs web. Masalahnya adalah skrip yang digunakan untuk tujuan ini tidak berfungsi di banyak browser, sehingga nilainya mendekati nol. HTML5 telah memperluas kemampuan atribut tag rel dan sekarang dengan bantuannya Anda dapat dengan mudah menambahkan situs dan halaman individual apa pun ke favorit Anda.

Cukup tambahkan rel="sidebar" ke tautan dan ketika Anda mengekliknya, panel khusus akan terbuka di browser untuk membuat bookmark baru. Meskipun nilai sidebar didukung oleh dua browser - Firefox dan Opera, sisanya mengabaikan atribut rel dan mengikuti 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: Menambah ke Favorit

HTML5 YAITU Cr Op Sa Fx

Tambahkan ke fungsi favorit addBookmark() ( if (document.all) window.external..ru"); )

Tambahkan ke Favorit

Seperti apa penggunaan rel="sidebar" pada akhirnya? Hasilnya tergantung browsernya. Firefox, misalnya, membuka jendela seperti itu (Gbr. 1).

Beras. 1. Tambahkan ke Favorit di Firefox

Dalam Opere tampilannya sedikit berbeda, tetapi maknanya serupa (Gbr. 2).

Beras. 2. Menambah favorit di browser Opera

Internet Explorer memiliki antarmuka paling ringkas (Gbr. 3).

Beras. 3. Menambah favorit di browser Internet Explorer

Meskipun penggunaan atribut rel tidak biasa karena dukungan browsernya yang buruk, atribut ini memiliki potensi yang sangat besar, dan jumlah nilainya secara bertahap bertambah. Jadi harus disertakan dalam link.

• rumah
• jendela
• Cara membuat tombol "tambahkan ke favorit". Tautan "Tambahkan ke Favorit" untuk semua browser Tambahkan ke Favorit q node