jQuery: учимся создавать плагин: базовый плагин для аккордеона - PullRequest
Новая
       6

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

0 голосов
/ 11 марта 2012

Еще раз спасибо всем, кто потратил немного своего времени, помогая мне немного понять jQuery, это очень ценится.

Я пытаюсь прилагать усилия и медленно продвигать свой jQuery. Так что я довольно активно работал в stackoverflow, чтобы задавать вопросы о проблемах, с которыми я сталкиваюсь .. спрашиваю " почему " очень много ... Я очень доволен jQuery и использую его ежедневно. Однако всегда есть чему поучиться и пробелы в моих знаниях восполнить. Поэтому я решил попробовать сделать плагин jQuery - что-то очень простое, что я могу расширить как личный проект, чтобы я мог научиться делать что-то на руках.

Итак, я решил сделать очень простой аккордеонный плагин . jsFiddle текущего аккордеона 

(function($){
//The current script for the plugin..
    $.fn.simpleAccordion = function() { 
        $("li a").live("click", function(e){
            e.preventDefault();
            $("li div").slideUp(200);
            $(this).next(':hidden').slideDown(200);
        });
    };
})(jQuery);

ПЕРВАЯ ПРОБЛЕМА: Я читал документы jQuery Плагины / авторинг . Первая проблема, с которой я столкнулся, в документах: состояния $ (this) обычно используются неправильно .. и должны иметь значение "this.fadeIn ('normal', function () {..." - 

 $(this).next(':hidden').slideDown(200);

Использую ли я "this" в правильном контексте в строке выше? В настоящее время я понимаю, что «this» ссылается на селектор, на который был вызван плагин .. так ul # accordion .. тогда почему он не работает без $ ("") .. 

$(document).ready(function(){
    $("ul#accordion").simpleAccordion();
});

ВТОРАЯ ПРОБЛЕМА: Мне кажется, я сам нашел решение этой проблемы (см. Ниже) Я тестировал то, что уже сделал, и понял, что если я добавлю тег / ссылку ancor в текстовое содержание моего аккордеона, эта ссылка также откроет и закроет панели. Я попытался изменить селектор на функцию щелчка на 

$("li a:first-child").live("click",..

чтобы убедиться, что только к первому тегу ancor, идущему по нажатой ссылке, было прикреплено событие ... но не повезло ... Я не хочу, чтобы каждый тег внутри li запускал функции слайдов, я хочу, чтобы они оставались в одиночку ... так что лучше было бы дать имя класса или использовать более конкретный селектор? : P

Мне кажется, я нашел правильное решение второго вопроса (ниже) 

$("li > a:first-of-type").live("click", function(e){

Еще раз спасибо, я знаю, это было немного многословно!

jsFiddle текущего аккордеона

Ответы [ 2 ]

1 голос
/ 11 марта 2012

Позвольте мне немного рассказать вам об этом.

Сначала, когда вы сделаете это: 

$.fn.foo = function () {
    // some code
}

Это позволит вам сделать это: 

$('div').foo();

Ключевым моментом здесь является то, что внутри foo переменная this будет эквивалентна выбору, над которым действует функция.В этом случае 

this === $('div')

Поэтому я не вижу смысла выбирать совершенно другой выбор внутри вашей функции плагина (то есть $('li a')).

Вы, вероятно, имеете в виду это так: 

$.fn.simpleAccordion = function () {
    var stuff = this.find('li a');
    // use your stuff
    return this; // for chaining
};

Во-вторых (и полностью вне контекста вопроса), прекратите использовать .live().Мало того, что это не имеет смысла (вы заставляете свою функцию плагина действовать на что-то, что похоже, что она уже должна существовать), это, вероятно, плохая практика.Вместо этого используйте .on() или, если вы используете jQuery pre-1.7, .delegate().Но сначала убедитесь, что это не .bind(), что вы действительно хотите (что я очень подозреваю).

Чтобы ответить на ваш второй вопрос, это действительно немного расплывчато.Но по опыту почти всегда есть способ выбрать (и, следовательно, изменить / использовать) элементы HTML в вашем DOM без необходимости помечать их классами декоратора так же, как вы использовали бы для их идентификации / пометки.

Если :first-child запускает анимацию на большем количестве элементов, чем вы хотели бы, я подозреваю, что вы используете неправильный селектор / ы или недостаточно ограничиваете вызовы методов jQuery (например,если вы неправильно используете this или выбираете снова внутри функции плагина - см. пункт 1 выше).

Без HTML-разметки я не могу указать вам, что вам следуетулучшить хотя.

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

1 голос
/ 11 марта 2012

за ваш первый вопрос: это в контексте обратного вызова события всегда является элементом, который вызвал событие. Чтобы использовать всю магию jQuery, этот элемент должен быть расширен на $ (this). Только тогда это jQuery-объект. В вашем плагине вы не должны использовать $("li div"), потому что это даст вам все div в li на вашей полной странице. Вы хотите только те, кто в текущем контексте. Поэтому используйте $(this), а затем parent (), find () и т. Д., Чтобы перейти вверх или вниз в DOM.

На вашем плагине: Продолжайте читать в Плагине-Обучающем. Вы должны изменить свой код, чтобы сделать его настоящим плагином. В этом состоянии вы разрываете цепь. что-то вроде $('.element).simpleAccordion().data('foo','bar') не будет работать, потому что вы не вернете объект снова.

И: не используйте live(), что устарело. посмотрите на .on() в документах. http://api.jquery.com/on/

надеюсь, что это поможет

...