Добавяне към любими за всички браузъри. Добавяне към любими отметки за всички браузъри

Много онлайн магазини имат такова полезно нещо като функцията за добавяне към любими, с която лесно можете да намерите продукта в секцията любиминеговият лична сметка. Днес ще създадем първата част този материалкато се използва HTML, cssИ JQUERY, а в следващата статия ще добавим към любими в PHP и MYSQL.

Що се отнася до дизайна на добавката, реших да направя собствен дизайн, който по принцип лесно може да се намери подобен в други сайтове. Това, както се казва, е въпрос на принцип, всеки може да избере свой собствен) Можете да видите пример за дизайн в демо версията или на фигурата по-долу.

Първа стъпка. HTML.

И така, нека да преминем към първото и най-важното проста стъпка, това е правописа HTMLкод и първо свържете всички необходими скриптове и стилове.

Сега създаваме рамка за нашия, да кажем, продукт, предписваме клас за него продукт, който ще формира общия блок на самия продукт, тогава имаме нужда от бутон за добавяне към любими, той ще изглежда като отметка, така че при натискане трябва да се скрие вътре, при повторно натискане да се отвори в първоначалното си състояние.

За да направим това, създаваме блок с класа любими, в който поставяме два бутона добавете- добавяне към любими и Премахване- премахване от любими. Както можете да видите, всичко е много просто, остава само да добавите произволна снимка с продукта и след това можете да продължите към следващата стъпка JQUERY.

Втора стъпка. JQUERY.

Тъй като работата с добавяне и премахване от любими е свързана с кликване, трябва да започнем със събитие кликване. Създайте променлива в документа документ за самоличност, в който записваме първоначалното състояние с помощта на метода hasClass.

След това създаваме условие, при което, позовавайки се на променливата документ за самоличности проверете дали сме добавили продукт, след което добавете клас простоизползвайки метода addClass.

И обратното, ако продуктът е премахнат от любимите, тогава изтриваме класа простоизползвайки метода removeClass.

$(document).on("click", ".favorites", function () ( var id = $(this).hasClass("simple"); if (!id) ( $(this).addClass("simple "); ) else ( $(this).removeClass("прост"); ) ));

Трета стъпка. CSS.

Е, остава да реализираме последната стъпка, това са нашите стилове, без които със сигурност нищо няма да работи както трябва. Защото тук всичко е изградено, както върху позиционирането, така и върху оформянето на трансформацията на бутоните. Първо, ще дадем правилното позициониране на основния ни блок и ще го направим вграден.

Продукт ( позиция: относителна; дисплей: inline-block; )

Сега нека да разгледаме местоположението на бутоните за добавяне и премахване от любими. От основните свойства ще подчертаем позициониране, странична позиция, височина, ширина и индекс, без които нашите бутони няма да се виждат.

Като контроли избрах в редицакартина, така че ще работим с нейното позициониране.

Любими (позиция: абсолютна; горе: 0; дясно: 0; ширина: 55px; височина: 55px; z-индекс: 1; ) .favorites .image ( позиция: абсолютна; ширина: 55px; височина: 55px; фон: url( "../img/favorites.png") без повторение; курсор: показалец; -webkit-backface-visibility: скрит; -moz-backface-visibility: скрит; backface-visibility: скрит; ) .favorites.simple ( фон : url("../img/favorites.png") без повторение 100% 100%; )

И накрая, трябва да работим с простия клас, който ще се справи с добавянето и премахването на контроли, както и с трансформацията и позиционирането на фона.

Любими .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-трансформация: rotate3d(1,1,0,0deg); трансформация: rotate3d(1,1,0,0deg); ) .favorites.simple .add ( -webkit-transform : rotate3d(1,1,0,180deg); -moz-трансформация: rotate3d(1,1,0,180deg); -ms-трансформация: rotate3d(1,1,0,180deg); -o-трансформация: rotate3d(1, 1,0,180deg); трансформация: 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-трансформация: rotate3d(1,1,0,180deg); трансформация: rotate3d(1,1,0,180deg); ) ; -moz-трансформация: rotate3d(1,1,0,0deg); -ms-трансформация: rotate3d(1,1,0,0deg); -o-трансформация: rotate3d(1,1,0,0deg); трансформация: rotate3d(1,1,0,0deg); ) .favorites .remove:hover ( background-position: -167px 0; )

