Заоблени ъгли с JavaScript и jQuery - искам уебсайт
Здравейте мили приятели. Продължавайки темата, която започнах в урока:"Кръгли ъгли, border-radius и CSS3" и както обещах, ще разгледам възможността да победя упоритостта на браузъритеInternet Explorer иOpera в нежеланието им да показват правилно заоблени ъгли на уеб страница.
Освен това, използвайки този метод, можете изобщо да не се занимавате с писане на код за различни браузъри, като помните различни префикси за свойствотоCSS3 -border-radius и трикове под формата наVML -скриптове - заInternet Explorer иOpera.
А разширяемата библиотекаjQuery и нейният плъгинjquery.corner ни предоставят такава възможност. Няма да ви отегчавам с дълги прелюдии и ще премина направо към същността. За да демонстрирам, ще използвам същия пример като в урока:"Round corners, border-radius and CSS3" -DIV блок таг, към който ще присвоя класа: и ще задам неговитеCSS свойства: ширина, височина и цвят на фона.
Резултат:
Всичко! Плъгинът е готов и работи! Когато страницата се зареди, ъглите наDIV с класа стават заоблени.
Резултат:
Разбира се, ъгловият плъгин не се ограничава само до една команда. Можете да зададете радиуса на кривината на ъглите в пиксели, например:
Резултат:
Но това не е всичко. Точно както в свойствотоCSS3 -border-radius, можете да промените формата не във всички ъгли, а селективно, като използвате следните ключови думи:
- tl - горен ляв ъгъл;
- tr - горен десен ъгъл;
- br - долен десен ъгъл;
- bl - долен ляв ъгъл.
Това обаче още не е краят. В допълнение към стандартната командаround - заобляне на ъглите, плъгинът Corner предоставя голям брой различни команди за всеки вкус: