Блог вебмастера

В небольшой задаче сегодня нужно было осуществить сортировку таблиц. До этого решения были в лоб: поля ввода куда пользователь вводил порядковый номер строки, стрелочки «вниз-вверх». Всё бы ничего, но вот в сегодняшней задаче одно из условий требовало обновления кэша (строки таблиц) при каждом обращении к сортировке таблицы (изменил порядковый номер строки — обновляй кэш), поэтому «лобовые» методы не подошли. Да и пользователи системы часто жаловались на неудобства «лобных» методов сортировки.



«Погуглив», нашёл, на мой взгляд, отличное решение для jquery. Итак, плагин TableDnD.

На досуге немного закопался в дебри jquery и на страницах небеизвестного Smashing Magazine нашёл очень любопытную августовсую статейку. Удивлён, что столь полезный материал ещё не появился на Хабре. Исправляю несправедливость своей версией данной статьи.



Удобный модуль динамического поиска





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

— Демо

— Живой пример



Картинки ведут на туториалы.

Совсем недавно во время работы над очередным проектом мне понадобился простенький редактор bb кодов.

Немного подумав и поискав по гуглу, я написал свой, наверное проще уже некуда… Редактор требует для работы подключенной библиотеки Jquery.

Публикую его здесь, может кому нибудь пригодится.

Не первый раз сталкиваюсь с этой проблемой, но обычно выручали различные «костыли». Сейчас решил разобраться. Суть в следующем: если в анимации начальное и конечное значение в процентах и разных знаков, объект будет «дёргаться».



Пример:

<style type="text/css">

 #div-1 { position: absolute; width: 100px; height: 100px; background: grey; border: 1px solid black; top: 50%; margin-left: 50%; }

</style>



<script type="text/javascript">

 $(function(){

  $('#link-1').click(function(e){

   e.preventDefault();

   $('#div-1').animate({ left: '25%' });

  });

  $('#link-2').click(function(e){

   e.preventDefault();

   $('#div-1').animate({ left: '-25%' });

  });

 });

</script>



<div id="div-1" style="left: -25%;"></div>

<a href="#" id="link-1">Animate to 25%</a>

<a href="#" id="link-2">Animate to -25%</a>

Уже, наверное, месяц хвастаюсь своим коллегам своими успехами в написании тех или иных виджетов под jQuery-UI, но вот последнего шага к законченому и полезному продукту сделать не получалось, до сегодня…

Мы писали о jQTouch, основанном на jQuery iUI-подобном наборе средств, созданном Давидом Канедою (David Kaneda).



Сегодня они выпустили новую версию, которая улучшает их расширяемую систему нижеследующим:

• Улучшенный переход к 3D-перевороту (improved 3D flip transition)
• События обратного вызова (callback events) для всех переходов между страницами, сильных тычков (swipe events), изменений ориентации
• Прилагаются демонстрации: Часы, To-do, Главное функциональное демо
• Темы: в настоящее время есть темы Apple и jQTouch (серого цвета)

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

Хочу поделиться с уважаемым хабрасообществом простым способом привлечения внимания пользователя к незаполненным обязательным полям в форме (любой сложности и объема).



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



Далее представлен код обработчика клика по кнопке/ссылке «отправить» и пример простой формы.

Например, решили вы из странички на PHP (Kohana+Smarty) достучаться до Facebook API, получить от него список друзей (используя FQL, это такая разновидность SQL для запросов к табличкам Facebook), положить в MySQL, ну и через AJAX (jQuery+TableSorter+Trimpath JST) показать. Тут вам очень кстати попадается на глаза эта статья. Видимо, ничего не остаётся, кроме как читать дальше.

Наверное много кто знает что в jQuery есть набор стандартных событий, таких как Click или MouseDown и прочие, на которые можно повесить обработчики или возбудить с помошью функций click() mousedown() и прочих. Чуть поменьше людей знают, что те-же самые действия можно сделать с помощью функций bind() и trigger():

$(document).bind('click', function(){

  alert('It works!');

});



$(document).trigger('click');



* This source code was highlighted with Source Code Highlighter.

И наверное мало кто знает, что в функциях bind() и trigger() можно использовать свои собственные события. Зачем это нужно, я и хочу рассказать на примере.

Очень познавательный доклад на тему jQuery, который был озвучен на coffee’n'code в Киеве.

Рассказано о селекторах, кешировании (вернее о его отсутствии ) и множественных событиях.

Если бы автор не забыл слайды, было бы интереснее.