WebDuty » jQuery http://webduty.ru Блог посвящённый веб-технологиям Tue, 10 Apr 2012 19:48:00 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Ускорение Google Analytics http://webduty.ru/%d1%83%d1%81%d0%ba%d0%be%d1%80%d0%b5%d0%bd%d0%b8%d0%b5-google-analytics.htm http://webduty.ru/%d1%83%d1%81%d0%ba%d0%be%d1%80%d0%b5%d0%bd%d0%b8%d0%b5-google-analytics.htm#comments Sun, 09 Aug 2009 13:04:02 +0000 admin http://webduty.ru/?p=862 3185410319_419a368b35_tЧто-то давно ничего не писал. Но на то есть свои причины – очень увлекся темой дорвеев, да и работы поднакопилось предостаточно. Итак, начнем.
Как вам наверно известно, Google Analytics – один из наиболее мощных сервисов для сбора статистики веб-сайта. Но у неё есть один огромный минус. Зачастую скрипт аналитики долго грузится и если размещать его в начале страницы (сразу после body) для более точных результатов, он не даёт грузиться элементам страницы, пока не загрузится сам. Это связано с тем, как устроен этот сервис.
Google Analytics загружает и выполняет некий Javascript-код ga.js, потом выполняет его, что и является сигналом того, что на сайт забрел очередной сервер. Так вот, загружая этот скрипт, он блокирует загрузку всего остального.
Сам Google Analytics Tracking Code выглядит так:

<!-- Google Analytics -->
<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
  try {
  var pageTracker = _gat._getTracker("UA-0000000-0");
  pageTracker._trackPageview();
  } catch(err) {}
</script>
<!-- Google Analytics -->

Для борьбы с этим изъяном и придумали небольшой jQuery-плагин под странным названием Geekga.

‘jquery.geekga.js’ jQuery-плагин

Файл jquery.geekga.js:

/*
 * jquery.geekga.js - jQuery plugin for Google Analytics
 *
 * This plugin extends jQuery with two new functions:
 *
 *   - $().geekGaTrackPage(account_id)
 *       Track a pageview.
 *
 *   - $().geekGaTrackEvent(category, action, label, value)
 *       Track an event with a category, action, label and value.
 *
 *
 * This code is in the public domain.
 *
 * Willem van Zyl
 * willem@geekology.co.za
 * http://www.geekology.co.za/blog/
 */
 
(function($) {
 
  var pageTracker;
 
  /**
   * Track a pageview, e.g.:
   *
   *   $().geekGaTrackPage('UA-0000000-0');
   */
  $.fn.geekGaTrackPage = function(account_id) {
 
    //check whether to use an unsecured or a ssl connection:
    var host = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    var src = host + 'google-analytics.com/ga.js';
 
    //load the Google Analytics javascript file:
    $.getScript(src, function() {
      if (typeof _gat != undefined) {
        //the ga.js file was loaded successfully, set the account id:
        pageTracker = _gat._getTracker(account_id);
 
        //track the pageview:
        pageTracker._trackPageview();
      }
      else {
        //the ga.js file wasn't loaded successfully:
        throw "Unable to load ga.js; _gat has not been defined.";
      }
    });
 
  };
 
  /**
   * Track an event, e.g.:
   *
   *   $('a.twitter').click(function() {
   *     $().geekGaTrackEvent('feed', 'click', 'Twitter', 'willemvzyl');
   *   });
   */
  $.fn.geekGaTrackEvent = function(category, action, label, value) {
 
    if (typeof pageTracker != undefined) {
      //the pageTracker was defined, track the event:
      pageTracker._trackEvent(category, action, label, value);
    } else {
      //the pageTracker wasn't defined:
      throw "Unable to track event; pageTracker has not been defined";
    }
 
  };
 
})(jQuery);

Использование плагина

Для начала подключим необходимые js-файлы: jQuery и сам плагин.

<html>
<head>
  <title>Hello, world!</title>
  <script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="javascript/jquery.geekga.min.js" type="text/javascript"></script>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

Затем укажем плагину ваш ID в аналитике Google’а:

<html>
<head>
  <title>Hello, world!</title>
  <script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="javascript/jquery.geekga.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $().geekGaTrackPage('UA-0000000-0');
    });
  </script>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

Где UA-0000000-0 – ваш ID.
Вот и всё. Мне в одном из проектов помогло, поможет и вам.
Cкачать плагин

