Оформляем углы блоков при помощи jQuery

В этой статье мы научимся делать столь популярные и модные в настоящее время закругленные углы у блоков без использования картинок. В этом нам поможет скрипт corner и библиотека jQuery.

Посмотреть пример такого блока Вы можете, нажав на картинку ниже:

Шаг 1.

Скачаем и подключим к документу необходимые для работы скрипты.

<script type="text/javascript" src="jquery1.3.1.js"></script>
<script type="text/javascript" src="corner.js"></script>

Шаг 2.

Вставим между тегами <head> следующий скрипт:

<script type="text/javascript">
$('#readyTest').corner();
$(function(){
$('div.demo').each(function() {
var t = $('p', this).text();
eval(t);
});
});
</script>

Шаг 3.

В таблицу CSS добавим следующие стили (или пропишем их между тегами <head>):

h1 { padding: 10px; margin: 0; font-size: large }
div.demo { width: 18em; padding: 20px; margin: 1em; background: #6af; }
PRE {
DISPLAY: none
}

Шаг 4.

В нужном нам месте вставим код блока:

 <div class="demo"><h1>Ваш текст</h1><pre><code><p>$(this).corner();</p></code></pre></div>

Готово!

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.malsup.com
Перевел: Сергей Патин
Урок создан: 4 Апреля 2009
Просмотров: 40803
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^