Кроссбраузерное добавление страницы в закладки. Как сделать кнопку "добавить в избранное" Кнопка добавить в избранное

Покопавшись, в итоге наашел красивое решение, работает во всех браузерах.

function add2Fav(x){ if (document.all && !window.opera) { if (typeof window.external == "object") { window.external.AddFavorite(document.location, document.title); return true; } else return false; } else{ x.href=document.location; x.title=document.title; x.rel = "sidebar"; return true; } }

Добавить в избранное

Добавить в избранное - скрипт для всех браузеров Добавить в избранное

Меняем Название Сайта и URL в 2х местах! Работает везде без ошибок)

Сделать стартовой - скрипт для IE Сделать стартовой

Меняем URL в 2х местах! Работает только в IE

JavaScript Ссылка "Добавить в избранное" для всех браузеров

Скрипт найден в google и доработан с учетом нынешних реалий, а именно - наличия уже 8й версии IE и браузера Chrome (который в оригинальном виде скриптом определялся как Netscape и ни каких действий в результате не производилось). Если браузер не поддерживает добавление в закладки через скрипт - пользователю будет показано сообщение о том что добавить в закладки можно нажатием Ctrl-D.

Поместите эти функции в заголовок страницы:

function getBrowserInfo() { var t,v = undefined; if (window.chrome) t = "Chrome"; else if (window.opera) t = "Opera"; else if (document.all) { t = "IE"; var nv = navigator.appVersion; var s = nv.indexOf("MSIE")+5; v = nv.substring(s,s+1); } else if (navigator.appName) t = "Netscape"; return {type:t,version:v}; } function bookmark(a){ var url = window.document.location; var title = window.document.title; var b = 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 = "sidebar"; a.title = url+","+title; return true; } else if (b.type == "Netscape") window.sidebar.addPanel(title,url,""); else alert("Нажмите CTRL-D, чтобы добавить страницу в закладки."); return false; }

В этой статье будет рассказано о разных способах добавления папок, файлов и программ в список «Избранное» файлового менеджера операционной системы Windows - Проводник.

В операционной системе Windows, в Проводнике находится список «Избранное». В этот список операционной системой по умолчанию добавляются ссылки на определенные папки (например, «Рабочий стол»), а также на папки некоторых программ, после их установки (например, папки облачных файловых хранилищ Google Drive, OneDrive, Яндекс.Диск и других).

В список «Избранное» легко можно добавить другие новые папки, или удалить находящиеся там папки из списка «Избранное».

Сначала рассмотрим добавление ссылок на папки в список «Избранное», а также их удаление из этого списка.

Удаление папки из Избранное

Для удаления папки из списка «Избранное» нужно просто подвести курсор мыши к нужной папки и нажать на правую кнопку мыши. В контекстном меню нужно выбрать пункт «Удалить» и после этого папка будет удалена из этого списка.

Добавление папки в Избранное

Для добавления новой папки в «Избранное» необходимо сначала открыть Проводник. Затем потребуется выбрать нужную папку и просто перетащить ее, удерживая при этом кнопку мыши, в окно Проводника в список «Избранное». При этом около перетаскиваемой папки будет видна надпись «Создать ссылку в Избранное».

Добавить папку можно и другим способом. Для этого нужно открыть Проводник, а затем в окне Проводника открыть папку, которую требуется добавить в список «Избранное». На этом изображении выбрана папка «CD-DVD».

После этого в «Избранное» появляется новая папка, на приведенном примере - папка «CD-DVD».

Восстановление удаленных папок в Избранное

После удаления расположенных по умолчанию ссылок на папки вы можете их восстановить. Для этого нужно щелкнуть правой кнопкой мыши по «Избранное», а затем в контекстном меню выбрать пункт «Восстановить избранные ссылки».

Удаленные ссылки на папки, которые были установлены по умолчанию в «Избранное», будут восстановлены. Это действие не затронет ранее добавленные папки в «Избранное», ссылки на эти папки останутся в списке «Избранное».

