Блог saintista

Кнопка “Добавить в социальные закладки” распространенный элемент современных сайтов. Простое и удобное решение на jQuery позволит логко добавить такую кнопку на сайт.

Что и как ?

Возьмем jquery.bookmark.package-1.1.3.zip

Подключим jquery

и

<style type="text/css">@import "jquery.bookmark.css";</style>
<script type="text/javascript" src="jquery.bookmark.js"></script>

Добавим в HTML код div или span с нужным ID.

Добавим js код.

$(‘#defaultBookmark’).bookmark();

И все, закладки готовы.

Но вряд ли нам подойдет текущий внешний вид.

Что же в наличии несколько опций позволяющих изменить внешний вид функционала.

Опции:

$.bookmark.setDefaults({icons: ‘img/bookmarks.png’}); - изменим подложку изображение отвечающий за внешний вид социальных сервисов. Придется правда поменять немного код css под свои нужды в таком случае

$(‘#selectBookmark’).bookmark({sites:
['delicious', 'digg', 'furl', 'stumbleupon']}); – показываем только закладки на выбранные социальные сервисы.

$(‘#expandedBookmark’).bookmark({compact: false,
sites: ['facebook', 'google', 'magnolia', 'mixx']}); – вывод в стандартном формате, с названиями социальных сервисов.

$(‘#popupBookmark’).bookmark({popup: true, popupText: ‘Добавить в соц закладки’}); – показывать плашку с иконками при нажатии на выбранный елемент, компактный попап вариант. popupText – дополнительный параметр, какую надпись выводить.

$(‘#popupImageBookmark’).bookmark({popup: true,
popupText: ‘‘}); – вместо надписи выводим заданное изображение

$(‘#favouriteBookmark’).bookmark({sites: ['slashdot'], addFavorite: true}); – автоматически добавить в избранное браузера.

$(‘#emailBookmark’).bookmark({ addEmail: true}); – вывод иконки, письмо другу отправить

$(‘#iconsBookmark’).bookmark({icons: ‘img/bookmarks-big.png’, iconSize: 22,
sites: ['digg', 'dzone', 'stumbleupon', 'technorati',
'reddit', 'delicious', 'newsvine', 'furl', 'blinklist']}); – альтернативные иконки

$(‘#otherBookmark’).bookmark({
url: ‘http://сайт/страница’,
title: ‘jQuery Bookmark Reference’,
sites: ['technorati', 'reddit']});
– закладка не на текущую, а на другую, заданную , страницу

$(‘#changeBookmark’).bookmark({sites: ['google', 'furl']});

$(‘#changeButton’).toggle(function() {
$(‘#changeBookmark’).bookmark(‘change’,
{sites: ['stumbleupon', 'propeller']});
},
function() {
$(‘#changeBookmark’).bookmark(‘change’,
{sites: ['google', 'furl']});
}); меняем на лету закладки. Добавляется кнопка при активации которой, будут меняться иконки сервисов (указанных в параметрах) в которых можно оставить закладку на вашу страницу.

Список сайтов.

Список сайтов которые использует плагин довольно объемный.
ID – название сайта