Не забравяй! Още веднъж повтарям, че всички имоти са задължителни, тъй като са предназначени чисто този виделементи контроли. Честно казано, в по-старите браузъри това нещо не изглежда много добре, ако вземете например IE8, тъй като касае предимно трансформация, но какво друго, мисля, че решението се оправда напълно.

Тази статия ще говори за различни начинидобавяне на папки, файлове и програми към списъка с предпочитани файлов мениджъроперационна система Windows - Explorer.

В операционната Windows система, в Explorer има списък с любими. Към този списък операционна системаПо подразбиране връзките се добавят към определени папки (например „Desktop“), както и към папките на някои програми, след като бъдат инсталирани (например папки с облачни файлове). Google хранилища Drive, OneDrive, Yandex.Disk и други).

Можете лесно да добавяте други нови папки към списъка с предпочитани или да премахвате папки там от списъка с предпочитани.

Първо, нека разгледаме добавянето на връзки към папки към списъка с предпочитани, както и премахването им от този списък.

Премахване на папка от Предпочитани

За да премахнете папка от списъка "Любими", просто трябва да преместите курсора на мишката до желаната папка и да щракнете с десния бутон на мишката. IN контекстно менютрябва да изберете елемента "Изтриване" и след това папката ще бъде премахната от този списък.

Добавяне на папка към любими

За да добавите нова папка към Предпочитани, първо трябва да отворите File Explorer. След това ще трябва да изберете желаната папка и просто да я плъзнете, докато държите натиснат бутона на мишката, в прозореца на Explorer до списъка с предпочитани. В същото време надписът „Създаване на връзка към любими“ ще се вижда близо до изтеглената папка.

Можете да добавите папка по друг начин. За да направите това, отворете Explorer и след това в прозореца на Explorer отворете папката, която искате да добавите към списъка с предпочитани. В това изображение е избрана папката "CD-DVD".

След това в Favorites се появява нова папка, в показания пример папката CD-DVD.

Възстановяване на изтрити папки в любими

След като изтриете връзките към папките по подразбиране, можете да ги възстановите. За да направите това, щракнете с десния бутон върху Предпочитани и след това изберете Възстановяване на любими връзки от контекстното меню.

Изтритите връзки към папки, които са били зададени на „Любими“ по подразбиране, ще бъдат възстановени. Това действие няма да засегне преди това добавени папки към Предпочитани, връзките към тези папки ще останат в списъка Предпочитани.

Добавяне на програми към Предпочитани

Използвайки описаните по-горе методи, не можете да добавяте програмни преки пътища към Предпочитани. Когато се опитате да преместите пряк път на програма към Предпочитани, се появява записът „Неуспешно поставяне в Предпочитани“.

Това препятствие може да бъде заобиколено чрез отваряне на папката "Връзки", която съдържа съдържанието на списъка "Любими".

Ако програмата, която искате да добавите към Предпочитани, няма пряк път, тогава трябва да създадете пряк път за тази програма и да го изпратите на работния плот.

Пряк път за програма се създава по този начин - менюто "Старт" => Всички програми => Изберете програмата и щракнете с десния бутон върху нея => изберете "Създаване на пряк път" в контекстното меню => "Не можете да създадете пряк път в това папка. Да го поставя на работния плот? => "Да". Сега прекият път на избраната програма се поставя в папката Desktop.

След като папката с прекия път на програмата е отворена в Explorer или прекият път на избраната програма е на работния плот, трябва да отворите менюто Старт и в най-десния горен ъгълотворете вашата лична папка (името на вашата потребителска папка). Съдържанието на списъка Предпочитани се намира в папката Връзки.

Отворете File Explorer и след това плъзнете прекия път на програмата към папката Links от папката, съдържаща прекия път за избраната програма. Ако прекият път на избраната програма е на работния плот, просто плъзнете този пряк път в папката "Връзки" с мишката.

В изображението плъзнах етикета Skype програмикъм папката Връзки и веднага след това прекият път на Skype се появи в списъка с любими. В списъка с предпочитани програмните преки пътища се появяват без стрелка.

