Здравейте, днес ще разгледаме как да правим красиви краища на HTML елементите. За целта ще използваме jQuery което е JavaScript библиотека за по-бърза работа със събития, ХТМЛ елементи и помага и за лесното добавяне на Ajax към проектите ни.
Ето как изглеждат няколко елемнта направени с jQuery и допълнителната библиотека на Mike Alsup
За начало трябва да си изтеглим последна верися на jQuery. Тук има сравнително нова верися, която компресирана е с размер ~20kb!!
Ще ни трябва и библиотеката която прави специалните ъгли, нея можем да изтеглим от тук.
Какво трябва да направим:
1. Добавяме стилова декларация. Тук има малък tweak за Сафари, трябва изрично да декларираме фона на елемента който ще съдържа украсеният. Ако не го направим Сафари показва черен цвят:
body { font: Verdana,Arial,sans-serif; background: #FFFFFF;}div.demo { padding: 6px; background: #d7e7f6; color:#313131; font: verdana, arial, sans-serif; font-size:13px; font-weight:bold;}
2. Декларираме 2та JavaScript-а jquery-1.1.3.1.pack.js и jquery.corner.js (точно в тази последователност)
3. Добавяме скрипт който указва какво ще манипулираме при зарждането на документа. Така показваме че всеки елемент от клас демо ще бъде преобразен. Това е кратко написана функицята $(document).ready(), но за нея ще говорим повече друг път.
$(function(){$("div.demo").corner();});
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 размери при указване на отстояние и граници.
- Не използвайте картинка за фон на парент елемента.
- За бързодействие намалете броя на използваните украсени елементи, както и размера им.
- Показани всички примери можете да видите тук