Səhifənin cross-brauzer nişanlanması. Bütün brauzerlər üçün sevimlilərə əlavə et Bütün brauzerlər üçün sevimlilərə skript əlavə et
Bir vaxtlar "Sevimlilərə sayt əlavə et" linki vebsaytlarda məşhur idi, ona tıkladığınız zaman veb-sayt ünvanı brauzerinizin əlfəcinlərinə əlavə olunurdu. Lakin, niyə belə oldu? Zaman zaman belə bir keçid hələ də veb saytlarda tapıla bilər. Problem ondadır ki, bu məqsədlə istifadə edilən skript bir çox brauzerlərdə işləmir, ona görə də onun dəyəri sıfıra yaxındır. HTML5 rel tag atributunun imkanlarını genişləndirdi və indi onun köməyi ilə asanlıqla istənilən saytları və fərdi səhifələri sevimlilərinizə əlavə edə bilərsiniz.
Sadəcə linkə rel="sidebar" əlavə edin və üzərinə kliklədiyiniz zaman brauzerdə yeni əlfəcin yaratmaq üçün xüsusi panel açılacaq. Yan panel dəyəri iki brauzer - Firefox və Opera tərəfindən dəstəklənsə də, qalanları rel atributuna məhəl qoymur və həmişəki kimi göstərilən linki izləyin.
Brauzerlərin sayını genişləndirmək və onlara IE əlavə etmək üçün kiçik bir skripti də linkə qoşa bilərsiniz. Nəticədə məlum olur ki, Firefox, Opera, Internet Explorer xüsusi panel çağıracaq, digər brauzerlər linki izləyəcək (nümunə 1).
Nümunə 1: Sevimlilərə əlavə etmək
HTML5 IE Cr Op Sa Fx
AddBookmark() funksiyasını sevimlilərə əlavə et ( əgər (document.all) window.external..ru"); )
Seçilmişlərə əlavə et
rel="sidebar"-dan istifadə sonda nə kimi görünür? Nəticə brauzerdən asılıdır. Firefox, məsələn, belə bir pəncərə açır (şəkil 1).
düyü. 1. Firefox-da sevimlilərə əlavə edin
Operədə görünüş bir qədər fərqlidir, lakin məna oxşardır (şək. 2).
düyü. 2. Opera brauzerində sevimlilərə əlavə etmək
Internet Explorer ən lakonik interfeysə malikdir (şək. 3).
düyü. 3. Internet Explorer brauzerində sevimlilərə əlavə etmək
rel atributunun istifadəsi zəif brauzer dəstəyinə görə qeyri-adi olsa da, o, böyük potensiala malikdir və dəyərlərin sayı getdikcə genişlənir. Buna görə də linklərə daxil edilməlidir.
Bir çox onlayn mağazada sevimlilərə əlavə etmək funksiyası kimi faydalı bir şey var, onun köməyi ilə məhsulu bölmədə asanlıqla tapa bilərsiniz. sevimlilərşəxsi hesabınız. Bu gün biz bu materialın ilk hissəsini istifadə edərək yaradacağıq HTML, CSS Və JQUERY, və növbəti materialda biz PHP və MYSQL-də sevimlilərə əlavə edəcəyik.
Əlavənin dizaynına gəldikdə, mən öz dizaynımı düzəltməyə qərar verdim ki, bu da prinsipcə digər saytlarda asanlıqla tapıla bilər. Necə deyərlər, prinsip məsələsidir, hər kəs özü seçə bilər) Dizayn nümunəsini demo versiyada və ya aşağıdakı şəkildə görə bilərsiniz.
İlk addım. HTML.
Beləliklə, ilk və ən sadə addıma keçək, bu yazıdır HTML kodu daxil edin və əvvəlcə bütün lazımi skriptləri və üslubları birləşdirin.
İndi biz, deyək ki, məhsulumuz üçün çərçivə yaradırıq, ona bir sinif təyin edirik məhsul, məhsulun özünün ümumi blokunu təşkil edəcək, sonra sevimlilərə əlavə etmək üçün bir düyməyə ehtiyacımız olacaq, əlfəcin kimi görünəcək, ona görə kliklədikdə içəridə gizlənməlidir və yenidən kliklədikdə, orijinal vəziyyətinə açılmalıdır. .
Bunun üçün siniflə blok yaradın sevimlilər, iki düyməni yerləşdirdiyimiz əlavə edin- sevimlilərə əlavə et və çıxarın- sevimlilərdən silin. Gördüyünüz kimi, hər şey çox sadədir, sizə sadəcə məhsulun istənilən şəklini əlavə etmək kifayətdir və sonra növbəti mərhələyə keçə bilərsiniz. JQUERY.
İkinci addım. JQUERY.
Sevimlilərə əlavə etmək və onlardan silməklə işləmək kliklə əlaqəli olduğundan, klik hadisəsi ilə başlamalıyıq. Sənədin daxilində dəyişən yaradın id, metoddan istifadə edərək ilkin vəziyyəti yazırıq hasClass.
Sonra dəyişənə istinad edərək şərt yaradırıq id və məhsul əlavə edib-etmədiyimizi yoxlayın, sonra sinif əlavə edin sadə metodundan istifadə etməklə əlavə sinif.
Və əksinə, bir məhsulu sevimlilərinizdən silmisinizsə, sinfi silin sadə metodundan istifadə etməklə sinifi çıxarın.
$(sənəd).on("klik", ".favorites", funksiya () ( var id = $(this).hasClass("sadə"); if (!id) ( $(this).addClass("sadə" "); ) else ( $(this).removeClass("sadə"); ) ));
Üçüncü addım. CSS.
Yaxşı, son addımı həyata keçirmək qalır, bunlar bizim üslublarımızdır, onsuz heç nə mütləq düzgün işləməyəcək. Çünki burada hər şey həm yerləşdirməyə, həm də düymə çevrilmələrinin formalaşmasına əsaslanır. Başlamaq üçün əsas blokumuza düzgün yerləşdirməni verəcəyik və onu simli blok halına gətirəcəyik.
Məhsul (mövqe: nisbi; ekran: inline-blok; )
İndi əlavə etmək və sevimlilərdən çıxarmaq düymələrinin yerinə keçək. Əsas xüsusiyyətlər arasında yerləşdirmə, yan mövqe, hündürlük, en və indeksi vurğulayırıq, onsuz düymələrimiz görünməyəcəkdir.
Nəzarət üçün mən seçdim xətdəşəkil, ona görə də onun yerləşdirilməsi ilə işləyəcəyik.
Sevimlilər ( mövqe: mütləq; yuxarı: 0; sağ: 0; en: 55px; hündürlük: 55px; z-indeksi: 1; ) .favoritlər .şəkil ( mövqe: mütləq; en: 55px; hündürlük: 55px; fon: url( "../img/favorites.png") təkrar yoxdur: göstərici; -webkit-backface-visibility: gizli; - 100% 100% təkrarlayın)
Nəhayət, biz sadə siniflə işləməliyik ki, bu da idarəetmə elementlərinin əlavə edilməsi və silinməsi, həmçinin transformasiya və arxa planın yerləşdirilməsi ilə məşğul olacaq.
Sevimlilər .əlavə ( fon mövqeyi: 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 : rotate3d(1,1,0,180deg); moz-transform: rotate3d(1,1,0,180deg); -ms-transform: rotate3d(1,1,0,180deg: rotate3d(1, 1,0,180deg): rotate3d(1,); 1,0,180 dərəcə); ,1,0,180deg); -moz-transform: rotate3d(1,1,0,180deg); -ms-transform: rotate3d(1,1,0,180deg: rotate3d(1,1,0,180deg); transform: rotate3d(1,1,0,180deg .favorites.simple .remove ( -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); ) .favoritlər .silindir:hover ( fon mövqeyi: -167px 0; )
Unutma! Bir daha təkrar edirəm ki, bütün xüsusiyyətlər tələb olunur, çünki onlar bu xüsusi element idarəetmə növü üçün nəzərdə tutulub. Düzünü desəm, köhnə brauzerlərdə bu şey çox yaxşı görünmür, məsələn, IE8, çünki bu, əsasən transformasiyaya aiddir, amma qalanlarına gəlincə, qərarın özünü tam doğrultduğunu düşünürəm.
Saytlarını bütün brauzerlərin istifadəçiləri üçün eyni dərəcədə rahat etməyə çalışan və əvvəllər olduğu kimi onları yalnız Internet Explorer üçün uyğunlaşdırmayan veb ustalarının sayı hər gün artır. Yəqin ki, ən çox alternativ brauzerlərin istifadəçiləri hər saytda tapılan, lakin yalnız Internet Explorer-də işləyən "Sevimlilərə əlavə et" bağlantısını bəyənmirlər. İndi sizə bu funksiyanı bütün ümumi brauzerlərdə işləməsi üçün veb saytınızda necə düzgün tətbiq edəcəyinizi söyləyəcəyəm.
İstifadəçi Sevimlilərə təkcə saytı (əsas səhifəni) deyil, həm də onun yerləşdiyi səhifəni əlavə etməli ola bildiyi üçün biz hər iki variantı ətraflı nəzərdən keçirəcəyik və hansından istifadə edəcəyinə özünüz qərar verəcəksiniz.
Saytın əsas səhifəsini Sevimlilərə əlavə edinGəlin əvvəlcə Internet Explorer üçün "Sevimlilərə əlavə et" linkinin digər brauzerlərdəki analoqundan necə fərqləndiyinə baxaq və sonra onları birinə birləşdirəcəyik. IE iki dəyər qəbul edən window.external.AddFavorite() funksiyasından istifadə edir: əlfəcin qoyulacaq səhifənin ünvanı və onun adı:
Saytı Sevimlilərə əlavə edinMəncə burada nəyisə izah etməyə ehtiyac yoxdur. Ancaq növbəti nümunəyə daha ətraflı baxacağıq. Opera, Firefox və Netscape üçün Sevimlilərə əlavə ediləcək kod aşağıdakı kimidir:
Saytı Sevimlilərə əlavə edinGördüyünüz kimi, bu, rel="sidebar" əlavə parametri olan adi bir keçiddir ki, bu da sadəcə olaraq brauzerə linki kliklədiyiniz zaman saytı işarələmək lazım olduğunu göstərir. Bundan əlavə, başlıq = "" parametrində saytın əlfəcinlərə hansı adla əlavə ediləcəyini göstərməlisiniz. Amma əlavə edilən səhifənin ünvanı href="" ilə yazılıb. Adətən saytın ana səhifəsi və onun adı göstərilir.
Linkə kliklədiyiniz zaman görünən pəncərə
İndi biz "Sevimlilərə əlavə et" linkini bütün brauzerlərdə eyni dərəcədə yaxşı işlətməliyik. IE kodu yalnız onda işlədiyindən və rel="sidebar" parametri yalnız Opera, Firefox və Netscape tərəfindən dəstəkləndiyi üçün hər iki variantı sadəcə bir keçiddə birləşdirməyə heç nə mane olmur:
Saytı Sevimlilərə əlavə edinGəlin daha mürəkkəb bir problemi həll edək və saytın ünvanını və adını əl ilə daxil etmək əvəzinə, ziyarətçinin hazırda hansı səhifədə olduğunu avtomatik müəyyən edəcəyik və ona müvafiq ünvan və adla cari səhifəni Sevimlilərə əlavə etmək imkanı verəcəyik.
Cari səhifəni Sevimlilərə əlavə edinBeləliklə, yenidən Internet Explorer ilə başlayaq:
Göründüyü kimi, kodda window.external.AddFavorite() funksiyasının daxil olan parametrlərindən başqa heç nə dəyişməyib. JavaScript parametri document.title, brauzer tərəfindən Səhifə Başlığı teqləri arasında yerləşən, qeyd etdiyimiz sənəd başlığından götürülən səhifənin başlığını ehtiva edir. Brauzer cari səhifənin ünvanını ünvan çubuğundan alır və onu location.href parametrinə təyin edir. Beləliklə, hər səhifədə bizə lazım olan parametrləri əl ilə dəyişməyə ehtiyac yoxdur.
Internet Explorer-də yeni əlfəcin
Opera, Firefox və Netscape brauzerləri ilə işlər bir az daha mürəkkəbdir. Biz kiçik bir JavaScript funksiyası yazmalı olacağıq ki, o da Internet Explorer-də artıq bildiyimiz funksiya ilə eyni şəkildə işləyəcək. Biz onu linkin içərisinə yerləşdirəcəyik ki, o, sadəcə bir sətir olsun, amma oxumağı asanlaşdırmaq üçün onu bir az formatlamışam:
Cari səhifəni Sevimlilərə əlavə edinƏn əvvəlində biz url və başlıq dəyişənlərinə JavaScript parametrlərinin dəyərlərini təyin etdik window.document.location (səhifə ünvanı) və window.document.title (səhifə başlığı). Sonra bookmark() funksiyasını yaradırıq. Onun köməyi ilə dəyəri səhifənin ünvanı və başlığı olan bir neçə dəyişəndən keçid yaradırıq. Həmçinin bookmark() funksiyasından istifadə etməklə yaradılacaq rel="sidebar" parametrini də unutmayın.
İndi biz sadəcə olaraq Internet Explorer və digər brauzerlər üçün kodu birləşdirməliyik ki, bir cross-brauzer keçidi əldə edək:
Cari səhifəni Sevimlilərə əlavə edinArtıq əsas brauzerlərə uyğun bir xüsusiyyətimiz var. İndi biz bunu birtəhər istifadəçilərlə birləşdirməliyik.
Stereotipləri qırmaqAlternativ brauzerlərin bir çox istifadəçisi artıq "Sevimlilərə əlavə et" linkinin yalnız Internet Explorer-də işlədiyinə və buna əhəmiyyət vermədiyinə öyrəşdiyindən, ziyarətçiyə birtəhər maneəsiz şəkildə göstərməliyik ki, biz onun funksionallığı ilə maraqlanırıq. bu linki onun brauzerində. Düşünürəm ki, ən uğurlu variant saytımızın ziyarətçisinin hansı brauzerdən istifadə etdiyini müəyyənləşdirmək və linkin yanında müvafiq loqonu göstərmək olardı. Və ya sadəcə olaraq bütün loqoları bir anda göstərə bilərsiniz:
Son nəticə belə görünür
Məqalənin surətinin çıxarılması qadağandır.
Lütfən, Html kodunu yazın ki, saytı açdığınız zaman saytı sevimlilərinizə və ya brauzer əlfəcinlərinizə əlavə etmək təklifi avtomatik olaraq ekranda görünsün. Əgər sayt brauzerinizin əlfəcinlərinə və ya sevimlilərinə əlavə edilibsə, təklif görünməməlidir.
Əvvəlcədən təşəkkürlər. Konstantin
Belə bir tikinti yaza bilərsiniz, ancaq mürəkkəb bir tikinti olacaq.
1) Siz popup pəncərə daxil etməlisiniz. (Axtarış motorları belə səhifələri bəyənmir və ziyarətçilər də onları bəyənmirlər.
2) Ziyarətçiyə əlfəcin qoymasından asılı olmayaraq necə icazə vermək olar? Bunu etmək üçün bu brauzer üçün kukilər qurmalısınız.
(Zamanla istifadəçi kompüteri təmizləyəcək və bütün kukiləri siləcək; məsələn, mən bunu 2 həftədə bir dəfə edirəm.)
3) İşləyəcək kodu yazın və ya istifadə edin və əlfəcin saxlamaq üçün pəncərəyə zəng edin.
(Mozilla və ya Firefox brauzerində işləyənlər Opera və ya IE-də işləmir və ya əksinə!)
4) Ziyarətçinin sizi əlfəcin qoyması üçün səhifədə quraşdırılmalı olan əlavə böyük kod. (Səhifə yükləmə müddəti artır. Google həqiqətən yüklənməsi çox vaxt aparan səhifələri sevmir, bu cür saytları axtarışdan çıxarır, Yandex açılan hər şeyi bəyənmir: Popap Popover.)
NƏTİCƏ: Bunu sayta yerləşdirməyə dəyməz. Əlfəcinlərə əlavə etmək üçün saytda kiçik bir kod quraşdırmaq daha yaxşıdır və ziyarətçini əlfəcinlərində saytınıza ehtiyacı olub olmadığını özü seçməyə dəvət edin. Pop-up pəncərələri ziyarətçiyə abunə olmaq kimi daha faydalı bir şey üçün istifadə edilə bilər.
Kodu onlayn tapdım və onu bütün məşhur brauzerlərdə işləmək üçün dəyişdirdim.
Sadə bir html kodu:
KOD:
Brauzer əlfəcinlərinə əlavə edin.
funksiya addBookmark()
əgər (document.all) window.external.addFavorite("http://infopodsolnux.ru/", "Site infopodsolnux.ru");
Seçilmişlərə əlavə et
Bu koddan istifadə edərək saytınızda yalnız mətn linki əldə edirsiniz: Sevimlilərə əlavə edin
Burada bu kodda saytınıza keçidlər əlavə etməli və etiketdə saytınızın təsvirini dəyişdirməlisiniz.
Bu kodu təklifinizi göstərmək istədiyiniz yerə yapışdırın. (Saytın yuxarı hissəsində daha yaxşı olar.)
Kliklədikdə, ziyarətçiyə əlfəcinləri brauzerdə saxlamaq üçün bir pəncərə təqdim olunur.
Daxili Explorer
Veb saytımda bir az irəli getdim və yaratdım
ziyarətçi üçün izahı olan kiçik bir blok.
Budur nümunələr:
İstifadə etdiyim html kodu budur:
KOD: HAMISINI SEÇİN
funksiya addBookmark() əgər (document.all) window.external.addFavorite("http://infopodsolnux.ru/", "Sayt http://infopodsolnux.ru");
Əgər bəyəndinizsə
|
eni="139">
Əvvəlki kodda olduğu kimi bu kodda da saytınıza keçidləri və təsvirləri dəyişdiririk.
Stokda:
