Оформляем углы блоков при помощи 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>
Готово!
Комментарии:
Нету комментариев для вывода...