Заміна застарілого спойлера в dle - блог br0ken

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

У DLE є така можливість і це прекрасно. Але реалізація її, з розвитком jQuery і HTML як стандарту, вже кілька років залишає бажати кращого.

У бій іде старий


HTML код старого спойлера виглядає так:


Мені він не подобається, а вам? Взяти атрибути id і style у

або href у .

Тепер подивимося на стра j # 097; vascript функцію:


А цей код красивий і функціональний на сьогоднішній день? Ні!

Нова версія. Порівняйте її з існуючою!


HTML виглядає так:


jQuery функція так:

CSS порівнювати немає сенсу бо в старому коді немає нічого критичного, а в новому - нічого особливого. Обумовлено це тим, що для прикладу використаний стандартний, найпростіший, зовнішній вигляд.

впровадження нового


1. Відкрити /engine/classes/parse.class.php. знайти рядок:


і замінити її на:


далі знайти рядок:


далі шукаємо функцію:


і замінюємо її на нову:


2. В необхідний файл стилів додати:

Перевірте наявність зображень spoiler-plus.gif і spoiler-minus.gif в директорії dleimages. Якщо вони відсутні, то їх необхідно завантажити. Якщо ж є, але в іншій папці, то в наведеному нижче CSS не забудьте змінити шляху.

Старі стилі можна видалити. Знаходяться вони, зазвичай, в engine.css. Імена класів, які більше не потрібні. text_spoiler і .title_spoiler


3. Відкрити /engine/classes/js/dle_js.js. знайти функцію:


і замінити її на:

Резюме: мінуси і плюси.


Почнемо з поганого. І не просто так, адже мінус досить істотний для тих, у кого на сайті вже використано безліч спойлерів.

Справа в тому, що у старої і нової версій є очевидні відмінності HTML структури і заміна призведе до непрацездатності всіх старих спойлерів.


Ну а плюси очевидні, як на мене:
- в два з половиною рази менше коду
- більш гнучка можливість для стилізації

Copyright © 2024