Як зробити кнопку "додати у вибране". Посилання "додати у вибране" для всіх браузерів Додати до вибраного q node

У багатьох інтернет-магазинах є така корисна річ, як функція додати до обраного , за допомогою якої товар можна без проблем знайти в розділі обранесвого особистого кабінету. Ось сьогодні ми і створимо першу частину цього матеріалу за допомогою HTML, CSSі JQUERY, а в наступному матеріалі вже зробимо додавання у вибране на PHP та MYSQL.

З приводу дизайну додавання, я вирішив зробити своє оформлення, яке в принципі, легко можна буде знайти подібне і на інших сайтах. Це, як кажуть, справа принципу, кожному вибирати своє) Приклад, оформлення Ви можете подивитися в демо версії або на малюнку нижче.

Перший крок. HTML.

І так, переходимо до першого і найпростішого кроку, це написання HTMLкоду і спочатку підключаємо всі необхідні скрипти та стилі.

Тепер створюємо каркас для нашого, скажімо так, товару, прописуємо йому клас product, який буде формувати сам загальний блок товару, далі нам знадобиться кнопка для додавання в обране, виглядатиме вона як закладка, тому при натисканні вона повинна ховатися усередину, при повторному натисканні розкриватися в початковий стан.

Для цього створюємо блок із класом favorites, в який розміщуємо дві кнопки add- додати до обраного та remove- Видалити з обраного. Як бачимо, все дуже просто, залишається лише додати будь-яку картинку з товаром і на цьому можна переходити до наступного кроку JQUERY.

Другий крок. JQUERY.

Так як робота з додаванням та видаленням з обраного пов'язана з кліком, тому нам потрібно почати з події по кліку. Усередині документа створюємо змінну id, в яку записуємо початковий стан за допомогою методу hasClass.

Після чого створюємо умову, в якій звертаючись до змінної idта перевіряємо, якщо ми додали товар, то додаємо клас simpleза допомогою методу addClass.

І навпаки, якщо прибрали товар із обраного, то видаляємо клас simpleза допомогою методу removeClass.

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

Третій крок. CSS.

Ну і залишилося реалізувати останній крок, це наші стилі, без яких нічого працювати належним чином точно вже не буде. Тому що тут все будується як на позиціонуванні, так і формуванні трансформації кнопок. Для початку ми дамо нашому основному блоку правильне позиціонування та зробимо його рядковим.

Product ( position: relative; display: inline-block; )

Тепер займемося розташуванням кнопок додати та видалити з обраного. З основних властивостей виділимо позиціонування, положення сторін, висоту, ширину та індекс, без якого наші кнопки не будуть видно.

Як елементи управління, я вибрав inlineкартинку, тому працюватимемо з її позиціонуванням.

Favorites ( position: absolute; top: 0; right: 0; width: 55px; height: 55px; z-index: 1; ) .favorites .image ( position: absolute; width: 55px; height: 55px; background: url( "../img/favorites.png") no-repeat; cursor: pointer; -webkit-backface-visibility: hidden; : url("../img/favorites.png") no-repeat 100% 100%; )

Насамкінець, нам потрібно попрацювати з класом simple, який здійснюватиме додавання та видалення елементів управління, а також з трансформації та фоновим позиціонуванням.

Favorites .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); : rotate3d(1,1,0,180deg);-moz-transform: rotate3d(1,1,0,180deg); 1,0,180deg), transform: rotate3d(1,1,0,180deg); ) : -111px 0;-webkit-transform: rotate3d(1,1,0,180deg);-moz-transform: rotate3d(1,1,0,180deg); -o-transform: rotate3d(1,1,0,180deg); transform: rotate3d(1,1,0,180deg); ) .favorites.simple. -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,0deg); ) .favorites .remove:hover ( background-position: -167px 0; )

Не забувайте! Вкотре повторюся, що це властивості обов'язкові, оскільки розраховані суто даний вид управління елементами. Чесно сказати, на старих браузерах, виглядає ця справа не дуже, якщо, наприклад, брати IE8, Так як в основному стосується трансформації, але що решта, думаю рішення цілком себе виправдало.

З сьогодні я вам розповім про одну корисну функцію на сайті - це посилання, ну або кнопка «Додати в закладки (обране)». Ця функція дозволяє користувачам додати сторінку вашого сайту в закладки браузера, щоб в потрібний момент швидко і легко отримати доступ до неї.

Багато хто з вас скаже: - «Навіщо дублювати функцію браузера, адже ця кнопка є в адресному рядку?».

Так, але вона там, по-перше, не дуже помітна, по-друге, деякі користувачі взагалі не знають про неї.