889734416_06f014a237

]]> http://webduty.ru/%d1%83%d1%81%d0%ba%d0%be%d1%80%d0%b5%d0%bd%d0%b8%d0%b5-google-analytics.htm/feed 13 Twitter на вашем сайте с помощью Juitter http://webduty.ru/twitter-%d0%bd%d0%b0-%d0%b2%d0%b0%d1%88%d0%b5%d0%bc-%d1%81%d0%b0%d0%b9%d1%82%d0%b5-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-juitter.htm http://webduty.ru/twitter-%d0%bd%d0%b0-%d0%b2%d0%b0%d1%88%d0%b5%d0%bc-%d1%81%d0%b0%d0%b9%d1%82%d0%b5-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-juitter.htm#comments Fri, 24 Jul 2009 14:06:39 +0000 admin http://webduty.ru/?p=791 Juitter – это jQuery-плагин, который позволяет размещать сообщения с Twitter’ра на вашем сайте. Он достаточно лёгок и быстр :) Вы можете выводить свои твиты, либо определённого пользователя, вы можете ограничить язык твитов, выводить твиты нескольких пользователей, фильтровать их по ключевым словам.
cover
Вы можете настроить Juitter под свои требования, указать количество выводимых сообщений, частоту обновления, отображать аватары пользователей или нет. Вы можете легко настроить его внешний вид, используя CSS.

Установка

Установить Juitter на свой сайт очень просто. Нужно подключить необходимые файлы:

<script src="/app/js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="/app/js/jquery.juitter.js" type="text/javascript"></script>
<script src="/app/js/system.js" type="text/javascript"></script>

Настройки плагина хранятся в начале файла jquery.juitter.js. Разобраться не сложно.
На странице необходимо указать слой, куда будут выводиться сообщения:

<div id="juitterContainer"></div>

Вот и всё.
Дополнительную информацию можно узнать на сайте плагина.
Cкачать архив c плагином и примером

Создание сайтов в новосибирске лучше всех выполнят эти ребята.

]]> http://webduty.ru/twitter-%d0%bd%d0%b0-%d0%b2%d0%b0%d1%88%d0%b5%d0%bc-%d1%81%d0%b0%d0%b9%d1%82%d0%b5-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-juitter.htm/feed 0 8-мибитная игра на jQuery http://webduty.ru/8-%d0%bc%d0%b8%d0%b1%d0%b8%d1%82%d0%bd%d0%b0%d1%8f-%d0%b8%d0%b3%d1%80%d0%b0-%d0%bd%d0%b0-jquery.htm http://webduty.ru/8-%d0%bc%d0%b8%d0%b1%d0%b8%d1%82%d0%bd%d0%b0%d1%8f-%d0%b8%d0%b3%d1%80%d0%b0-%d0%bd%d0%b0-jquery.htm#comments Tue, 21 Jul 2009 11:57:08 +0000 admin http://webduty.ru/?p=727 Вы ещё сомневаетесь в возможностях библиотеки jQUERY?
К вашему вниманию две 8-мибитных игры (помните приставку Dendi?) написаны исключительно на Javascript.

Mario Kart Online

и

T&C

Ливневая канализация предназначена для отвода погодных осадков. Канализация для дачи, Септики из стеклопластика, Емкости из пластика, Монтаж. В Иркутске. Выгодно.

Ливневая канализация предназначена для отвода погодных осадков. Канализация для коттеджа, Септики для коттеджей, Септик, Проектирование. В Новосибирске. Профессионально.


Септики Юнилос – сложные системы разработанные на основе чешских систем Топас (Topas). Монтаж канализации, Система очистки сточных вод, Ссептик дача, Биологическая очистка сточных вод. В Сочи. Предоставляются гарантии.


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


Нужна водоочистка и канализация для коттеджа – не знаете с чего начать? Системы канализации, Септики из стеклопластика, Водоотведение в коттеджах, Монтаж. В Хабаровске. Дешево.

]]> http://webduty.ru/8-%d0%bc%d0%b8%d0%b1%d0%b8%d1%82%d0%bd%d0%b0%d1%8f-%d0%b8%d0%b3%d1%80%d0%b0-%d0%bd%d0%b0-jquery.htm/feed 0 5 способов улучшить ссылки http://webduty.ru/5-%d1%81%d0%bf%d0%be%d1%81%d0%be%d0%b1%d0%be%d0%b2-%d1%83%d0%bb%d1%83%d1%87%d1%88%d0%b8%d1%82%d1%8c-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8.htm http://webduty.ru/5-%d1%81%d0%bf%d0%be%d1%81%d0%be%d0%b1%d0%be%d0%b2-%d1%83%d0%bb%d1%83%d1%87%d1%88%d0%b8%d1%82%d1%8c-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8.htm#comments Tue, 21 Jul 2009 10:04:49 +0000 admin http://webduty.ru/?p=706 image
При наведении курсора на ссылку она, как правило, меняет свой цвет, либо становится подчёркнутой. Это довольно скучно. Вот несколько способов улучшения ваших ссылок.

Border-bottom

Border-bottom лучше чем text-decoration: underline. Он не пересекает нижние части букв, например yjgр, что в некоторых случаях выглядит ужасно. Также вы можете использовать разные стили бордера. Например границу из точек или пунктира.
Пример:

