Pull to refresh

Comments 18

Я не претендую на новизну. Просто описал путь от «нужна такая штука» до готового решения.
Да, может кому пригодится. Например тому кто ни разу не писал JQ плагинов или только начал изучать эту библиотеку. Спасибо за активность
Разумно было бы выложить код на GitHub.
Рекомендую почитать про оптимизацию кода при работе с jQuery — на ваш смотреть страшно.
Обязательно прочитаю. Это мой первый опыт в написании плагинов, поэтому качество кода оставляет желать лучшего.
Завтра все организую. И на github выложу и демку сделаю.
Я конечно придираюсь, но такой код лично мне режет глаз:
if ($(this).data('collapsed') == true) { ...
var defaultHeight = $(control).css('defaultHeight');

Вы наверное хотели написать data вместо css?
o_O Мне иногда проще самому написать плагин, чем париться и искать что-то. Особенно такой простой, как спойлер).

> typeof method === 'object'
Используйте: Object.prototype.toString.call(method) == '[object Object]'
Иначе — например typeof new Number(2) или typeof new String('') вернёт 'object'.

И да, в код не особо вглядывался, но мне кажется, что всё это можно было написать покороче).
Это миф, что jquery кэширует объекты, возьмем самый большой кусок кода и увидим:

$(this) — 19 раз (где-то разные контексты, но смысл понятен, каждый такой селектор дергает DOM)

var spoiler = $(this).parent(); — он уже jquery объект, а Вы его хотите ещё сильнее завернуть $(spoiler) аж 10 раз

var Control = $(this).find('.spoilerControl'); — такая же история $(Control)
$('.toggler').click(function(e){
    var $this = $(this);
    e.preventDefault();
    $($this.attr('href')).slideToggle();
});


И HTML:

<a class="toggler" href="#spoiler">Показать то, что скрыто</a>
<div id="spoiler">
    Спрятанный контент
</div>


Вот и весь спойлер. У вас же получилось ненамного меньше, чем у того же jQUI
Понимаю, что тема статьи скорее о создании плагина в целом чем о описанном плагине, но…
В сторону bootstrap не смотрели? Есть там такой плагин collapse.

Во-первых, он должен уметь скрывать/раскрывать блоки с информацией.

Умеет.

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

Кликабельная полоса создается с помощью разметки и css и видна еще до момента загрузки джаваскрипта. Позволяет использовать не только текст, но и любой другой контент.

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

Управляется с помощью css, что дает преимущество изначально скрытого или открытого контента еще до загрузки джаваскрипта.

Ну и на вкусненькое, пусть будет анимация открытия/закрытия с возможностью отключения.

Умеет.

Кроме того можно подключить с помощью data-api(не нужно писать ни строчки джаваскрипта), не зависит от сторонних библиотек кроме jquery(можно даже поключить отдельно от других bootstrap плагинов), lazy-load если подключать через data-api — не создается объект до первого клика по триггеру, возможно построить на его основе accordion, когда может быть открыт контент только одного елемента из группы.
Bootstrap смотрел и использую во многих проектах. Но как написано в посте, тащить за собой большое количество скриптов, стилей и картинок не всегда оправдано.
А так в общем и целом вы правы.
Так и не надо ничего тащить за собой, достаточно bootstrap-collapse.js. Данный фреймворк удобен в использовании, можно использовать любой функционал не таща за собой все остальное.
Мне больше нравится подход JUI, когда для каждого элемента создается объект и сохраняется в data, избавляет от кучи головной боли.

Для своих плагинов использую небольшую обертку, заимствующую идеи widget factory и backbone/underscore:
gist.github.com/oWeRQ/5399632 (если кого-то заинтересует, прокомментирую код в непонятных местах и добавлю описание)
Sign up to leave a comment.

Articles

Change theme settings