Для поліпшення UI (користувач інтерфейсу), краще продублювати цю функцію і розмістити посилання/кнопку «Додати до закладок (вибране)» на видному місці. Наприклад, якщо у вас інтернет-магазин, то її краще вставити на картку товару, якщо у вас блог, то під чи над статтею. Розташування однаково потрібно тестувати. А також її можна розмістити в шапці сайту на всіх сторінках.

В інтернеті представлено багато різних способів реалізувати цю функцію, але більшість з них працюють не у всіх браузерах, то не працює у старих, то нових, то в IE, то ще десь.

Тому довелося самому вибрати серед них найкращий і трохи дописати його. І сьогодні я поділюся цим способом з вами та надам покрокову інструкцію щодо встановлення посилання/кнопки «Додати до закладок (обраних)» на ваш сайт.

Для того щоб зробити кнопку «додати до закладок» для сайту нам потрібно виконати 3 простих кроки:

Якщо у вас на сайті є javascript – файл, що підключається на всіх сторінках сайту, то використовуйте його та переходьте до наступного кроку. Якщо у вас немає такого файлу, потрібно створити його. Для цього створимо папку з назвою "js" у кореневій папці сайту, а в ній вже файл і назвемо його "functions.js".

< !DOCTYPE html>Заголовок магазину > Контент сторінки

Нижче наведено JavaScript-код, який потрібно вставити у вибраний/створений вами файл та зберегти його:

Function addFavorite(a) ( var title = document.title; var 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" || window.sidebar) ( a.rel="sidebar"; a.title =title; a.url = url; a.href = url; return true;

Тепер нам залишилося вибрати місце на сайті та вставити туди наступний HTML-код:

Додати сторінку до обраного!

От і все! Як це все працює - Ви можете бачити (і спробувати) трохи нижче, а також у сайдбарі цього сайту.

P.S. Хотілося б додати: Цей спосіб працює в наступних браузерах:

• Opera
• Mozilla FireFox
• Google Chrome / Safari - буде виводитися напис "Натисніть Ctrl-D щоб додати сторінку в закладки", в цих браузерах цю функцію вимкнено з міркувань безпеки.

Вітаю. Поговоримо про те, як зробити посилання або кнопку для додавання до вибраного (закладки) для всіх браузерів: Chrome, Firefox, Opera, Internet Explorer, Safari - кроссбраузерно, щоб користувач при кліку на неї зміг відкласти на майбутнє та запам'ятати вашу сторінку. Природно, подбайте про те, щоб зміст був цікавим, інакше ніхто не зберігатиме її до себе в закладки:)
Тож поїхали.

Код вносите в будь-яке потрібне місце. Усі параметри, крім вказаних нижче, можна змінити або видалити.

• id="fav"
  Сюди писатиметься інструкція для Chrome, Opera та всіх браузерів на движку Webkit
• rel="sidebar"
  Атрибут обов'язковий, потрібен для Firefox, так він визначатиме, що сторінку за посиланням потрібно відправити у вибране
• href=""
  Також бажано залишити без змін. Firefox братиме посилання для закладки за цією адресою

  Якби моя воля, замінив би a на span, але цей варіант не підійде під Firefox

• onclick="addFav()"
  Тут визначатиметься скрипт JavaScript. Про нього далі

Код або виносите у зовнішній файл, або розташовуєте в будь-якому місці на сторінці, наприклад, в розділі або перед закриваючим тегом
Код закоментований, гадаю, нічого складного немає. Якщо виникнуть запитання, задавайте в коментарях.

Звичайно, немає сенсу показувати посилання для додавання до обраного на мобільних девайсах, воно там не працюватиме. Тому потрібно відфільтрувати їх.
Для цього можна, наприклад, генерувати посилання за допомогою JavaScript, а в ньому вже фільтрувати все як треба

// Функція для визначення "мобільності" браузера function 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 код посилання (див. вище)"; )

Трохи розберемо його

• var UA = navigator.userAgent.toLowerCase(); — записує змінну заголовки браузера, перевівши їх у нижній регістр. За її змістом ми визначатимемо "мобільність" браузера.
• return (/Регулярний вираз/.test(UA) ? true: false) - фільтр. У регулярному виразі записуються фрагментри, які можуть бути у заголовках мобільних браузерів. Ви можете додати значення, розділяючи їх | .

  Фільтр чутливий до регістру. Тому, якщо вносите свої значення у фільтр, обов'язково записуйте їх у нижньому регістрі (маленькими літерами).

• document.getElementById("MyID").innerHTML = "Тут HTML код посилання"; - Шукає в коді тег з id="MyID" і записує замість нього наше посилання. Щоб спрацювало, потрібно попередньо у місце, де відобразити посилання, записати

Підсумую, як зрештою може виглядати код html

// Функція для визначення "мобільності" браузера function 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://сайт?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" для додавання сторінки до закладок" ; return false; ) )

Цей спосіб актуальний на 2017 рік. Не виключено, що з часом нові версії браузерів внесуть корективи, і скрипт перестане працювати. Якщо ви помітите такі збої, пишіть у коментарях, розглянемо та оновимо код.

Напишіть будь ласка Html код щоб при відкритті сайту на екран автоматично виводилася пропозиція додати сайт до вибраного або закладки браузера. якщо сайт доданий до закладок браузера або обране, то пропозиція не повинна з'являтися.
Заздалегідь вдячний. Костянтин

Написати можна таку конструкцію, тільки вийде складна конструкція.

1) Необхідно вставити спливаюче вікно. (Пошукачі недолюблюють такі сторінки, та й відвідувачі не долюблюють.

2) Як авторизувати відвідувача, ставив він закладку чи ні? Для цього потрібно ставити куки для цього браузера.
(Згодом користувач прочистить комп'ютер і видалить всі куки, я роблю це 1 раз на 2 тижні.)

3) Написати або використовувати код, який буде працювати і викликати вікно для збереження закладки.
(Те, що працює у браузері Мозила чи Firefox, не працює в Opera, чи IE, чи навпаки!)

