Оформляем углы блоков при помощи 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
Просмотров: 40890
Правила перепечатки

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

^ Наверх ^