(Ова е гостински текст на Даниел Брзанов, а.к.а. Delicon. Даниел работи како графички дизајнер а воедно е и создавач на сајтот Odgovori.mk. Неговиот личен блог е на следниов линк, а може да го сретнете и на Twitter)
{mosimage}Со популарната JavaScript библиотека jQuery можете да ги проширите дизајнерските способности на вашата страна
повеќе отколку што може само со CSS. Доколку имате познавање од CSS,
учењето на jQuery ќе ви биде доста полесно.
Што е jQuery?
Според jQuery.com,
jQuery е брза и мала JavaScript библиотека со која многу лесно се
креираат веб ефекти со само неколку линии код. jQuery е дизајниран да
го смени начинот на пишување на JavaScript код, така што, 10 линии
JavaScript код ќе се претворат во само 2 линии.
Зошто да користам jQuery?
- затоа што е едноставен
- затоа што е компатибилен во повеќето прелистувачи
- користи CSS селектори
Прземање на библиотеката
Првиот чекор што треба да го направите е да ја преземате библиотеката. Посетете ја jQuery.com и кликнете на “Download jQuery”.
Поврзување на jQuery со вашиот проект
{mosimage}
Активирање на кодот кога страната ќе биде вчитана
Првото нешто што програмерите на JavaScript го прават е додавање на код сличен на овој:
{mosimage}
jQuery има полесен начин со кој ја проверува страната и чека да биде спремна за користење:
{mosimage}
jQuery Структура
{mosimage}
Тука selector е DOM елемент, а function е jQuery функција.
Селектори:
- Селекција по DOM елементи: $(’h1′), $(’div’), $(’li’)…
- Селекција по ID: $(’#id’)
- Селекција по класа: $(’.class’)
Додавање на CSS класа
Друго што најчесто веб програметире користат е додавање и отстранување на CSS класа.
Најпрво додадете CSS стил на вашиот проект како овој:
{mosimage}
Потоа со користење на addClass ќе направите сите линкови да станат здебелени:
{mosimage}
За да ја отстранете класата користете removeClass:
{mosimage}
Ефекти
Во јQuery има доста интересни ефекти кои ќе направат вашата страна по жива. За да видете еден од ефектите направете го следното:
{mosimage}
Со ова, доколку кликнете на некој линк тој полека ќе исчезне.
jQuery упатство за користење:
{mosimage}
Галерија со jQuery
Креирањето на галерија со jQuery е навистина едноставно, а тоа може
да го видете од следниот пример. Крајниот резултат можете да го
погледнете тука или пак преземете го.
Најпрво ќе ни треба обичен HTML документ:
{mosimage}
Сега ќе треба да напишеме CSS стил за нашиот HTML:
{mosimage}
Целата тајна на галеријата се крие во jQuery кодот. Разгледајте го внимателно:
{mosimage}
И тоа е се! Целиот код сега треба да ви изгледа како овој:
{mosimage}
Стани премиум член и доби пристап до сите содржини, специјален попуст на над 2.200 производи во ИТ маркет, верификуван профил и можност за огласување на ИТ Огласник. Плус ќе го поддржиш медиумот кој го градиме цели 16 години!
Доколку веќе имаш премиум членство, најави се тука.