a { border-bottom: dashed 1px #000; }
a:hover { border-bottom: solid 1px #000; }

Background

Вы можете использовать другой фон ссылки. Например в Wordpress ссылка Удалить становится красной при наведении, что говорит об опасности нажатия на неё.
Пример:

a {
color:red;
border-bottom: 1px solid red;
}
a:hover {
color:#fff;
background-color:red;
}

Ссылка с иконкой

Вы можете добавить к своей ссылке иконку, делается это очень просто:

a { background: #fff url('icon.png') no-repeat center left; }

Кроме того, вы можете использовать черно-белые иконки в обычном состоянии и цветные при наведении. Например, мы использовали этот эффект на сайте своей веб-студии внизу главной страницы.

Увеличение букв ссылки

Ещё можно увеличить буквы при наведение на ссылку

a:hover { text-transform: uppercase; }

Анимированные ссылки

С помощью jQuery можно сделать анимированные ссылки, например как здесь. Реализует этот эффект вот такой код:

$(document).ready(function() {  
    $('a.nudge').hover(function() {
        $(this).animate({ paddingLeft: '20px' }, 400);  
    }, function() {
        $(this).animate({ paddingLeft: 0 }, 400);  
    }); 
});

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

Постовой:
Звуковые наркотики, скачать звуковые наркотики.

]]> http://webduty.ru/5-%d1%81%d0%bf%d0%be%d1%81%d0%be%d0%b1%d0%be%d0%b2-%d1%83%d0%bb%d1%83%d1%87%d1%88%d0%b8%d1%82%d1%8c-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8.htm/feed 4 Великолепная галерея с помощью jQuery http://webduty.ru/%d0%b2%d0%b5%d0%bb%d0%b8%d0%ba%d0%be%d0%bb%d0%b5%d0%bf%d0%bd%d0%b0%d1%8f-%d0%b3%d0%b0%d0%bb%d0%bb%d0%b5%d1%80%d0%b5%d1%8f-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery.htm http://webduty.ru/%d0%b2%d0%b5%d0%bb%d0%b8%d0%ba%d0%be%d0%bb%d0%b5%d0%bf%d0%bd%d0%b0%d1%8f-%d0%b3%d0%b0%d0%bb%d0%bb%d0%b5%d1%80%d0%b5%d1%8f-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery.htm#comments Fri, 17 Jul 2009 14:33:42 +0000 admin http://webduty.ru/?p=691 В этой статье я покажу вам как с помощью библиотеки jQuery без лишних телодвижений можно сделать отличную галерею. Для её создания мы будем использовать замечательный плагин GalleryView. Чем же хорош этот плагин? Дело в том, что он обладает нужным функционалом, при очень простой установке на веб-страницу. Кроме того, эта jquery галерея отлично интегрируется с CMS.
Gallery Anatomy
А также этот плагин поддерживает темы, причем в архив уже включены 2 стандартные темы: для светлого и тёмного дизайна. GalleryView требует jQuery Timers и jQuery Easing.
Посмотреть пример Cкачать GalleryView

Автор плагина – Джек Андерсон
Cайт плагина

Простой пример

Для начала подключим нужные файлы jquery галереи:

<link type="text/css" rel="stylesheet" href="galleryview.css" /> 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script> 
<script type="text/javascript" src="jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script>

Затем зададим параметры галереи:

$('#photos').galleryView({
	panel_width: 800,
	panel_height: 300,
	frame_width: 100,
	frame_height: 100,
});

Все другие параметры не обязательны. С ними вы можете поэкспериментировать самостоятельно.

Задаём слой, в котором будет отображаться jquery галерея.

<div id="photos" class="galleryview">
	...
</div>

Внутри него размещаем несколько div’ов. По одному на фотографию. Структура такого вида:

...
<div class="panel">
	<img src="URL фотографии" />
	<div class="panel-overlay">
		<h2>Название фотографии</h2>
		<p>
                  Описание фотографии
		</p>
	</div>
</div>
...

Сразу после нескольких таких div’ов, не закрывая главный слой (id=”photos”), вставляем список вида:

<ul class="filmstrip">
	<li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
	<li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li>
	<li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
	<li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li>
	<li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
	<li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>
	<li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li>
	<li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li>
</ul>

Список состоит из уменьшенных изображений соответствующих фотографий.
Вот и всё! Если всё сделать правильно, должна получиться примерно вот такая галерея.

Темы

Повторюсь, в комплекте плагина включены 2 стандартные темы. Но вы можете создавать и свои собственные. Тема состоит из шести изображений в формате PNG.
nav-dark
Просто создайте изображения с соответствующими именами файлов и размерами:

  • pointer.png and pointer-down.png – 19 x 10
  • next.png – 22 x 22
  • prev.png – 22 x 22
  • panel-nav-next.png and panel-nav-prev.png – 42 x 42

Создайте папку в папке themes, обзовите её как-нибудь и скопируйте ваши файлы в неё. Затем в настройках вашей галереи установите в параметре nav_theme название вашей папки.

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

Параметр Тип значения По умолчанию Описание
panel_width integer (pixels) 400 Ширина галереи
panel_height integer (pixels) 300 Высота галереи
frame_width integer (pixels) 80 Ширина уменьшенной фотографии
frame_height integer (pixels) 80 Высота уменьшенной фотографии
overlay_height integer (pixels) 70 Высота панели описания
overlay_font_size any font size value (px,em,pt,%) ‘1em’ Размер шрифта в описании
overlay_position ‘top’ | ‘bottom’ ‘bottom’ Расположение панели описания
filmstrip_position ‘top’ | ‘bottom’ ‘bottom’ Расположение панели с уменьшенными изображениями фотографий
transition_speed jQuery time value (200,’slow’,etc) 400 Скорость анимации
transition_interval jQuery time value (200,’slow’,etc) 6000 Интервал между сменой фотографий (0 = без автоматической смены)
overlay_opacity float 0.0 – 1.0 0.6 Прозрачность панели описания
overlay_color jQuery color value (rgb,hex,name) ‘black’ Цвет фона панели описания
background_color jQuery color value (rgb,hex,name) ‘black’ Цвет фона галереи
overlay_text_color jQuery color value (rgb,hex,name) ‘white’ Цвет текста панели описания
caption_text_color jQuery color value (rgb,hex,name) ‘white’ Цвет текста названий фотографий в предпросмотре
border css value (e.g. ‘3px dotted #343434′) ‘1px solid black’ Ширина, стиль и цвет рамки галереи
nav_theme (’light’ | ‘dark’) ‘light’ Цвет кнопок навигации
easing jQuery easing value (’linear’,’swing’,etc) ’swing’ Тип анимации
show_captions boolean false Определяет, отображать или нет подписи к фотографиям
fade_panels boolean true Определяет, исчезать панели во время переходов или переключаться моментально.
pause_on_hover boolean false Если true, то анимация останавливается когда указатель наведён на панель.

Посмотреть пример Cкачать GalleryView

Progg it

]]> http://webduty.ru/%d0%b2%d0%b5%d0%bb%d0%b8%d0%ba%d0%be%d0%bb%d0%b5%d0%bf%d0%bd%d0%b0%d1%8f-%d0%b3%d0%b0%d0%bb%d0%bb%d0%b5%d1%80%d0%b5%d1%8f-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery.htm/feed 18 Построение диаграмм и графиков с помощью jQuery Visualize http://webduty.ru/%d0%bf%d0%be%d1%81%d1%82%d1%80%d0%be%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b4%d0%b8%d0%b0%d0%b3%d1%80%d0%b0%d0%bc%d0%bc-%d0%b8-%d0%b3%d1%80%d0%b0%d1%84%d0%b8%d0%ba%d0%be%d0%b2-%d0%b8%d0%b7-html-%d1%82%d0%b0.htm http://webduty.ru/%d0%bf%d0%be%d1%81%d1%82%d1%80%d0%be%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b4%d0%b8%d0%b0%d0%b3%d1%80%d0%b0%d0%bc%d0%bc-%d0%b8-%d0%b3%d1%80%d0%b0%d1%84%d0%b8%d0%ba%d0%be%d0%b2-%d0%b8%d0%b7-html-%d1%82%d0%b0.htm#comments Wed, 08 Jul 2009 12:13:28 +0000 admin http://webduty.ru/?p=567 jQuery Visualize Plugin это, вероятно, самый простой способ построения графиков и диаграмм из таблицы HTML с помощью HTML5 canvas. Плагин достаточно гибко настраивается. Кроме того jQuery Visualize полностью протестирован в IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 и 4, Opera 9.
cover
Посмотреть пример Cкачать архив