* alltagz – alltagz
* allvoices – Allvoices
* aol – myAOL
* arto – Arto
* ask – Ask
* backflip – Backflip
* ballhype – BallHype
* bebo – Bebo
* bibsonomy – BibSonomy
* blinklist – BlinkList
* bloglines – Bloglines
* blogmarks – Blogmarks
* bookmarkit – bookmark.it
* bookmarksfr – bookmarks.fr
* buddymarks – BuddyMarks
* bx – Business Exchange
* bzzster – Bzzster
* care2 – Care2
* citeulike – citeulike
* connotea – Connotea
* current – Current
* dealsplus – deals plus
* delicious – del.icio.us
* designfloat – Design Float
* digg – Digg
* diigo – Diigo
* dzone – DZone
* evernote – Evernote
* expression – Expression
* facebook – Facebook
* fark – Fark
* faves – Faves
* feedmelinks – Feed Me Links
* folkd – Folkd
* foxiewire – FoxieWire
* fresqui – Fresqui
* friendfeed – FriendFeed
* funp – funP
* furl – Furl
* gabbr – Gabbr
* globalgrind – Global Grind
* google – Google
* gravee – Gravee
* healthranker – HealthRanker
* hemidemi – HEMiDEMi
* hugg – Hugg
* identica – identi.ca
* imera – Imera
* instapaper – Instapaper
* jamespot – Jamespot
* jumptags – Jumptags
* kaboodle – Kaboodle
* khabbr – Khabbr
* kledy – Kledy
* kirtsy – Kirtsy
* kool – Koolontheweb
* linkarena – Linkarena
* linkagogo – LinkaGoGo
* linkedin – LinkedIn
* livejournal – LiveJournal
* magnolia – ma.gnolia
* maple – Maple
* meneame – menéame
* mindbody – MindBodyGreen
* misterwong – Mister Wong
* mixx – Mixx
* multiply – Multiply
* mylinkvault – MyLinkVault
* myspace – MySpace
* n4g – N4G
* netlog – NetLog
* netscape – Netscape
* netvibes – Netvibes
* netvouz – Netvouz
* newstrust – NewsTrust
* newsvine – Newsvine
* nowpublic – NowPublic
* oknotizie – OKNOtizie
* oneview – OneView
* ping – Ping
* plaxo – Plaxo Pulse
* propeller – Propeller
* protopage – Protopage
* pusha – Pusha
* reddit – reddit
* scoopeo – Scoopeo
* segnalo – Segnalo
* shoutwire – ShoutWire
* simpy – Simpy
* sitejot – Sitejot
* slashdot – Slashdot
* smaknews – SmakNews
* smarking – Smarking
* sphinn – Sphinn
* spurl – Spurl
* squidoo – Squidoo
* startaid – StartAid
* strands – Strands
* stumbleupon – StumbleUpon
* stumpedia – Stumpedia
* symbaloo – Symbaloo
* tagza – Tagza
* tailrank – Tailrank
* technet – TechNet
* technorati – Technorati
* technotizie – Technotizie
* thisnext – ThisNext
* tipd – Tip’d
* tumblr – tumblr
* twitthis – TwitThis
* viadeo – Viadeo
* vodpod – Vodpod
* webnews – WebNews
* wikio – Wikio
* windows – Windows Live
* wishlist – Amazon WishList
* wists – Wists
* xanga – Xanga
* xerpi – Xerpi
* yahoobm – Yahoo Bookmarks
* yahoobuzz – Yahoo Buzz
* yahoo – Yahoo MyWeb
* yardbarker – Yardbarker
* yigg – Yigg
* yoolink – yoolink

Но при желании можно добавить свой сайт.

var html = ”;
$.each($.bookmark.getSites(), function(id, site) {
if (id != ‘example’) {
html += ‘

‘ + id + ‘ – ‘ + site.display + ‘

‘;
}
});
$(‘#siteList’).html(html);

где

id – его id
ite.display – выводимый заголовок

Полный список всех параметров

$(selector).bookmark({

url: ‘‘, // url на страницу сервиса добавления закладки
title: ”, // Заготовок закладки
sites: [], // список ID сайтов
icons: ‘bookmarks.png’, // подложка с иконками сайтов

iconSize: 16, // размер иконок

iconCols: 16, // количество колонок иконок

target: ‘_blank’, // имя tragets для ссылок на закладки

compact: true, // компактный вид

hint: ‘Send to {s}‘, // Для попап варианта текст

popup: false, // попап режим включить отключить

popupText: ‘Bookmark this site…’, // текст для попап тригера

addFavorite: false, // показывать или нет иконку добавить в избранное

favoriteText: ‘Favorite’, // текст для тригера добавить в избранное

favoriteIcon: 0, // Иконка для линка добавить в избранное

addEmail: false, // режим отправить другу по email

emailText: ‘E-mail’, // Текст в режиме отправить другу

emailIcon: 1, // Иконка для email линка

emailSubject: ‘Interesting page’, // Тема email

emailBody: ‘I thought you might find this page interesting:\n{t} ({u})’,
// содержимое письма
});

$(selector).bookmark(‘change’, settings); // переопределение параметров

$(selector).bookmark(‘destroy’); // удалить закладки

$.bookmark.setDefaults(settings); // восстановить стандартные параметры

$.bookmark.addSite(id, display, icon, url); // добавление в закладки дополнительного сайта

$.bookmark.getSites(); // подробная инфа по сайтам в закладках

Создание сайтов на заказ,создание сайта-визитки, продажа готовых сайтов, реклама в интернете.

Tweet This Post

Тэги: bookmarks, jQuery

jQuery SELECT (jquery-asmselect)

Wordpress подключение JQuery

jQuery png Fix

jQuery ajax в IE7

jQuery cookie проще некуда

Prototype и jQuery используем одновременно

jQuery watermark input field

jQuery округлые углы

jQuery древовидное меню

jQuery ajax рейтинг

jQuery table sort сортировка таблиц

jQuery выбираем цвет

Запись была опубликована Среда, августа 19, 2009 в 10:10 в рубрике Ultimate jQuery, jQuery, js. Читать рассылку RSS 2.0. Вы можете оставить комментарий или трэкбек с Вашего сайта.