jQuery(function(){
    jQuery('#test').keydown(function(e) {
       console.log('keyup called');
       var code = e.keyCode || e.which;
       if (code == '9') {
         console.log('keyup called tab');

    alert('worked');

       return false;
       }

       if (code == '13') {
         console.log('keyup called enter');

    alert('worked');
       return false;
       }

       console.log(code);

    });
});

Есть задача, распечатать заданную картинку на странице, т.е. отправить ее на принтер.

Приведу кусок кода который печатает любую выбранную картинку на странице по клику на ней {картинке}.

jQuery(function(){
jQuery('img').click(function(){
var wImage = jQuery(this).attr('width');
var hImage = jQuery(this).attr('height');

var wind = open('','Печатаем картинку','width='+ wImage +',height='+ hImage  + ',status=no,toolbar=no,menubar=no,location=no,scrollbar=0,resizable=yes');
wind .document.writeln('');
wind .document.close();
wind .focus();
wind .print();
wind .close();

});
});

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

ps: желательно присутствие у картинки атрибутов ширина и высота.

Часто сталкиваюсь с задачами по выборке средствами 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»); // выбор всех выбранных чекбоксов

Часто при заказе верстки заказчик желает чтобы системные элементы, например полосы прокрутки (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 */

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

Довольно часто попадается ситуация организовать на стороне клиента (пользователя) функционал позволяющий вводить в поле при редактировании данных , параметры в формате отображения даты. Плагин 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);
			}
		);
});

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: соответственное если поле получает фокус то ватермарк не показывается, и показывается если поле потеряло фокус и не содержит введенных данных

Зачастую необходимо реализовать на стороне клиента сохранение необходимой информации посредством механизма 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

Кнопка «Добавить в социальные закладки» распространенный элемент современных сайтов. Простое и удобное решение на 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(); // подробная инфа по сайтам в закладках

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

Для того чтобы организовать систему рейтинга на стороне пользователя понадобиться небольшой плагин для jQuery jquery.rater-1.0.zip

Что и как?

Размещаем на странице контейнер для интерфейса системы рейтинга.

<div id=»rating1« class=»rating»> </div>

И инициализируем его

$('#rating1').rater('ratings.php',

{maxvalue:10, style: 'basic', curvalue:0}

);

Параметры:

ratings.php — какому скрипту отдавать переменную $_POST['rating'];

maxvalue:10 — максимальное значение в системе рейтинга, (определяет сколько «звезд»)

style: ‘small’ — стиль внешнего вида

curvalue:3 — текущее значение рейтинга

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

Но можно отлично скомпоновать все это в виде древовидного меню .

В этом поможет jQuery Treeview плагин

Что и как?

Для использования понадобиться подключить несколько файлов

<link rel=»stylesheet» href=»/js/plugins/treeview/jquery.treeview.css» type=»text/css» />

<script type=»text/javascript» src=»/js/plugins/treeview/jquery.treeview.js»></script>

и оформить наше меню в виде

<ul id="menu" class="filetree">
         <li><span class="folder">Категория1</span>
	     <ul>
		 <li><span class="file">Линк1.1</span></li>
	      </ul>
	 </li>
	 <li><span class="folder">Категория2</span>
	      <ul>
		 <li><span class="folder">Подкатегория2.1</span>
	      <ul>
		 <li><span class="file">Линк2.1.1</span></li>
		 <li><span class="file"> Линк2.1.2</span></li>
	       </ul>
	 </li>
</ul>

и применить плагин к нашей конструкции

<script>
  $(document).ready(function(){
    $("#menu").treeview();
  });
  </script>

Дополнительный функционал.

Добавления дополнительных веток в меню осуществляется через опцию add: branches

Добавим ниже меню элемент по клику на который будет добавляться новая категория с линками, ID ему зададим «add» и повесим код