Создать график или диаграмму с помощью jQuery Visualize очень просто. Для начала вам нужно создать таблицу, используя заголовки столбцов (это важно).
Например так:

<table >
	<caption>Стоимость услуг веб-студий моего города</caption>
	<thead>
		<tr>
			<td></td>
			<th>сайт-визитка</th>
			<th>корпоративный сайт</th>
			<th>интернет-магазин</th>
			<th>поддержка</th>
			<th>хостинг</th>
			<th>продвижение</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Моя студия</th>
			<td>10</td>
			<td>30</td>
			<td>70</td>
			<td>5</td>
			<td>3</td>
			<td>10</td>
		</tr>
		<tr>
			<th>Р*МЕДИЯ</th>
			<td>19</td>
			<td>50</td>
			<td>90</td>
			<td>6</td>
			<td>3</td>
			<td>15</td>
		</tr>
		<!-- и так далее -->
	</tbody>
</table>

Подключить нужные файлы:

<link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
 <!--[if IE]>
  <script type="text/javascript" src="excanvas.compiled.js"></script>
 <![endif]-->
<script type="text/javascript" src="js/visualize.jQuery.js"></script>
<script type="text/javascript" src="js/editabletable.js"></script>

и вызвать метод visualize() например так:

$('table').visualize();

