Skip to content

js, jquery, widget, …

Сьогодні пишемо віджет на JQuery.

jquery

В двух словах, що таке віджет: це такий собі набір функцій, які об’єднані в один клас. Це щось схоже до плагінів чи сніппетів (не треба голосно кричати на мене, за таке грубе порівняння).

Отже, щоб написати віджет, потрібно скачати свіженький jQuery UI (UI – юзер інтерфейс).

Для прикладу можна написати простеньку галерею, функціонал якої можна наростити.

Переходимо до коду…
в index.html пишемо

Звертаю увагу на підключення ui.core.js, тому що без цього юзер інтерфейса не получиться написати віджет.

В файлі ua.simply.js буде знаходитись наш віджет, причому ua це простір імен, який я вигадав. Наприклад, якщо Ви будете писати цілу колекцію віджетів – то потрібно писати їх під спільним простором імен, в jquery такі віджети як Accordion, Dialog, Tabs та інші, мають спільний простір імен – це ui.

Як пише мануал, шаблоном для віджета є:

* я трошки переробив екзампл, щоб він був більш зрозумілий.

Тепер по порядку:
$.widget(“name_widget”, code) – так ми оголошуємо віджет.

В самому коді віджета:

_init – ініціалізація віджета. Тут ми пишемо, що буде виконуватись коли ми викличемо віджет.
value – змінна віджета.
_doSomething та getValue – це методи (функції), які я для себе вигадав.

Спробуємо в нашому віджеті зробити так, щоб при наведені курсора на картинку, картинка виділялась, а при кліку – виринала в повному розмірі.

В ініціалізації:

Оскільки вхідних і вихідних парметрів нам не потрібно, тому про get і set я розповім в іншій статті. А зараз я зверну увагу на this. Справа в тому, що в віджеті this має інше значення, ніж this в звичайному jquery. У віджеті this працює як у класі, тобто повертає якись метод цього класу, наприклад this.value, або можна навіть взяти сам елемент, на який ми повішали віджет. Доречі, вішаєм віджет:

В index.js:

Тоді в самому віджеті, під this.element буде вважатись весь об’ект, який має атрибут “.widget-box”, тобто той, на який повішали віджет.

Але якщо у віджеті ми почнемо користуватись засобами jquery, то this уже не буде стосуватись віджета.
Тому на початку бажано оголошувати такі змінні:

І якщо потрібно звернутись до якогось методу, то говоримо self.getValue або self.value.

Взагалі-то галерея вже готова 🙂

Загальний код віджета:

А викликати його можна за допомогою конструкції $(any_div_selector).simply();

Також показую дерево проекту

дерево проекту

Скачати віджет

Матеріал взятий з jqueryui.com, з власного досвіду, а також зі стелі

4 Comments

  1. Hmur Hmur

    Досить не погано, Сергуник!!! Як на мене, повчальний пост. та ще хотілося б бачити на початку поста лінк: бла, бла, бла.. “сьогодні ми зробимо отакий віджет”, який би давав можливість переглянути віджет в онлайні:)

  2. Hmur Hmur

    .. і ще назви неймспейса і віджета – ua.simply – не дуже інформативні.
    serg.widgets.simplegalery – було б краще).
    та це лише моя суб’эктивна думка:)

    • admin admin

      щоб обзивати віджети потрібно дотримуватись правил.
      Першим словом повинно бути назва простору імен (нехай буде sr) а друге – це саме назва віджета (нехай simplegalery).
      В результаті одержимо sr.simplegalery – суттєвої різниці я не бачу…
      P. S.: віджет написаний лише в інформативних цілях, тобто для прикладу.

  3. Hmur Hmur

    я думаю, що неймспейс – це не обовязково дві літери:)

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *