jQuery для продолжающих (с плагинами)

    jQuery — библиотека о которой в последнее время говорит практически каждый web-разработчик, верстальщик и дизайнер. Написанная с учётом CSS, она упрощает доступ к одному или нескольким DOM-элементам. Если вы ещё используете prototype, то можно использовать режим совместимости (правда не факт что у вас будут работать плагины). Стандартно доступ происходит благодаря функции $ или JQuery. Элементу можно добавить (.addClass) или отнять (.removeClass) CSS-класс. Если это input-элемент, то запись и чтение происходит в аттрибуты элемента (.attr). Внутренние элементы можно задать как через (.html).
    Кроме минимализма, ускоренности и CSS-селекторов библиотека мало чем по функциональности отличается от prototype, mootools. Она не расширяет родные JS-объекты, как это делает protype и существует в своём пространстве переменных, поэтому не конфликтует с другими библиотеками.


    Примеры


    Допустим надо сделать массовое удаление из списка (как в почте), для этого генерируется огромный список checkbox'ов, а что-бы их все их массово выделить можно создать глобальный checkbox

    Часто встаёт вопрос оповещения пользователей об удачном добавлении, ошибке или просто информации. Для этого можно использовать три CSS-класса, при этом элементы можно прятать по прошествии какого-то времени. Для этого используется конструкция, запускающаяся сразу после создания DOM-дерева (а не всего документа).
    $(document).ready(function() { setTimeout(function() {$('.error').fadeOut('slow');}, 20000);});

    Классы в javascript


    Несмотря на отличные библиотеки я не спешу бросать prototype.js и переходить на jQuery, потому что плохой код можно писать в любом языке и с любой библиотекой. Поэтому немного ликбеза. В Javascript можно делать объекты — очень удобно инициализировать, но они уникальны и их как массив использовать нельзя:
    var CommentControl={ // объект читающий все комментарии
    strURL:'/comments/read/', //обычный параметр
    Init:function(){ //декларация функции
    }}


    Классы в javascript инициализируются как обычные функции, внутри которых используется ключевое слово this.
    function CommentBox(ID){
    this.strURL='/comments/reply/'+ID; //параметр куда отсылать ответ
    this.ID=ID;
    this.reply=function(){
    alert("AJAX request goes here");
    }
    this.update=CommentControl.Read(ID); //ссылка на
    }

    Расширения и библиотеки


    Расширения (plugins) в основном написаны обычными разработчиками. В качестве более функциональных наработок с интерфейсом создаётся и jQuery UI, как аналог scriptaculous для prototype, куда входят перетаскиваемые и сортируемые элементы и виджеты для интерфейса — аккордеон, табы, слайдеры и тп. Ниже привожу свой список полезных плагинов + советую уделить внимание презентации об разработке с учётом отключённого javascript.

    Изображения



    • ThickBox — галерея, аналог lightbox
    • FancyBox — тоже галерея, мне меньше нравится
    • Galleria — галерея
    • Multimedia portfolio — горизонтальный слайдер с видео, картинками и звуком
    • imgAreaSelect — выделение области для вырезания
    • Анимированный блок изображений, подходит при портфолио и панорамах
    • Lightbox с более плавной анимацией чем в prototype + занавеска как положено.

    Таблицы


    • Flexigrid — табличные данные
    • InGrid — ajax'ная таблица, но не на json, а на открытом html'е. Впрочем компактном и без хаков.

    Формы

    • DamnSmallRTE — мелкий WYSIWYG
    • NiceForms — обрамляет input-ы div-элементами с закруглёнными углами, стилизует radio и checkbox'ы. Я правда предпочитаю более независимую версию nice forms.
    • FaceBook like — автоподсказки
    • JQuery select — конвертирует все select-элементы в UL, которые можно более гибко стилизовать
    • MaskedInput — маска заполнения input-форм

    • Закачка файлов с созданием iframe-элементов (напоминаю что в XHTML) они не валидные
    • Манипуляция checkboxами и radio с превращением в iphone-стиль
    • jGrow — размер textarea в зависимости от размера текста
    • jWYSIWYG — простейший редактор
    • ajaxForm — upgradит формы для использования пересылки через ajax
    • DatePicker — показывает генерирует календарик под указынными полями

    Layout

    • RoundedCorners — закруглённые углы при помощи генерации элемента canvas
    • CodaSlider — слайды в дополнение закладкам (tabs)

    Unobtrusive JavaScript with jQuery

    Оригинал

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 9

    • UFO just landed and posted this here
        +4
        ага, про меня как всегда забыли ;)
        0
        Я давно хотел бы попробывать использовать jQuery, но все никак не решался из-за отсутствия под рукой документации с примерами на русском. Ваш пост меня очень порадовал, спасибо!
          0
          я думаю, что Вам стоит погуглить, по jQuery есть достаточно материала на русском, например:
          http://anton.shevchuk.name/javascript/jq…
            0
            Спасибо. Никогда не хватало времени серьезно подойти к jQuery. Все время откладываю.
              0
              вообще-то и гуглить не надо, достаточно внимательней статью читать
                0
                на самом деле, гуглить надо всегда
            0
            jQuery - из разряда того, что гениально и что "Почему я до этого не догадался".

            А из примеров смотрим :

            60 More AJAX
            AjaxRain

            И ищем в Google "Best of JQuery"
              0
              думаю, будет полезно для тех, кто тоже считает jQuery рулезом ))
              http://www.w3school.ru/blog/web-developm…

              Only users with full accounts can post comments. Log in, please.