Ниже таблицы будет построен соответствующий график/диаграмма. Кроме того ячейки таблицы можно редактировать.

Плагин разработан Filament Group.
Дополнительную информацию о jQuery Visualize вы можете найти
на сайте плагина.

Посмотреть пример Cкачать архив

]]> http://webduty.ru/%d0%bf%d0%be%d1%81%d1%82%d1%80%d0%be%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b4%d0%b8%d0%b0%d0%b3%d1%80%d0%b0%d0%bc%d0%bc-%d0%b8-%d0%b3%d1%80%d0%b0%d1%84%d0%b8%d0%ba%d0%be%d0%b2-%d0%b8%d0%b7-html-%d1%82%d0%b0.htm/feed 6 Список реально полезных плагинов для jQuery http://webduty.ru/%d1%81%d0%bf%d0%b8%d1%81%d0%be%d0%ba-%d0%bd%d1%83%d0%b6%d0%bd%d1%8b%d1%85-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd%d0%be%d0%b2-%d0%b4%d0%bb%d1%8f-jquery.htm http://webduty.ru/%d1%81%d0%bf%d0%b8%d1%81%d0%be%d0%ba-%d0%bd%d1%83%d0%b6%d0%bd%d1%8b%d1%85-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd%d0%be%d0%b2-%d0%b4%d0%bb%d1%8f-jquery.htm#comments Thu, 02 Jul 2009 13:25:35 +0000 admin http://webduty.ru/?p=488 jQuery в настоящее время является лучшей JavaScript-библиотекой. Она позволяет разрабатывать веб-приложения с достаточно быстрой скоростью, избавляя разработчика от рутины. Кроме того для jQuery существует огромное количество всевозможных плагинов, которые улучшают функционал этой замечательной библиотеки. О них и пойдет речь в этой статье. cover
Я составил список плагинов и расширений, которые могут быть полезны для веб-разработчиков пишущих на Javascript, используя jQuery. Конечно же, я не претендую на полноту списка, естественно существуют и другие очень полезные плагины, которые здесь не представлены. И если вы активно используете плагин, которого нет в моём списке, пожалуйста напишите его описание в комментариях в этой статье, и ссылку на сайт плагина. Заранее благодарен.
В свою очередь я сам буду дополнять данный список.

AJAX

  • PeriodicalUpdater
    Добавляет возможность управлять загрузкой контента, подгружать контент через определённые интервалы. Пытается оптимально нагружать браузер, дабы избежать его затупления (такое бывает).
  • BlockUI
    Позволяет имитировать синхронность поведения про использовании AJAX (технология AJAX использует асинхронную передачу данных), он не позволит пользователю что-либо делать со страницей (или с частью страницы), пока подгружаются данные.
  • Ajax Manager
    Позволяет более гибко управлять AJAX-запросами и ответами (например прерывание запроса).

Анимация & Эффекты

  • Color Animation
    Осуществляет цветовую анимацию в jQuery 1.2+.
  • Background Position Animation
    Осуществляет анимацию, использую позицию фона.
  • CSS Class Based Animations
  • ScrollTo
    Плавный скроллинг к элементу страницы.
  • jqDock
    Этот jQuery-плагин позволяет легко создавать меню в стиле MacOS (или эффект “fish eye”), превращая обычные изображения в расширяющуюся область, вертикальную или горизонтальную. jqDock хорошо работает во всех основных браузерах, включая Internet Explorer 6.
  • Very Simple Tooltip (mi)
    Реализует всплывающие подсказки.

Графики & диаграммы

  • jqPlot
    Один из лучших плагинов для построения всевозможных графиков и диаграмм.
  • Flot
    Рисует графики произвольных наборов данных налету на стороне клиента. Работает практически во всех браузерах, в т.ч. IE6. Версия для IE8 в данный момент находится в разработке. Очень прост в использовании.
  • Google Charts
    Рисует диаграммы Google API

Дизайн

  • Corner
    C помощью этого плагина нужные блоки обретают оригинальные углы, причем углы очень разные: скруглённые, конические, вырезанные, перекушеные. А какие ещё вы знаете виды углов? Этот плагины может делать любые из них с помощью одной строчки. Например $(this).corner(“30px”) сделает углы скруглёнными с радиусом 30px.
  • Переключатель стилей на jQuery

