Часто сталкиваюсь с задачами по выборке средствами jQuery того или иного объекта на странице, решил для себя написать небольшую справку.

Итак.

Выбор по ID и имени класса аналог принципа используемого в CSS

$(‘#idname’); // выбор элемента с id = sidebar
$(‘.classname’); // выбор элементов с class = classname
$(‘div#idname’); // выбор элемента div с id = idname
$(‘div. classname’); // выбор элементов div с class = classname

Выбор вложенных элементов, потомков

$(‘div p’); // выбор всех p элементов в элементах div

Аналогично работает вот такое код:

$(‘div’).find(‘p’); // выбор всех p элементов в элементах div

Выбор только вложенных элементов

$(‘div > p’); // выбор всех p элементов в элементах div, где p является прямым потомком div’a

Выборка нескольких разных элементов:

$(‘div, p’); // выбор всех div и p элементов

Поиск по соседям:

$(‘div+ h1′); // выбор всех h1 элементов перед которыми идут div элементы
$(’span ~ h1′); // выбор всех h1 элементов после первого элемента span
$(‘#idname’).prev(); // выбор предыдущего элемента от найденого
$(‘#idname’).next(); // выбор следующего элемента от найденого

Выбор всех элементов, всех предков элемента , всех потомков элемента

$(‘*’); // выбор всех элементов
$(‘ul > *’); // выбор всех потомков элементов ul
$(‘ul’).children(); // — выбор всех потомков элементов ul
$(‘ul’).parent(); // выбор всех прямых предков элементов ul
$(‘* > ul’); // выбор всех предков элементов ul
$(‘ul’).parents(); // выбор всех предков элементов ul
$(‘ul’).parents(‘div’); // выбор всех предков элемента ul которые есть li, parents как параметр селектора
$(‘ul li:first-child’); // выбор первого li в ul
$(‘ul li:last-child’); // выбор последнего li в ul

Фильтры в jQuery

$(‘li:first’); // выбираем первый div в доме
$(‘li:last’); // выбираем последний div в доме
$(‘li:not(.red)’); // выбираем div’ы у которых нету класса red
$(‘li:even’); // выбираем четные div’ы
$(‘li:odd’); // выбираем нечетные div’ы
$(‘li:eq(N)’); // выбираем div идущим под номером N в DOMe
$(‘li:gt(N)’); // выбираем div’ы, индекс которых больше чем N в DOMe
$(‘li:lt(N)’); // выбираем div’ы, индекс которых меньше чем N в DOMe
$(‘:header’); // выбо заголовоков h1, h2, h3 и т.д.
$(‘li:animated’); // выбор элементов с активной анимацией

Фильтры по контенту и видимости:

$(‘div:contains(text)’); // выбираем div’ы содержащие текст
$(‘div:empty’); // выбираем пустые div’ы
$(‘div:has(p)’); // выбираем div’ы которые содержат p
$(‘div.red’).filter(‘.bold’) // выбираем div’ы которые содержат класс red и класс bold
$(‘div:hidden’); // выбираем скрытые div’ы
$(‘div:visible’); // выбираем видимые div’ы

Фильтры jQuery для атрибутов:

$(“div[id]“); // выбор всех div с атрибутом id
$(“div[title='my']“); // выбор всех div с атрибутом title=my
$(“div[title!='my']“); // выбор всех div с атрибутом title не равного my
$(“div[title^='my']“); // выбор всех div с атрибутом title начинающихся с my
$(“div[title$='my']“); // выбор всех div с атрибутом title заканчивающихся на my
$(“div[title*='my']“); // выбор всех div с атрибутом title содержащим my

так же стоит отдельно отметить следующий фильтр:

$(“a[rel~='external']“); // выбор всех A с атрибутом rel содержащим external в списке значений разделенных пробелом

результат сработает на rel=”nofollow external” и на rel=”friend external follow”

jQuery селекторы выбора по типу элемента и фильтров - enabled disabled selected checked :

$(“:text”); // выбор всех input элементов с типом =text
$(“:radio”); // выбор всех input элементов с типом =radio
// и так далее
$(“input:enabled”); // выбор всех включенных элементов input
$(“input:checked”); // выбор всех отмеченных чекбоксов

Группировка фильтров jQuery:

$(“span[name=reg]:visible:has(p)”); // выбор видимого span с именем reg, который содержит тег p

jQuery селекторы для работы с элементами форм:

$(“form select[name=town] option:selected”).val(); // получение выбранного(-ых) элементов в селекте town
$(“form :radio[name=son]:checked”).val(); // получение выбранного значения радиобатона с именем son
$(“form :checkbox:checked”); // выбор всех выбранных чекбоксов

Tweet This Post

Часто при заказе верстки заказчик желает чтобы системные элементы, например полосы прокрутки (scrollbar) выглядели в одном стиле в разных браузерах. Кастомизация системных элементов неблагодарное занятие, но если нужно то нужно.

Данную проблему решить с помощью чистого css невозможно.
Решение на чистом JavaScript зачастую довольно громоздки, в плане количества строк кода.

Рассмотрим решение базирующееся на популярном фреймворке – jQuery/

Что и как?

Нам потребуется несколько файлов

Для работы плагина необходимы следующие файлы:

плагин the mouse wheel (реализация полной поддержки всех событий мыши)
плагин the jQEm (реализация динамического изменения размера скролла при изменении количества контента пользователем)
плагин jScrollPane (нужный нам плагин реализующий скролл у любого блока со стилем overflow:auto)
jScrollPane.css – стили

Все файлы можно загрузить вот здесь.

Подключается все это простым добавлением в head вашей страницы следующих ссылок:

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript” src=”jquery.mousewheel.min.js”></script>

<script type=”text/javascript” src=”jquery.em.js”></script>

<script type=”text/javascript” src=”jScrollPane.js”></script>

<link rel=”stylesheet” type=”text/css” media=”all” href=”jScrollPane.css” />

Активируется скроллбар для заданного элемента кодом :

$(function()
{
	$('.scroll-pane').jScrollPane();
});

Дополнительные параметры:

scrollbarWidth [int] — ширина скроллбара в пикселях (по умолчанию 10)
scrollbarMargin [int] — отступ слева от скроллбара в пикселях (по умолчанию 5)
wheelSpeed [int] — управление скоростью перемещения контента при скролле в пикселях (по умолчанию 18)
showArrows [boolean] — управляет выводом стрелочек вверх-вниз (по умолчанию задано ‘false’)
arrowSize [int] — высота стрелок если showArrows=true (подсчитывается из CSS если не задана)
animateTo [boolean] — определяет автопрокрутку к определенному флагу scrollTo and scrollBy (по умолчанию ‘false’)
dragMinHeight [int] — минимальная высота при которой появляется скролл (по умолчанию 0)
dragMaxHeight [int] — максимальная высота при которой появляется скролл (по умолчанию 99999!)
animateInterval [int] — Интервал в миллисекундах для обновления и анимации области скролла (по умолчанию 100)
animateStep [int] — Определяет расстояние при достижении которого начинается анимация (по умолчанию 3)
maintainPosition [boolean] — Позволяет зафиксировать позицию контента при его изменении (по умолчанию ‘true’)
scrollbarOnLeft [boolean] — Определяет положение скроллбара слева от контента (также можно определить с помощью CSS)
reinitialiseOnImageLoad [boolean] — Определяет должен ли скрипт реинициализировать себя при добавлении в контент изображения (по умолчанию ‘false’)

Каким образом имитировать скроллбар операционной системы?

Нужно немного изменить css, например под MAC OS

.osX .jScrollPaneTrack {
background: url(osx_track.gif) repeat-y;
}
.osX .jScrollPaneDrag {
background: url(osx_drag_middle.gif) repeat-y;
}
.osX .jScrollPaneDragTop {
background: url(osx_drag_top.gif) no-repeat;
height: 6px;
}
.osX .jScrollPaneDragBottom {
background: url(osx_drag_bottom.gif) no-repeat;
height: 7px;
}
.osX a.jScrollArrowUp {
height: 24px;
background: url(osx_arrow_up.png) no-repeat 0 -30px;
}
.osX a.jScrollArrowUp:hover {
background-position: 0 0;
}
.osX a.jScrollArrowDown {
height: 24px;
background: url(osx_arrow_down.png) no-repeat 0 -30px;
}
.osX a.jScrollArrowDown:hover {
background-position: 0 0;
}

.left .jScrollPaneTrack {
left: 0;
right: auto;
}
.left a.jScrollArrowUp {
left: 0;
right: auto;
}
.left a.jScrollArrowDown {
left: 0;
right: auto;
}

/* IE SPECIFIC HACKED STYLES */
* html .osX .jScrollPaneDragBottom {
bottom: -1px;
}
/* /IE SPECIFIC HACKED STYLES */

В архиве все перечисленные изображения в стилях присутствуют

Tweet This Post

Довольно часто попадается ситуация организовать на стороне клиента (пользователя) функционал позволяющий вводить в поле при редактировании данных , параметры в формате отображения даты. Плагин datePicker для jQuery отлично помогает в такой ситуации.

Что потребуется?

Разумеется подключаем jQuery

дополнительно подключаем

<!-- библиотеку для работы с датой -->
<script type="text/javascript" src="scripts/date.js">

</script>

Фикс прелестей IE 

<!--[if IE]>
<script type="text/javascript" 
src="scripts/jquery.bgiframe.js"></script>
<![endif]-->
и сам плагин

<!-- jquery.datePicker.js -->
<script type="text/javascript" 
src="scripts/jquery.datePicker.min-2.1.2.js">
</script>





также нужно прикрутить
------------------
table.jCalendar {

border: 1px solid #000;

background: #aaa;

border-collapse: separate;

border-spacing: 2px;

}

table.jCalendar th {

background: #333;

color: #fff;

font-weight: bold;

padding: 3px 5px;

}
table.jCalendar td {

background: #ccc;

color: #000;

padding: 3px 5px;

text-align: center;

}

table.jCalendar td.other-month {

background: #ddd;

color: #aaa;

}

table.jCalendar td.today {

background: #666;

color: #fff;

}

table.jCalendar td.selected {

background: #f66;

color: #fff;

}

table.jCalendar td.selected.dp-hover {

background: #f33;

color: #fff;

}

table.jCalendar td.dp-hover,

table.jCalendar tr.activeWeekHover td {

background: #fff;

color: #000;

}

table.jCalendar tr.selectedWeek td {

background: #f66;

color: #fff;

}

table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover {

background: #bbb;

color: #888;

}

table.jCalendar td.unselectable,

table.jCalendar td.unselectable:hover,

table.jCalendar td.unselectable.dp-hover {

background: #bbb;

color: #888;

}
/* For the popup */
/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */
div.dp-popup {

position: relative;

background: #ccc;

font-size: 10px;

font-family: arial, sans-serif;

padding: 2px;

width: 171px;

line-height: 1.2em;

}

div#dp-popup {

position: absolute;

z-index: 199;

}

div.dp-popup h2 {

font-size: 12px;

text-align: center;

margin: 2px 0;

padding: 0;

}

a#dp-close {

font-size: 11px;

padding: 4px 0;

text-align: center;

display: block;

}

a#dp-close:hover {

text-decoration: underline;

}

div.dp-popup a {

color: #000;

text-decoration: none;

padding: 3px 2px 0;

}

div.dp-popup div.dp-nav-prev {

position: absolute;

top: 2px;

left: 4px;

width: 100px;

}

div.dp-popup div.dp-nav-prev a {

float: left;

}

/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */

div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {

cursor: pointer;

}

div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {

cursor: default;

}

div.dp-popup div.dp-nav-next {

position: absolute;

top: 2px;

right: 4px;

width: 100px;

}

div.dp-popup div.dp-nav-next a {

float: right;

}

div.dp-popup a.disabled {

cursor: default;

color: #aaa;

}

div.dp-popup td {

cursor: pointer;

}

div.dp-popup td.disabled {

cursor: default;

}
------------------------------
для datePicker
Что и как ?



Простая ставка datePicker

$(function()
{
	$('.date-pick').datePicker();
});
Для иконки календаря дополнительно добавим css код
a.dp-choose-date {
	float: left;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 5px 3px 0;
	display: block;
	text-indent: -2000px;
	overflow: hidden;
	background: url(calendar.png) no-repeat;
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
	width: 140px;
	float: left;
}
Включение подсветки текущего дня

$(function()
{
	$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});
Вставка с подсветкой  предыдущего выбора

$(function()
{
	$('.date-pick').datePicker({startDate:'01/01/1996'});
});
и добавим код  css 
a.dp-choose-date {
	float: left;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 5px 3px 0;
	display: block;
	text-indent: -2000px;
	overflow: hidden;
	background: url(calendar.png) no-repeat;
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
	width: 140px;
	float: left;
}
Вставка с ограничением диапазона дат для выбора


$(function()
{
	$('.date-pick').datePicker(
		{
			startDate: '01/01/1970',
			endDate: (new Date()).asString()
		}
	);
});
Инлайновая вставка
$(function()
{
	$('.turn-me-into-datepicker')
		.datePicker({inline:true})
		.bind(
			'dateSelected',
			function(e, selectedDate, $td)
			{
				//--здесь то что срабатывает при выборе даты
			}
		);
});

Выборка сразу целой недели

$(function()
{
	$('.date-pick').datePicker({selectWeek:true,closeOnSelect:false});
});

Задать фиксированную позицию

$(function()
{
	$('.date-pick')
		.datePicker({createButton:false})
		.bind('click',
			function()
			{
				$(this).dpDisplay();
				this.blur();
				return false;
			}
		);
	// tl is the default so don't bother setting it's position
	$('#tr').dpSetPosition($.dpConst.POS_TOP, $.dpConst.POS_RIGHT);
	$('#bl').dpSetPosition($.dpConst.POS_BOTTOM, $.dpConst.POS_LEFT);
	$('#br').dpSetPosition($.dpConst.POS_BOTTOM, $.dpConst.POS_RIGHT);
	$('#custom-offset').dpSetOffset(10, 300);
});

Показ при нажатии на текстовое поле

$(function()
{
	$('.date-pick').datePicker({clickInput:true})
});

Задать свой формат временной метки

Date.firstDayOfWeek = 0;
Date.format = 'mm/dd/yyyy';
$(function()
{
	$('.date-pick').datePicker()
});

Локализация , языковые настройки datePicker

$.dpText = {
	TEXT_PREV_YEAR		:	'DE Previous year',
	TEXT_PREV_MONTH		:	'DE Previous month',
	TEXT_NEXT_YEAR		:	'DE Next year',
	TEXT_NEXT_MONTH		:	'DE Next month',
	TEXT_CLOSE			:	'DE Close',
	TEXT_CHOOSE_DATE	:	'DE Choose date'
}
$(function()
{
	$('.date-pick').datePicker()
});

Блокировка поля ввода datePicker

$(function()
{
	$('.date-pick').datePicker();
	$('.dp-disable').bind(
		'click',
		function()
		{
			var $this = $(this);
			var whichInput = $this.attr('rel');
			var $dateInput = $('#date' + whichInput);
			var status = $dateInput.is('.dp-disabled');
			$dateInput.dpSetDisabled(!status);
			$this.text(
				(status ?
					'Disable' :
					'Enable'
				) + ' date ' + whichInput);
			this.blur();
			return false;
		}
	);
});

Обработчик событий

$(function()
{
	$('.date-pick')
		.datePicker({createButton:false})
		.bind(
			'click',
			function()
			{
				$(this).dpDisplay();
				this.blur();
				return false;
			}
		)
		.bind(
			'dateSelected',
			function(e, selectedDate, $td)
			{
				console.log('You selected ' + selectedDate);
			}
		);
});

Tweet This Post

watermark – водяной знак, в нашем случае это подсказка для поля ввода что в это поле вводить. Удобно использовать в случае если пространство формы с полями ограничено и нет возможности разместить текст.

Понадобится плагин jquery.watermarkinput.zip

Что и как?

Задаем водяные знаки для полей по ID

jQuery(function($){
$(“#first”).Watermark(“First”);
$(“#mi”).Watermark(“MI”);
$(“#last”).Watermark(“Last”);
$(“#suffix”).Watermark(“Suffix”);
});

По умолчанию цвет текста подсказки серый, если это не устраивает, можно задать цвет вторым аргументом функции.

jQuery(function($){
$(“#suffix”).Watermark(“Suffix”,”#ff0000″);
});

Также, если необходимо можно временно убрать подсказки

$.Watermark.HideAll();

а потом заново их показать

$.Watermark.ShowAll();

ps: соответственное если поле получает фокус то ватермарк не показывается, и показывается если поле потеряло фокус и не содержит введенных данных

Tweet This Post

Зачастую необходимо реализовать на стороне клиента сохранение необходимой информации посредством механизма cookie. Плагин jQuery позволяет не вдаваясь в тонкости чистого javascripta реализовать задуманное парами строк кода.

Нам понадобиться сам плагин jquery.cookie.zip.

Что и как ?
$.cookie(‘the_cookie’); // получить значение cookie
$.cookie(‘the_cookie’, ‘the_value’); //установить значение cookie
$.cookie(‘the_cookie’, ‘the_value’, { expires: 7 }); //установить куки с временем жизни 7 дней
$.cookie(‘the_cookie’, ”, { expires: -1 }); // удалить cookie
$.cookie(‘the_cookie’, null); // удалить cookie

Tweet This Post

Кнопка “Добавить в социальные закладки” распространенный элемент современных сайтов. Простое и удобное решение на 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 += ‘

‘;
}
});
$(‘#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