Добавление программ в Избранное

Описанными выше способами нельзя добавить в «Избранное» ярлыки программ. При попытке переместить ярлык программы в «Избранное», появляется запись «Не удалось поместить в “Избранное”».

Это препятствие можно обойти обходным путем, открыв для этого папку «Ссылки», в которой находится содержимое списка «Избранное».

Если у программы, которую необходимо будет добавить в «Избранное», нет ярлыка, то нужно создать ярлык для этой программы и отправить его на Рабочий стол.

Ярлык для программы создается таким способом - меню «Пуск» => «Все программы» => Выбираете программу и щелкаете по ней правой кнопкой мыши => в контекстном меню выбираете «Создать ярлык» => «Создать ярлык в данной папке нельзя. Поместить его на рабочий стол?» => «Да». Теперь ярлык выбранной программы помещен в папку Рабочий стол.

После того, как в Проводнике была открыта папка с ярлыком программы или ярлык выбранной программы находится на Рабочем столе, нужно открыть меню «Пуск» и в самом правом верхнем углу открыть свою персональную папку (название вашей папки пользователя). Содержимое списка «Избранное» находится в папке «Ссылки».

Откройте Проводник, а затем перетащите ярлык программы в папку «Ссылки» из папки, в которой находится ярлык выбранной программы. Если ярлык выбранной программы находится на Рабочем столе, то просто перетащите мышью этот ярлык в папку «Ссылки».

На изображении я перетащил ярлык программы Skype в папку «Ссылки», и сразу после этого ярлык «Skype» появился в списке «Избранное». В списке «Избранное» ярлыки программ отображаются без стрелки.

Добавление файлов в Избранное

Точно таким образом можно добавлять в список «Избранное» отдельные файлы. Сначала нужно выбрать файл, который будет помешен в список «Избранное».

Для примера я выбрал «документ Word» с именем «Вопросы». По выбранному файлу нужно будет нажать правой кнопкой мыши, а в контекстном меню выбрать пункт «Создать ярлык».

Перед перемещением ярлыка файла, с ярлыка файла можно убрать окончание - «Ярлык», чтобы имя ярлыка не отличалось от имени файла. Так просто внешне красивее будет выглядеть этот ярлык.

Для этого кликните правой кнопкой мыши по ярлыку, а в контекстном меню выберите пункт «Переименовать», а затем уберите лишние слова из названия ярлыка файла.

После этих действий требуется открыть папку «Ссылки, для этого необходимо пройти по такому пути — меню «Пуск» => «Открытие персональной папки» => «Ссылки».

Теперь перетащите ярлык файла из папки, в которой он сейчас находится, в открытую папку «Ссылки». Сразу после этого ярлык файла «Вопросы» появляется в списке «Избранное».

Для того, чтобы удалить добавленные программы и файлы из списка Избранное» нужно подвести курсор мыши к выбранному файлу и в контекстном меню выбрать пункт «Удалить».

Выводы статьи

При необходимости, пользователь может добавить файлы и папки в список «Избранное» Проводника Windows. Если программа или файл не нужны в избранном, их можно оттуда удалить.

Во многих интернет-магазинах имеется такая полезная вещь, как функция добавить в избранное , с помощью которой, товар можно без проблем найти в разделе избранное своего личного кабинета. Вот сегодня мы и создадим первую часть данного материала с помощью 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; -moz-backface-visibility: hidden; backface-visibility: hidden; } .favorites.simple { background: 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); } .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); } .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); transform: rotate3d(1,1,0,0deg); } .favorites .remove:hover { background-position: -167px 0; }

Не забывайте! Еще раз повторюсь, что все свойства обязательны, так как рассчитаны на сугубо данный вид управления элементами. Честно сказать, на старых браузерах, смотрится это дело не очень, если к примеру, брать IE8 , так как в основном касается трансформации, но что остального, думаю решение вполне себя оправдало.