Работа с файлами

  • Preload CSS Images
    Автоматически подгружает все изображения, использованные в файлах CSS. Например изображения пунктов меню при наведении. Очень удобно.
  • Lazy Load
    Полная противоположность предыдущему плагину. Lazy Load задерживает загрузку изображений на веб-страницах. Это применяется для длинных страниц. Изображения подгружаются по мере скроллинга. Т.е. как только изображение становится видимым пользователю, оно начинает подгружаться. Например я посоветовал бы этот плагин сайту tema.ru в разделе путешествий. Там у Артемия Лебедева очень длинные страницы с фотографиями мест, которые он посетил. Всё бы круто, но трафик льётся очень быстро, т.к. фотографии качественные.
  • jCrop
    Плагин, который позволяет отрезать кусок изображения “налету”.
  • File Uploader
    Очень удачная реализация загрузчика файлов и минимальным php-кодом и удобным интерфейсом.
  • Uploadify
    Ещё один загрузчик файлов. Позволяет загружать одновременно несколько файлов.

Шрифты

  • FontAvailable
    Проверяет, поддерживает ли браузер тот или иной шрифт.
  • FontAvailable
    Позволяет использовать текстовые эффекты, такие как тень, градиент, блик и др.

Таблицы

  • Tablesorter
    Сортирует элементы таблицы.
  • Colorize
    Раскрашивает таблицы, умеет достаточно много, например подсвечивать строчку/столбец при наведении.

Формы

  • Masked Input
    Позволяет применять маски для полей ввода, например __/__/____ для даты.
  • Really Simple Validation
    Самый простой способ проверки форм “налету”. Плагин очень прост в использовании.
  • Editable
    Позволяет преобразовать любой тег (span, div, p и др.) в поля ввода текста, пароля, выпадающий список. Т.е. делает редактируемым контент нужный блок страницы.
  • FormClear
    Тупо очищает поля формы.
  • TextArea Resizer
    Этот плагин позволяет изменять размеры полей ввода текста.

Аудио & Видео

  • jMedia
    Позволяет быстро и просто вставить медиа-данные на сайт.
  • jQuery Media Plugin
    Заменяет ссылки на медиа-файл в нужном блоке на слой с объектом. Например вместо ссылки на видео-ролик, будет слой с самим роликом.
  • Page Sound Enabler
    Кроссбраузерный скрипт, включающий фоновый звук на веб-странице, который терпеть не могут большинство пользователей.

Карты

  • jMaps
    Представляет из себя простой API для создания и управления несколькими картами Google на одной странице.

Клавиатура & Мышь

  • ShortKeys
    Плагин даёт возможность использовать “горячие клавиши”.
  • Right Mouse
    Позволяет перехватывать событие нажатия правой кнопки мыши. Существует возможность отключить контекстное меню браузера, например для вызова собственного меню.
  • Mouse Wheel
    Добавляет поддержку колеса прокрутки мыши. Просто пишите $(‘div.mousewheel_example’).mousewheel(fn); и функция fn исполняется при прокрутке колеса.

RSS

  • jFeed
    Парсер RSS/ATOM фидов. Поддерживает RSS 0.91, 0.92, 1.0, 2.0 и Atom 1.0 фиды.
  • RssReader
    Позволяет добавить rss-канал на ваш сайт используя AJAX.

Разное

  • jQuery Alert Dialogs
    Набор методов, которые обеспечивают вызов нестандартных алертов. Примеры
  • Sortables
    Свободное перемещение элементов по странице

Пока всё. Продолжение следует.

]]> http://webduty.ru/%d1%81%d0%bf%d0%b8%d1%81%d0%be%d0%ba-%d0%bd%d1%83%d0%b6%d0%bd%d1%8b%d1%85-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd%d0%be%d0%b2-%d0%b4%d0%bb%d1%8f-jquery.htm/feed 4 jCrop – jQuery-плагин для кадрирования изображений http://webduty.ru/jcrop-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd-%d0%b4%d0%bb%d1%8f-%d0%ba%d0%b0%d0%b4%d1%80%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f-%d0%b8%d0%b7%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd.htm http://webduty.ru/jcrop-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd-%d0%b4%d0%bb%d1%8f-%d0%ba%d0%b0%d0%b4%d1%80%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f-%d0%b8%d0%b7%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd.htm#comments Wed, 01 Jul 2009 11:18:18 +0000 admin http://webduty.ru/?p=480 Jcrop – это быстрый и лёгкий способ кадрирования изображений на вашем сайте. Например, его можно использовать на сайтах знакомств для кадрирования фотографий, в различных админках, для быстрого редактирования фотографий продукции, в фотогалереях и т.п.
cover
jCrop работает во всех современных браузерах (Firefox 2 +, Safari 3 +, Opera 9.5 +, Google Хром 0,2 +, Internet Explorer 6 +). Он был внедрён во многие плагины для различных CMS, в том числе Wordpress, Drupal, Textpattern, Facebook и т.д.
Более подробную информацию вы можете получить на сайте разработчика.