$(«#add»).click(

function() {

Довольно часто попадаются задачи, когда в интерфейс страницы нужно включить инструмент выбора цвета. С этой задачей превосходно справляется jQuery plug-in Farbtastic color picker.

Что и с чем?

1. Плагин использует HSL пространство цветов, что позволяет легко изменять яркость цвета не меняя его насыщенности.

2. Занимает 23KB, включая изображения и CSS.

Лежит здесь jQuery color picker

Как использовать?

1. Включаем farbtastic.js и farbtastic.css в наш HTML:

<script type="text/javascript" src="farbtastic.js"></script>
<link rel="stylesheet" href="farbtastic.css" type="text/css" />

2. Добавляем два объекта

поле

<input type=»text» id=»color» name=»color» value=»#123456″ />

куда будет заноситься значение полученное в результате применения, и контейнер

<div id="colorpicker"></div>

для интерфейса

3. Добавляем обработчик срабатывающий при загрузке страницы

<script type="text/javascript">
$(document).ready(function() {
$('#colorpicker').farbtastic('#color');
});
</script>

Возможности использования.

$(...).farbtastic(callback);

callback — функция которая быдет вызываться каждый раз когда пользователь будет выбирать цвет.

$.farbtastic(placeholder)
$.farbtastic(placeholder, callback)

Возвращает объект (который не является jQuery объектом !) позволяющий использовать некоторые дополнительные методы и свойства.

Методы

.linkTo(callback) — переопределение нового ответчика.
.setColor(string) . — устанавливает colorpicker на параметры заданного цвета в шестнадцатеричном представлении (например, ‘# 123456′).

.setColor ([H, S, L]) — станавливает colorpicker на параметры заданного цвета в HSL цветовом пространстве (0 .. 1 шкала).

Свойства

.linked . — установка связи с элементом (jQuery объектом) или заданной функцией .

.color — установка текущего цвета в шестнадцатеричном представлении (например, ‘# 123456′).

.hsl — установка текущего цвета в HSL представлении (например, [0.3, 0.4, 0.5]).

Для загрузки файлов предусмотрен тег (<input type=»file» /> , стандартными средствами его внешний вид особо не изменить.

В современных web приложениях использующих повсеместно ajax он смотрится анахронизмом, и мое мнение — морально устарел.

Конечно же для загрузки файлов на сайт можно использовать flash, но с этой задачей великолепно может справится и JavaScript.

AJAX загрузка позволит легко загрузить несколько файлов без обновления страницы, и использования какие-либо лишних элементов, чтобы показать окно выбора файла. Работает во всех основных браузерах, и, начиная с версии 2.0 не требует какой-либо библиотеки для запуска (хотя использetn некоторые функции jQuer). AJAX Ulpoad не создает лишних переменных в глобальном пространстве имен, так что она совместима с jQuery, Prototypejs, Mootools, JavaScript и другими библиотеками.

Вот тут ajaxupload.3.5.js

Как использовать?

1. Нужно создать кнопку.Можно использовать любой элемент!.

<div id=»upload_button»>Upload</div> <div id=»upload_button»> Добавить </ DIV>

В своем простейшем виде, можно создать его, используя следующий код:

new AjaxUpload('upload_button_id', {action: 'upload.php'});

2. Настройка загрузки AJAX

new AjaxUpload('#upload_button_id', {
  // какому скрипту передавать файлы на загрузку? только на свой домен
  action: 'upload.php',
  // имя файла
  name: 'userfile',
  // дополнительные данные для передачи
  data: {
    example_key1 : 'example_value',
    example_key2 : 'example_value2'
  },
  // авто submit
  autoSubmit: true,
  // формат в котором данные будет ответ от сервера .
  // HTML (text) и XML определяются автоматически .
  // Удобно при использовании  JSON , в таком случае устанавливаем параметр как "json" .
  // Также установите тип ответа (Content-Type) в text/html, иначе это не будет работать в IE6
  responseType: false,
  // отправка файла сразу после выбора
  // удобно использовать если  autoSubmit отключен  
  onChange: function(file, extension){},
  // что произойдет при  начале отправки  файла 
  onSubmit: function(file, extension) {},
  // что выполнить при завершении отправки  файла
  onComplete: function(file, response) {}
});

3. Как разрешить только определенных типов файлов?

new AjaxUpload('#button2', {        
        action: 'upload.php',
        onSubmit : function(file , ext){
        // перечисляем какие типы файлов можно загружать
        //-- также нужно сделать проверку на стороне сервера 
                if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                        // extension is not allowed
                        alert('Error: invalid file extension');
                        // cancel upload
                        return false;
                }
        }
});

Как это все работает?

Плагин создает невидимое поле ввода , и IFRAME. Так что это не совсем AJAX загрузка ).

как видим все довольно тривиально и удобно, единственный минус нет индикатора процесса загрузки

Как обратиться к DOM родителя из iframe

$(«#iframeID «, top.document);

Как обратиться к DOM iframe из родителя

$(‘#iframeID’).contents().find(‘#IDтого_доступ_к_чему _нужно_получить’).html();

Бывает необходимо в проект выполненный с использованием Prototype добавить фичу которая уже сдалена на jQuery в виде плагина, изобретать велосипед нет ни желания ни времени. Но если просто подключить jQuery то идет конфликт jQuery и Prototype .

Необходимо включить режим noConflict у jQuery.

Нужно сделать так.

<script type=»text/javascript»> $j = jQuery.noConflict();</script>

И везде для Prototype продолжать применяется знак $, а для jQuery — $j. После этого достаточно в файле плагина все $ заменить на $j, подключить jQuery к проекту — и все заработало как того и хотелось.

вот пример html кода

Страница проекта http://code.google.com/p/jquery-asmselect/

Простой скрипт, простая установка.
Поддерживает фоновые изображения PNG с прозрачностью.
Работает с PNG изображениями в ссылках.
Поддерживает TITLE, ALT, CLASS и STYLE-атрибуты.

Между тегами <head> и </head> после подключения jquery добить cnhjre

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

брать отсюда jquery.pngFix.js 4.8 Кб

или упакованный jquery.pngFix.pack.js 2.5 Кб

Активируется вот так

<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script>

К сожалению работает довольно коряво (.

Используем плагин к JQuery — curvyCorners. Закругляет углы он отлично, и работает независимо от фонового бэкграунда, и собственного фонового изображения.

Подключаем все в head:

Lля того чтобы скруглить все четыре угла нужного нам блока, нужно определиться какой блок мы будем закруглять (в примере это блок с id=main) и написать следующее:

$(document).ready(function(){
$("#main").corner();
});

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

$(document).ready(function(){
$("#main")
.corner({
tl:{radius: 20},
tr:{radius:20},
bl:{radius: 0},
br:{radius:0},
antiAlias:false,
autoPad: true
});
});

tr, tl, bl, br - это соответствующие имена каждого из углов (top right, top left, bottom left, bottom right).

Свойство antiAlias - установленное в false отключает сглаживание углов, делает их очертания более резкими, но в то же время значительно уменьшает время, загрузки страницы.

Свойство autoPad - также может принимать значения true и false, уставновленное в значение true, позволяет сохранить назначеныый через css паддинг, скругляемому блоку.

первый вид ведет на другие страницы моего сайта
второй на прикрепленные файлы
третий на email

Можно сделать небольшой ход, который сделает ссылки наглядными и позволит сразу определить по внешнему виду ссылки , ее цвету например, куда она ведет , не прописывая классы css для каждой ссылки, а воспользовавшись средствами jQuery.

Берем все ссылки ведущие на e-mail,составляем селектор, который бы искал все якорные элементы (a) с атрибутом href ([@href]), который начинается с mailto (^=”mailto:”).

$(document).ready(function(){
$('a[@href^="mailto:"]').addClass("mailto");
});

Для выбора ссылок, ведущих например на pdf-файл, мы будем использовать знак $, указывающий на конец строки, так как нам нужно получить все элементы с атрибутом href, который заканчивается на .pdf:

$(document).ready(function(){
$('a[@href^="mailto:"]').addClass("mailto");
$('a[@href$=".pdf"]').addClass("pdflink");
});

аналогично можно сделать для любого прикрепленно файла другого типа

А для получения всех ссылок, ведущих на другие страницы — т.е. на страницу допустим mysite.com — нужно использовать звездочку, с помощью которой мы сможем выбрать не только прямые ссылки на mysite.com, а вообще все в которых встречается строчка с адресом сайта:

в итоге

$(document).ready(function(){
$('a[@href^="mailto:"]').addClass("mailto");
$('a[@href$=".pdf"]').addClass("pdflink");
$('a[@href*="mysite.com"]').addClass("mysite");
});

Для каждого типа соответственно необходимо задать класс css отвечающий за внешнее представление

Иметь вид

<table id="myTable">
<thead>
<tr>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Email</th>
    <th>Due</th>
    <th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Smith</td>
    <td>John</td>
    <td>jsmith@gmail.com</td>
    <td>$50.00</td>
    <td>http://www.jsmith.com</td>
</tr>
<tr>
    <td>Bach</td>
    <td>Frank</td>
    <td>fbach@yahoo.com</td>
    <td>$50.00</td>
    <td>http://www.frank.com</td>
</tr>
<tr>
    <td>Doe</td>
    <td>Jason</td>
    <td>jdoe@hotmail.com</td>
    <td>$100.00</td>
    <td>http://www.jdoe.com</td>
</tr>
<tr>
    <td>Conway</td>
    <td>Tim</td>
    <td>tconway@earthlink.net</td>
    <td>$50.00</td>
    <td>http://www.timconway.com</td>
</tr>
</tbody>
</table> 

т.е. содержать в структуре <thead> и <tbody>

в блоке <thead> задаются заголовки для  столбцов

а в <tbody> соответственно  само содержимое

инициализируется  сортировка кодом

$(document).ready(function()
    {
        $("#myTable").tablesorter();
    }
);
если необходимо  запретить сортировку  по некоторым  полям  то
пишем
$("#myTable").tablesorter({headers:{1:{sorter: false},6:{sorter: false}}})

этим отключается сортировка у первого и шестого столбца

плагин очень гибкий и легко нестраиваемый, более подробно можно ознакомится на сайте автора.

здесь tablesorter.zip рип с хелпом и примерами

header('Content-Type: text/html; charset=windows-1251', TRUE);

$(‘#context input:checkbox’).each(function(){this.checked = checked;});

переключить чекбоксы соответственно можно вот так

$(‘#context input:checkbox’).each(function(){this.checked = !this.checked;});