Добавяне на файлове към любими

По същия начин можете да добавите към списъка "Любими". отделни файлове. Първо трябва да изберете файл, който ще бъде поставен в списъка "Любими".

Например избрах " word документ” с наименование „Въпроси”. Ще трябва да щракнете с десния бутон върху избрания файл и да изберете "Създаване на пряк път" от контекстното меню.

Преди да преместите пряк път към файл, можете да премахнете края - "Пряк път" от прекия път към файла, така че името на прекия път да не се различава от името на файла. Така че само външно този етикет ще изглежда по-красив.

За да направите това, щракнете с десния бутон върху прекия път и в контекстното меню изберете „Преименуване“ и след това премахнете ненужни думиот името на прекия път на файла.

След тези стъпки трябва да отворите папка "Връзки", за целта трябва да следвате този път - меню "Старт" => "Отваряне на лична папка" => "Връзки".

Сега плъзнете прекия път към файла от папката, в която се намира в момента отворена папка„Връзки“. Веднага след това прекият път към файла "Въпроси" се появява в списъка "Любими".

За да премахнете добавени програми и файлове от списъка с предпочитани, преместете курсора на мишката върху избрания файл и изберете елемента Премахване в контекстното меню.

Заключения на статията

Ако е необходимо, потребителят може да добавя файлове и папки към списъка "Любими". Windows Explorer. Ако програмата или файлът не са необходими в любимите, можете да ги изтриете от там.

Маркирането на страници в различни браузъри се реализира с помощта на JavaScript. За да добавите страница към любимите на браузъра Internet Explorerи браузъри, работещи на IE двигателя, се нарича стандартен методДобавяне на любими. Тук обаче има една важна подробност. Ако страницата на IE е отворена като вграден обект в друго приложение, например в добавки или когато използвате компоненти за работа с html, тогава обектът window.external присъства, но неговият метод AddFavorite не работи. Това е най-честата грешка, допускана от разработчиците, които просто копират кода на другия, без да го разбират и тестват. Също така е голяма грешка да използвате само един от тези методи на вашия сайт.

Браузърите, базирани на двигателя Gecko, като Firefox, Netscape, K-Meleon и други, имат обект window.sidebar и метод за добавяне на addPanel. Третият параметър на метода е недокументиран и не е задължителен, така че в скрипта просто се заменя с празен низ. Моля, имайте предвид, че по подразбиране връзката се добавя не точно към отметките, а към страничната лента на браузъра. За да добавите страница към желаната папка с отметки, изберете я от падащото меню.

За Браузър Operaвръзката към отметка трябва да има rel атрибут= "странична лента" . Но ако този атрибут е незабавно зададен по подразбиране, тогава някои браузъри като Netscape ще изработят функцията за маркиране два пъти: първия път чрез скрипта и втория път чрез атрибута rel. Следователно ще трябва да промените динамично атрибутите на връзката, като предварително сте определили браузъра, като проверите типа на обекта opera.

Ако нито един от горните методи не работи, тогава няма нужда да издавате съобщение за грешка или, дори по-лошо, тихо да прекратите изпълнението на скрипта. Би било много по-правилно да се покаже на потребителя достъпна опциярешаване на проблем, например, предложи ръчно натискане на клавишната комбинация Ctrl + D .

Сега, когато разполагаме с всички първоначални данни, можем да напишем скрипт за различни браузъри, за да маркираме страницата. Получих този:

// Добавяне към любими функция add_favorite(a) ( title=document. title; url=document. location; try ( // Internet Explorer window.external.AddFavorite(url, title); ) catch (e) ( try ( // Mozilla window.sidebar.addPanel(title, url, ""); ) catch (e) ( // Opera if (typeof(opera)=="object") ( a.rel="sidebar"; a.title=title ; a.url=url; return true; ) else ( // Unknown alert("Натиснете Ctrl-D, за да маркирате тази страница"); ) ) ) return false; )

Добави към любими