Посмотреть пример Cкачать архив

]]> http://webduty.ru/jcrop-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd-%d0%b4%d0%bb%d1%8f-%d0%ba%d0%b0%d0%b4%d1%80%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f-%d0%b8%d0%b7%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd.htm/feed 4 Эффект лупы с помощью jqZoom http://webduty.ru/%d1%8d%d1%84%d1%84%d0%b5%d0%ba%d1%82-%d0%bb%d1%83%d0%bf%d1%8b-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jqzoom.htm http://webduty.ru/%d1%8d%d1%84%d1%84%d0%b5%d0%ba%d1%82-%d0%bb%d1%83%d0%bf%d1%8b-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jqzoom.htm#comments Wed, 10 Jun 2009 14:39:56 +0000 admin http://webduty.ru/%d1%8d%d1%84%d1%84%d0%b5%d0%ba%d1%82-%d0%bb%d1%83%d0%bf%d1%8b-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jqzoom.htm jqZoom – скрипт, использующий jQuery, реализующий эффект лупы для ваших изобращений. Его можно использовать в каталоге продукции, для отображения каких-либо карт, в галлереях фотографий и т.п. jqZoom лёгок в использовании и работает на всех основных браузерах.

cover

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

Небольшой пример

Для начала подключим необходимые .js и .css файлы:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<link href="jqzoom.css" type="text/css" rel="stylesheet" />

Используем следующую разметку:

<div id="content" style="margin-top: 100px; margin-left: 100px">
 <a class="jqzoom" title="kawasaki" href="kawasakigreen.jpg">
  <img title="kawasakigreen" style="border: #666 1px solid;" 
                                          src="kawasakigreen_small.jpg" /> 
 </a> 
</div>

В данном случае: kawasakigreen.jpg – исходное изображение, а kawasakigreen_small.jpg – уменьшенное. Класс jqzoom нам нужен для того, чтобы указать скрипту, с каким изображением работать. Для этого также можно использовать и идентификатор.

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

$(document).ready(function(){
	$('.jqzoom).jqzoom();
});

Скрипт разработан Марко Рензи. Подробную документацию и примеры вы можете найти на сайте jqZoom

Посмотреть пример Cкачать архив

]]> http://webduty.ru/%d1%8d%d1%84%d1%84%d0%b5%d0%ba%d1%82-%d0%bb%d1%83%d0%bf%d1%8b-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jqzoom.htm/feed 2 jqPlot – jQuery плагин для построения графиков http://webduty.ru/jqplot-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd-%d0%b4%d0%bb%d1%8f-%d0%bf%d0%be%d1%81%d1%82%d1%80%d0%be%d0%b5%d0%bd%d0%b8%d1%8f-%d0%b3%d1%80%d0%b0%d1%84%d0%b8%d0%ba%d0%be%d0%b2.htm http://webduty.ru/jqplot-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd-%d0%b4%d0%bb%d1%8f-%d0%bf%d0%be%d1%81%d1%82%d1%80%d0%be%d0%b5%d0%bd%d0%b8%d1%8f-%d0%b3%d1%80%d0%b0%d1%84%d0%b8%d0%ba%d0%be%d0%b2.htm#comments Sat, 06 Jun 2009 11:10:16 +0000 admin http://webduty.ru/?p=216 jqPlot это jQuery-плагин, который строит различные виды диаграмм. jqPlot гибко настраиваемый, предлагает многочисленные варианты схемы стилей и форматирования. Этот плагин работает в IE 6 +, Firefox, Safari и Opera.
cover3
Покажем работу плагина на примере.

Подключаем наеобходимые js-файлы:

<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>  
<script type="text/javascript" src="jquery.jqplot.js"></script>

Задаём необходимые данные и настройки:

  $(document).ready(function(){      
    var l1 = [2, 2, 3, 9, 3];
    var l2 = [8, 1, 5, 6, 8];
    plot1 = $.jqplot('chart', [l1, l2], {
        stackSeries: true,
        grid:{background:'#fefbf3', borderWidth:1},
        seriesDefaults: {fill: true, showMarker: true, shadow: true},
        axes:{xaxis:{pad:1.0, numberTicks:5}},
        series:[{}, {color:'rgba(200, 45, 120, 0.5)'}]
    });
  });

HTML-разметка:

<style type="text/css"> 
  margin-top:20px;  
  margin-left:20px; 
  width:400px;  
  height:270px;
</style>
<div id="chart">
</div>