4) Додатковий великий код, який повинен буде встановлений на сторінці для того, щоб відвідувач додав вас до закладок. (Збільшується час завантаження сторінки. Google страшенно не любить сторінки, які довго вантажаться, виключає з пошуку такі сайти, Яндекс не любить все, що спливає: Popap Popover.)

ВИСНОВОК: Таке на сайт таке ставити не варто. На сайт краще встановити невеликий код для додавання до закладок, і запропонувати відвідувачеві самому вибирати, чи потрібен ваш сайт йому в закладках. Спливаючі вікна використовувати для більш корисної справи, скажімо підписки відвідувача.

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

Вод простенький html код:

КІД:


Додати до закладок браузера.

function addBookmark()
if (document.all) window.external.addFavorite("http://infopodsolnux.ru/", "Сайт infopodsolnux.ru");

Додати в обране

Використовуючи цей код, ви отримуєте тільки текстове посилання на вашому сайті: Додати до обраного

Тут у цьому коді вам потрібно прописати посилання на свій сайт та змінити опис вашого сайту у тезі.

Вставляєте цей код у те місце, де хочете вивести вашу пропозицію. (Краще у верхній частині сайту.)

При натисканні відвідувачу видається вікно для збереження закладки у браузері.

Interner Exploer

На своєму сайті я пішов трохи далі та створив
маленький блок з пояснення відвідувача.

Ось приклади:

Ось код у html який використовував:

КІД: ВИДІЛИТИ ВСЕ

У цьому коді, як і в попередньому, змінюємо посилання на ваш сайт і описи.

У сторіччі:

У свій час на сайтах було популярне посилання «Додати сайт у вибране», при натисканні на яке адреса сайту заносилася в закладки браузера. Проте чому була? Періодично на сайтах подібне посилання трапляється досі. Біда в тому, що скрипт, що використовується для цієї мети, не працює в багатьох браузерах, тому його цінність близька до нуля. У HTML5 розширилися можливості атрибуту rel тега і тепер за його допомогою можна легко додавати до обраного будь-які сайти та окремі сторінки.

Достатньо до посилання додати rel="sidebar" і при натисканні на неї відкриється спеціальна панель у браузері для створення нової закладки. Поки значення sidebar підтримують два браузери - Firefox і Opera, інші ігнорують атрибут rel і переходять за вказаним посиланням як завжди.

Щоб розширити кількість браузерів і додати до них IE, можна також підключити до посилання невеликий скрипт. У результаті вийде, що Firefox, Opera, Internet Explorer викличуть спеціальну панель, інші браузери перейдуть за посиланням (приклад 1).

Приклад 1. Додавання у вибране

HTML5 IE Cr Op Sa Fx

Додати до обраного function addBookmark() ( if (document.all) window.external..ru"); )

Додати в обране

Як у результаті виглядає застосування rel = "sidebar"? Результат залежить від браузера. Наприклад, Firefox відкриває таке вікно (рис. 1).

Мал. 1. Додавання до вибраного Firefox

У Opere вигляд дещо інший, але сенс аналогічний (рис. 2).

Мал. 2. Додавання до обраного в браузері Opera

Internet Explorer має найкоротший інтерфейс (рис. 3).

Мал. 3. Додавання до вибраного в браузері Internet Explorer

Поки що використання атрибуту rel незвично через його слабку підтримку браузерами, але потенціал у нього величезний, а число значень поступово розширюється. Тож включати у посилання його треба.

• Головна
• Windows
• Як зробити кнопку "додати у вибране". Посилання "додати у вибране" для всіх браузерів Додати до вибраного q node