Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.144.20.66
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Модератор форума: Hawk  
jQuery Corner - закругление углов
Сообщение оставлено 24.01.2011 в 11:13:18 | Сообщение #1

jQuery Corner отличный плагин для фреймвока Jquery, суть его в декорировании углов, то есть он может не только закруглять углы, но и обрезать, делать вогнутыми и т.д. Всего я нащитал 17 способов изощрения над углами. Конечно можно использовать закругление с помощью картинок или css 3 но в первом случае довольно трудно сделать динамичный блок, во во втором же не кроссобраузерно, то есть css 3 ещё не все броузеры воспринимаю.

Подключаем плагин (С учётом того что JQ уже подключено). Прописываем в head

Code
<script type="text/javascript" src="http://7ucoz.com/jquery.corner.js"></script>

Далее сам скрипт

Code
<script type="text/javascript">   
      $("идентификация элемента").corner("тип углов");   
});   
</script>

Там где написано "идентификация элемента" вставляем класс или id любого элемента.
Там где написано "тип углов" по умолчанию стоит тип закругления Round (просто скругление с 5px радиусом), вы можете вставить любой из
17 типов декорирования углов.

Типы декорирования углов (жми)

Вы можете изменять размер углов, для это просто пишем размер тудаже куда прописывали тип скругления. Пример ниже.

Code
<script type="text/javascript">   
      $("#div").corner("dog 30px");   
});   
</script>

Также можно декорировать углы по отдельности использовав параметры top, bottom, left, right, tl, tr, bl, br, которые прописываются
так же как и размер. Ниже пара примеров.

Code
<script type="text/javascript">   
      $("#div").corner("dog 30px bottom");   
      $("#div2").corner("tl bl");   
      $("#div3").corner("cool right");   
});   
</script>

Можно задавать не только какие углы будем декорировать но и как, т оесть каждый угол можно декорировать по разному. пример ниже

Code
<script type="text/javascript">   
      $("#div").corner("dog 30px tl").corner("10px bl").corner("cool 15px br");   
});   
</script>

Теперь об обводке. Так как обрезанные углы по умолчанию белые их можно закрашивать в любой цвет с помощью параметра cc:#xxx
прописывается так же как и цвета и всё остальное, пример ниже


Обводка верхней нижней частей элемента проводиться с помощью парамета sc:#ХХХ . пример ниже

Параметр keep создаёт обводку у всего вашего элемента, цвет этой обводки прописываем параметром сс:#xxx

 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика