Спонсор поста:

В этом блоге уже был пост про скругленные углы с jQuery, но есть и другой вариант.
Читать полностью »

Популярность: 14%

Искал одно, но нашел другое. Как всегда =)

Плагин Drop Shadow требует в зависимости jquery.dimensions.js и позволяет делать тени почти ко всему.

Документация на плагин находится в самом тексте скрипта, что я считаю не очень правильно, т.к. увеличивает размер.
Использование очень простое:

$(селектор).dropShadow(опции);

Опции могут быть следующими:
left - смещение тени по горизонтали
top - смещение тени по вертикали
blur - задает размытие. Большие значения не интересны.
color - цвет тени
opacity - затененность
swap - меняет цвет предмета, от которого тень. Не понял предназначения данного элемента.

Поигравшись с параметрами, я понял, что значения по умолчанию самые хорошие.

Так же можно перерисовать тень и убрать.
Например, перерисовать:

$(selector).redrawShadow();

или выключить:

$(selector).removeShadow();

Еще можно получить существующий id тени для дальнейших операций с ней:

$(selector).shadowId();

Пример использования опций, взятый с сайта автора:

$(".Title span").dropShadow({left: 12, top: 15, blur: 4, opacity: 0.4});

Домашняя страница, одновременно демонстрация возможностей: http://eyebulb.com/dropshadow/
Скачать плагин: jquery.dropshadow.js
Необходимая зависимость: jquery.dimensions.js

Популярность: 53%

Источник

Иногда у нас складывается впечатление, что задача слишком сложна, поэтому мы просто игнорируем ее выполнение.
Таково было и мое мышление, когда я думал о разработке плагина для jQuery. Я всегда думал, что часть кода, которую я разработал, будет иметь больше смысла как плагин, но у меня просто не было времени, чтобы понять это.

В конце изучения о плагинах jQuery я вынужден был сказать: “И это все!?”. Оказывается, это до смешного легко, и я не знаю, почему я не делал это раньше.

Почему плагин?

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

$('.className').addClass('enabled').append('<a href="#">Click here</a>').click( func );

Берется каждый элемент с именем класса “className”, добавляется к нему новый класс с именем, прилагается некоторый HTML и задается перехватчик события “клик”. Когда вы разработаете плагин, у вас будет способность к вставке своих функций, в то же время сохраняя цепь.

Другая причина разрабатывать плагин jQuery – просто соответствовать идеалу jQuery. Идеал jQuery, на мой взгляд, - это HTML-элемент, который является королем. Это все о создании элементов, а также о выполнении действий с этими элементами.

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

Подход 1: Функция

В документации есть хороший пример функционального подхода.

jQuery.log = function(message) {
  if(window.console) {
     console.debug(message);
  } else {
     alert(message);
  }
};

В этом примере функция log была приложена к объекту jQuery. Вы можете потом вызвать это в вашем коде, используя jQuery.log(‘my message’) или $.log(‘my message’). Там нет сложностей или HTML-элементов (если вы не добавляли это в ваш код).

Подход 2: метод

Этот подход метода дает вам доступ к текущему набору HTML-элементов, и позволяет вам продолжать цепочку. Опять-таки, код очень простой … добавьте новую функцию к jQuery.fn и убедитесь в работоспособности (возврате this).

jQuery.fn.newMethod = function(){
    return this;
};

Ключевое слово this относится к текущему объекту jQuery. У вас будет доступ к методам и функциям jQuery. Если Вам необходимо выполнить действия с каждым элементом, то вы можете сделать что-то подобное этому:

jQuery.fn.newMethod = function(){
    return this.each(function(){
        alert(this);
    });
};

Ключевое слово this в пределах внутренней функции относится к текущему HTML-элементу, который не будет иметь доступа к методам jQuery (хотя, это так же легко обернуть в объект jQuery, как и вернуть эти методы назад).

Не используйте $

Разрабатывая плагин, вы захотите избежать использование привычных обозначений доллара, $, избежать каких-либо конфликтов. jQuery имеет бесконфликтный режим для превращения псевдонима время от времени. Если хотите, вы можете использовать псевдоним функции jQuery внутри вашего плагина. Он будет самостоятельным и избегать каких-либо внешних конфликтов.

Перейти в

Посмотрите документацию jQuery относительно плагинов для получения подробной информации. Иногда самое трудное - это просто сделать первый шаг!

Популярность: 56%

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

Josh Nathanson представил интересный jQuery плагин HeatColor, который изменяет цвета элементов согласно их значениям.

Читать полностью »

Популярность: 44%

Оригинал

После вдохновения от Plotr и PlotKit разработчик Ole Laursen захотел привнести такую же функциональность в jQuery. Поэтому он создал свой jQuery плагин и назвал его Flot. Пока он имеет немного странное название, но уже имеет несколько внушительных способностей:

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

Вот демонстрации работы плагина Flot.
Код плагина находится на Google Code.

Популярность: 39%

Сайт плагина
Плагинчик будет полезен тем, кто хочет использовать на своих сайтах поле для ввода пользователями больших объемов текста. Например: ввод сообщения на форум, в блог и т.д.

Плагин поддерживает html, wiki и простую текстовую разметку.
Я рассмотрю html.
Читать полностью »

Популярность: 61%

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

Возьмем в качестве примера предыдущий пост об окнах. Получается, что <div>, в котором содержится то, что должно быть в окне видно на странице.

Делаем:
Открываем main.js и вставляем туда

$("div.TB_modal").hide();

Теперь при загрузке у нас содержимое div с классом TB_modal отображаться не будет.

Вот и всё.
В jquery всё просто и быстро.

Рекомендую посмотреть:
ThickBox 3 - Inline Content
InnerFade

Рад обсудить эту статью с Вами на форуме.

Популярность: 54%

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

Скачиваем и подключаем плагин:
Читать полностью »

Популярность: 71%

InnerFade маленький плагин для библиотеки jQuery. Он создан, чтобы можно было добавить любому элементу эффект растворения. Элемент может быть чем угодно: картинкой, списком, div’ом. Очень просто сделать newsticker, анимацию или слайдшоу с Вашим портфолио или рекламой.

Читать полностью »

Популярность: 70%