Можете да видите работещ пример за внедряване точно на тази страница. Използването на конструкции try-catch позволява на скрипта да работи правилно във всякакви нестандартни ситуации, например в прозорец на IE Tab, отворен в Браузър Firefox. Скриптът също работи правилно в различни екзотични браузъри, които не могат да бъдат идентифицирани еднозначно чрез UserAgent или DOM свойства. Всякакви прехвалени търговски занаяти като DLE в тази ситуация мълчаливо прекъсват.

Здравейте. Нека да поговорим за това как да направите връзка или бутон за добавяне към любими (отметки) за всички браузъри: Chrome, Firefox, Opera, Internet Explorer, Safari - кросбраузър, така че когато потребител кликне върху него, да може да отложи и запомни страницата си. Естествено, уверете се, че съдържанието е интересно, иначе никой няма да го маркира :)
Така че да тръгваме.

Какво да добавите към HTML Добавяне към отметки

Въведете кода на всяко място, от което се нуждаете. Всички настройки, с изключение на изброените по-долу, могат да бъдат променени или изтрити.

• id="любим"
  Тук ще бъдат написани инструкции за Chrome, Opera и всички браузъри, базирани на двигателя Webkit
• rel="странична лента"
  Атрибутът е задължителен, необходим за Firefox, така че ще определи, че страницата от връзката трябва да бъде изпратена до любими
• href=""
  Също така е препоръчително да го оставите непроменен. Firefox ще вземе връзката към отметката на този адрес

  Ако беше по моя воля, бих заменил a с span , но тази опция няма да работи под Firefox

• onclick="addFav()"
  Това е мястото, където ще бъде дефиниран javascript скриптът. Повече за него

Неща за добавяне към JavaScript // Функция за отбелязване на любими | https://website?p=710 функция addFav() ( 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; ако ( (isIE || isFF) && window.external) ( // IE, Firefox window.external.AddFavorite(url, title); return false; ) if (isMac || isWebkit) ( // Webkit (Chrome, Opera), Mac document.getElementById("AddFavViaSheens").innerHTML = "Натиснете "" + (isMac ? "Command/Cmd" : "Ctrl") + " + D", за да маркирате тази страница"; return false; ) )

Или занесете кода на външен файлили го поставете на всяко място на страницата, което харесвате, например в раздел или преди затварящия маркер
Кодът е коментиран, мисля, че няма нищо сложно. Ако имате някакви въпроси - попитайте в коментарите.

Как да избегнете показването на връзка към любими на таблети и мобилни браузъри

Разбира се, няма смисъл да показвате връзка за добавяне към любими на мобилни устройства, тя няма да работи там. Следователно трябва да ги филтрирате.
За да направите това, можете например да генерирате връзка с помощта на javascript и той вече филтрира всичко както трябва

// Функция за откриване на функцията за „мобилност“ на браузъра 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 ; ) // Ако браузърът НЕ е мобилен, покажете връзката if (!MobileDetect())( document.getElementById("MyID").innerHTML = "Тук HTML код на връзка (вижте по-горе)"; )

Нека го разбием малко

• varUA = navigator.userAgent.toLowerCase(); - записва заглавките на браузъра в променливата, преобразувайки ги в малки букви. По съдържанието му ще определим "мобилността" на браузъра.
• return (/Регулярен израз/.test(UA) ? true: false) е филтър. Регулярният израз съдържа фрагменти, които могат да бъдат в заглавки мобилни браузъри. Можете да добавите свои собствени стойности, като ги разделите с | .

  Филтърът е чувствителен към главни и малки букви. Ето защо, ако въведете свои собствени стойности във филтъра, не забравяйте да ги запишете малки букви(с малки букви).

• document.getElementById("MyID").innerHTML = "Ето HTML кода за връзката"; — търси таг с id="MyID" в кода и вместо това пише нашата връзка. За да работи, първо трябва да запишете на мястото, където да се показва връзката

Пример за готов скрипт и страница

Нека обобщя как изглежда html код

// Функция за откриване на функцията за „мобилност“ на браузъра 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; ) // Ако браузърът НЕ е мобилен, покажете връзката if (!MobileDetect()) (document.getElementById("AddFavViaSheens").innerHTML = "Добавяне на отметка"; ) // Функция за добавяне на любими към отметки | 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 = "Натиснете "" + (isMac ? "Command/Cmd" : "Ctrl") + " + D", за да маркирате тази страница" ; върне невярно;))

