Згортаємо елемент одним натиском

Опубліковано: 2008-12-10   07:33:44

HTML/CSSНещодавно постало завдання швидко зробити можливість згортати/розгортати елемент інтерфейсу натисканням на одну кнопку. Зазвичай, не має необхідності, згортати/розгортати елемент плавно, а більше цікавить спосіб зробити це з найменшими витратами з точки зору ваги сторінки. Однак для сайту-візитки, однією з головних вимог до якої є саме приємний вигляд, було вірішено зробити все "як слід"

Просте рішення з Mootools Accordion

Найбільш простим способом одразу ж здалось використання Mootools. Огляд вже робив Ігор Виспянський, тому перейду одразу до справи. В цій бібліотеці присутній плагін під назвою Accordion, призначений саме для таких цілей.

Для ввімкнення плагіна на сторінці використовується конструкція:

var myAccordion = new Accordion(togglers, elements[, options]);

Параметри виклику:

togglers - перемикачі, тобто елементи натискання на яких викликає згортання/розгортання елементів;

elements - масив елементів, що будуть згортатись/розгортатись;

options - необов'язковий параметр з налаштуваннями для ефекту.

Наприклад, є div-елемент, який має згортатись/розгортатись по натисненню на інший елемент:

<div class="toggler">Натисни сюди</div> <div class="element">А тут ми будемо зберігати деякий текст, що буде прихованим до натискання на кнопку</div>

Для додання ефекту достатньо виконати такий рядок javascript:

window.onload = function() { var myAccordion = new Accordion($$('.toggler'), $$('.element')); }

Налаштування ефекту

В документації можна знайти досить великий перелік параметрів, однак я поясню ті, якими користувався сам, і які на мою думку можуть використовуватись найчастіше.

alwaysHide - кщо цей параметр приймає значення true (за замовчуванням false), то елементи можуть згортатись/розгортатись необмежену кількість разів. В противному випадку згорнути елемент знову не вийде.

display - якщо є декілька елементів які мають підтримувати подібний ефект, то таким чином можна вказати, який з них буде розгорнено за замовчуванням.

Деякі зауваження

Залишається дати посилання на завантаження Mootools. Вона складається з двох частин: ядра та додаткових елементів та плагінів. Як можна помітити, розмір бібліотеки досить великий (все повністю без стиснення займає 130 Кб). Мені ж вдалось знайти скорочену версію цієї бібліотеки спеціально для Accordion. Єдиним недоліком є орієнтація на старішу версію бібліотеки Mootools. Тому хочу поділитись самою збіркою та прикладом її використання. Одразу скажу, що зміни просто мізерні. Якщо цікаво, підписуйтесь на rss та поштову розсилку та залишайте коментарі. Дякую за увагу!

Теги: javascript , mootools , ефекти
Коментарі: 2
 

Коментарі:

virua2009-01-13 11:37:29 :

Читаючи коментар до моєї статті, так зразу і не скажеш, що ти прихильник Мутулс ;)

 
GrAndSE2009-01-15 00:03:10 :

Не те щоб прихильник та зовсім не проти того, щоб їм скористатись, коли це є доцільним. Хоча мені особисто цікавіше розібратись самостійно, що та як працює. :)

 

Додати коментар

user

email

url

text

Повідомляти про новікоментарі