В итоге мы получим следующий график:
result
Посмотреть примеры Cкачать архив

]]> http://webduty.ru/jqplot-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd-%d0%b4%d0%bb%d1%8f-%d0%bf%d0%be%d1%81%d1%82%d1%80%d0%be%d0%b5%d0%bd%d0%b8%d1%8f-%d0%b3%d1%80%d0%b0%d1%84%d0%b8%d0%ba%d0%be%d0%b2.htm/feed 1 Меню в стиле Mac OS с помощью jQuery-плагина jqDock http://webduty.ru/%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b2-%d1%81%d1%82%d0%b8%d0%bb%d0%b5-mac-os-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd%d0%b0-jqdock.htm http://webduty.ru/%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b2-%d1%81%d1%82%d0%b8%d0%bb%d0%b5-mac-os-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd%d0%b0-jqdock.htm#comments Fri, 05 Jun 2009 16:26:46 +0000 admin http://webduty.ru/?p=192 Это jQuery-плагин позволяет легко создавать меню в стиле MacOS (или эффект “fish eye”), превращая обычные изображения в расширяющююся область, вертикальную или горизонтальную. jqDock хорошо работает во всех основных браузерах, включая Internet Explorer 6.
cover1
JqDock несложен в применении, разобраться сможет даже новичок. Всё идеально настраивается, в том числе: выравнивание, скорость анимации, размер изображений, этикетки и т. д.
Плагин разработкан Роджером Барретом. Дополнительную информацию вы можете найти на сайте плагина jqDock.

]]> http://webduty.ru/%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b2-%d1%81%d1%82%d0%b8%d0%bb%d0%b5-mac-os-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd%d0%b0-jqdock.htm/feed 3 Делаем кнопку как в Skype с помощью jQuery http://webduty.ru/%d0%b4%d0%b5%d0%bb%d0%b0%d0%b5%d0%bc-%d0%ba%d0%bd%d0%be%d0%bf%d0%ba%d1%83-%d0%ba%d0%b0%d0%ba-%d0%b2-skype-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery.htm http://webduty.ru/%d0%b4%d0%b5%d0%bb%d0%b0%d0%b5%d0%bc-%d0%ba%d0%bd%d0%be%d0%bf%d0%ba%d1%83-%d0%ba%d0%b0%d0%ba-%d0%b2-skype-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery.htm#comments Tue, 02 Jun 2009 13:11:57 +0000 admin http://webduty.ru/?p=89 Skype
Если вы пользуйтесь Skype, я уверен, что вы заметили анимированные кнопки для добавления большего числа людей. При нажатии на нее значок слева “прыгает” по несколько раз. Мне нравится эта анимация. Я покажу вам, как создать ту же кнопку с помощью jQuery и CSS.
Посмотреть пример Cкачать архив
Я говорю об вот этой кнопке:

image2
Задача здесь очень простая – я хочу иконку, которая прыгает несколько раз при наведении на неё курсора (в Skype этот значок прыгает если на него нажать, но я думаю прыгать ему лучше при событии hover).
Итак, кнопка будет состоять из изображения и текста.

<a class="button" href="#">
     <img src="download.png" alt="" />Скачать</a>

Зададим стили для кнопки. Ключевым является то, что иконка располагается абсолютно относительно-расположенной ссылки. Подгоним позицию кнопки так, чтобы её тень была внутри блока ссылки. Обратите внимание на то, что в Firefox кнопка будет с закруглениями. (благодаря свойству -moz-border-radius- ).

.button {
     padding: 4px 10px 3px 30px;
     border: solid 1px #8AB134;
     position: relative;
     cursor: pointer;
     background-image: url('images/bkg.png' );
     background-repeat: repeat-x;
     display: inline-block;
     font-size: 11px;
     height: 16px;
     text-decoration: none;
     color: #40740D;
     -moz-border-radius-bottomleft: 5px;
     -moz-border-radius-bottomright: 5px;
     -moz-border-radius-topleft: 5px;
     -moz-border-radius-topright: 5px;
 } 
.button img {
     position: absolute;
     top: -7px;
     left: -8px;
     border: none;
 } 
.button:hover {
     color: #8AB134;
 }

Теперь займемся анимацией. Нам нужно сделать 3 скачка кнопки – один большой и два маленьких. В первый прыжок иконка будет подниматься на 6px, во второй на 3px и в последний прыжок на 2px. После каждого скачка иконка вернётся в своё первоначальное состояние.

$(document).ready(function(){
    $(".button").hover(function(){
        $(".button img")
            // 1 jump 
            .animate({top:"-13px"}, 200).animate({top:"-7px"}, 200)
            // 2 jump
            .animate({top:"-10px"}, 100).animate({top:"-7px"}, 100)
            // 3 jump
            .animate({top:"-9px"}, 100).animate({top:"-7px"}, 100);
    });
});

Код прекрасно работает в Firefox, Safari и IE7+. Меня не волнует работает ли он в IE6.
Посмотреть пример Cкачать архив

]]> http://webduty.ru/%d0%b4%d0%b5%d0%bb%d0%b0%d0%b5%d0%bc-%d0%ba%d0%bd%d0%be%d0%bf%d0%ba%d1%83-%d0%ba%d0%b0%d0%ba-%d0%b2-skype-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery.htm/feed 7