Украсяване с jQuery

jquery Украсяване с jQueryЗдравейте, днес ще разгледаме как да правим красиви краища на HTML елементите. За целта ще използваме jQuery което е JavaScript библиотека за по-бърза работа със събития, ХТМЛ елементи и помага и за лесното добавяне на Ajax към проектите ни.

Ето как изглеждат няколко елемнта направени с jQuery и допълнителната библиотека на Mike Alsup
2 Украсяване с jQuery

За начало трябва да си изтеглим последна верися на jQuery. Тук има сравнително нова верися, която компресирана е с размер ~20kb!!
Ще ни трябва и библиотеката която прави специалните ъгли, нея можем да изтеглим от тук.

Какво трябва да направим:
1. Добавяме стилова декларация. Тук има малък tweak за Сафари, трябва изрично да декларираме фона на елемента който ще съдържа украсеният. Ако не го направим Сафари показва черен цвят:

2. Декларираме 2та JavaScript-а jquery-1.1.3.1.pack.js и jquery.corner.js (точно в тази последователност)

3. Добавяме скрипт който указва какво ще манипулираме при зарждането на документа. Така показваме че всеки елемент от клас демо ще бъде преобразен. Това е кратко написана функицята $(document).ready(), но за нея ще говорим повече друг път.

4. Декларираме елемента който искаме да ‘украсим’

Списък с възможните стилове, ако не се укаже по подразбиране ефекта е round:
Round – $(this).corner();
Bevel – $(this).corner(“bevel”);
Notch – $(this).corner(“notch”);
Bite – $(this).corner(“bite”);
Cool – $(this).corner(“cool”);
Sharp – $(this).corner(“sharp”);
Slide – $(this).corner(“slide”);
Jut – $(this).corner(“jut”);
Curl – $(this).corner(“curl”);
Tear – $(this).corner(“tear”);
Fray – $(this).corner(“fray”);
Wicked – $(this).corner(“wicked”);
Sculpt – $(this).corner(“sculpt”);
Long – $(this).corner(“long”);
Dog Ear – $(this).corner(“dog”);
Dog2 – $(this).corner(“dog2”);
Dog3 – $(this).corner(“dog3”);

Препоръки
– Възможно е указването на размера на украсения край да става в пиксели: $(this).corner(“bevel 4px”);
– Възможно е да посочим само горните два ъгъла да са различни: $(this).corner(“bevel top”);
– Използвайте само px размери при указване на отстояние и граници.
– Не използвайте картинка за фон на парент елемента.
– За бързодействие намалете броя на използваните украсени елементи, както и размера им.
– Показани всички примери можете да видите тук


Leave a Reply

Your email address will not be published. Required fields are marked *