Давно я вже нічого не писав на сайті, але ось вирішив поділитися з народом, недавно виявлених, найцікавішим плагіном на jQuery.
1. Для початку створимо в папці з чинним шаблоном підпапку js - це робимо для зручності, щоб не плутатися куди кидати яваскрипт в майбутньому.
Не забудьте скопіювати в папку js файл .htaccess наприклад з папки css, інакше DLE НЕ буде вантажити наші Яваскрипт.
2. Зручним для Вас способом підключаємо бібліотеку jQuery:
- Або заливаємо файл jquery з прикріпленого архіву в папку js і пишемо перед в main.tpl
- Або "говоримо" двигу щоб він "брав" бібліотеку з googlecode:
пишемо перед в main.tpl
3. Завантажуємо наш плагін tooltip.js в папку js, і нижче рядків, де прописано підключення бібліотеки пишемо:
Тепер всі посилання, які мають клас .ttp_link при Налін title будуть оброблятися плагіном і мати гарний зринаючі підказки.
4. Визначаємо клас для нашої підказки:
У будь-який CSS-файл пишемо:
5. HTML:
Для прикладу візьмемо даний шматок коду:
У ньому представлені популярні html-теги форматування тексту і картинка. Як видно, все коректно відображається.
Переваги даного плагіна:
- підтримка HTML-тегів.
- легкість настройки.
- багаторазовість використання на одній сторінці.
- малу вагу плагіна.
Але є і ложка дьогтю:
Якщо ви раптом захочете використовувати даний зринаючі підказки для вмісту новини - поспішу Вас розчарувати, якщо раптом в новини зустрінеться зменшена копія картинки # 91; thumb # 93 ;, то з 99.9% -ною вірогідністю весь ваш шаблон попливе, тому я буду вдячний тому, хто зможе помоч в рішенні даного косяка. Ну а якщо картинок в новині немає, то сміливо можна писати ось так:
це наприклад можна застосувати замість підказки на css, для виведення новин в 2 колонки.
Я думаю кожен для себе сам вирішить як можна застосувати цей зринаючі підказки у себе на сайті.
1. Для усунення бага з виникненням порожнього простору внизу сайту приблизно в 20px потрібно додати в клас tooltip негативну позицію по вертикалі (top: -9999px;). У підсумку наш css код буде виглядати ось так:
2. Для устраніенія бага з порожнім title посилання ми трохи поправимо jquery-код, додамо таку строчку:
У підсумку наш скрипт буде виглядати на 2 рядки дліньше, але і працювати буде краще:
Схожі матеріали
- Cinemamir.com 2
"> - Трохи поділимося з народом
Вирішив ось поділитися з масами шаблоном, який стояв біля мене на блозі до оновлення. Кому потрібно ... "> - Недільні сніпети №2
Сьогодні в добірці ще пара фрагментів на jQuery. Перший допоможе показувати випадковий елемент при ... "> - Модуль Останні Коментарі 3.4 jQuery edition
Цим постом я вирішив відкрити нову рубрику Модулі для DLE. Буду викладати по мірі можливостей ... ">