Този метод е валиден за 2017 г. Възможно е с течение на времето новите версии на браузърите да направят свои собствени корекции и скриптът да спре да работи. Ако забележите такива повреди, пишете в коментарите, ние ще прегледаме и актуализираме кода.

Много уеб администратори са погребали този вид привличане на редовни читатели на блогове като директни потребителски преходи от отметки. Става въпрос за добавяне на страница към отметки - целесъобразността на тази функция в сайта, за която сега ще говорим.

Това отчасти се дължи на факта, че водещите SEO блогове (където са насочени всички погледи на начинаещи и не толкова начинаещи уебмастъри) са фокусирани върху възрастовата си аудитория, която в по-голямата си част използва RSS четци или дори Twitter. Сега наистина е много рядко къде можете да намерите бутон - „добавяне на страница към отметки“. Но напразно! Някои теми включват повече възрастова група, който с голяма трудност усвоява „иновации“ като twitter и дори RSS четци, които отдавна се използват.

За такива хора маркерът е много по-ясен - Любими, където всички сайтове са сортирани в любимия им браузър.

Разбира се, никой не забранява на тези фенове на отметките да натиснат заветната комбинация от клавиши Ctrl + D и по този начин да добавят заветната отметка, но за толкова много хора ужасните комбинации от клавиатури, дори и да се състоят само от 2 клавиша, са като тамян за дявол .

Разбира се, това са предимно представители на по-старото поколение, консерватори, но не бива да забравяме и тях, особено когато тематиката на сайта е насочена към тази възрастова група хора.

И така, задачата е да поставите на сайта бутон за кръстосани браузъри „Добавяне към отметки“ или „Добавяне към любими“ - както искате. Основното, повтарям, е съвместимостта между браузъри, т.е. функционалност на този бутон във водещи браузъри - Google Chrome, Mozilla Firefox, Opera, Internet Explorer.

Бихте ли казали, че е лесна задача? Съвсем не - всички проблеми се крият в универсалността на кода, в неговата съвместимост между различни браузъри. Един код е подходящ само за Internet Explorer и не работи за други браузъри.

Ето един пример, който се среща най-често в интернет.

Добави към любими

Или ето вариант на прост, но безполезен java скрипт:

Добавете тази страница към любимите си

Тези кодове работят само с интернет браузърИзследовател! За да бъде скриптът за отметки наистина междубраузърен, той трябва да има вградена проверка на браузъра на клиента и, в зависимост от браузъра, да използва подходящия код за отметки.

Този скрипт работи с браузърите Firefox, Opera, но Google Chrome не го разбира и показва предложение да натиснете Ctrl + D, като по този начин добавите страницата към отметките.

Но това е най-доброто, което успях да изровя в интернет (инсталирането на антени не се брои!).

Скрипт между браузъри:

< script type="text/javascript">
функция getBrowserInfo() (
var t,v= недефиниран;

if (window.chrome) t = "Chrome";
else if (window.opera) t = "Opera";
иначе ако (document.all)(
t = "IE";
varnv = navigator.appVersion;
var s = nv.indexOf("MSIE")+5;
v = nv.substring(s,s+1);
}
else if (navigator.appName) t = "Netscape";

връщане (тип: t, версия: v);
}

функция отметка(а)(
var url = window.document.location;
var title = window.document.title;
varb = getBrowserInfo();

if (b.type == "IE" && 8 >= b.version && b.version >= 4) window.external.AddFavorite(url,title);
else if (b.type == "Opera") (
a.href = url;
a.rel = "странична лента";
a.title = url+","+title;
връща вярно;
}
else if (b.type == "Netscape") window.sidebar.addPanel(title,url,"");
else alert("Натиснете CTRL-D, за да маркирате тази страница.");
връща невярно;
}
< /script>

Добави към любими< /a >

За да използвате този скрипт на вашия сайт, трябва да добавите горната част, която е между таговете< script type="text/javascript" >и в заглавията (заглавието) на вашата тема.

Ако имате решение - как да добавите функцията за отметки за браузъра Chrome към скрипта, моля, отговорете в коментарите!