Тень с использованием jQuery: плагин Drop Shadow

20 Ноябрь 2008, 14:31

Плагин jquery.dropshadow.js для библиотеки jQuery позволяет добавить тень элементам страницы. Как это выглядит, можно посмотреть здесь (обратите внимание, что изображение шестеренки можно перетаскивать мышкой). Для начала подключаем в разделе head HTML-страницы необходимые файлы:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dropshadow.js"></script>

Синтаксис:

$(selector).dropShadow(options);  // создает новую тень
$(selector).redrawShadow();       // изменяет существующую тень
$(selector).removeShadow();       // удаляет тень
$(selector).shadowId();           // возвращает ID тени

Параметры dropShadow():

left    : integer (default = 4)
top     : integer (default = 4)
blur    : integer (default = 2)
opacity : decimal (default = 0.5)
color   : string (default = "black")
swap    : boolean (default = false)
  • Параметры left и top задают расположение тени. Если left и top равны нулю, тень расположена за элементом страницы, если значения положительные - тень будет справа снизу, если отрицательные - слева сверху.
  • Параметр blur задает размытие тени. Если blur=0 получим резкую тень, значение один или два создает нормальную тень, значение три или четыре создает сильно размытую (мягкую) тень.
  • Параметр opacity задает прозрачность тени. Как правило, имеет значение меньше единицы.
  • Параметр color задает цвет тени (строка названия цвета или шестнадцатеричное значение). Не применяется к прозрачным изображениям.
  • Параметр swap используется для создания специальных эффектов (рельеф, гравировка).

Тени, которые создает плагин, не связаны с оригинальными элементами, таким образом, если оригинальные элементы изменятся, тени останутся без изменений. Если оригинальные элементы перемещаются или изменяют размеры, надо обработать эти события вручную. Тени могут быть изменены с помощью метода redrawShadow() или удалены с помощью метода removeShadow(). Метод redrawShadow() метод использует те же самые параметры, что и dropShadow(). Чтобы изменить параметры тени, сначала надо удалить тень, а затем создать новую.

Метод dropShadow() метод возвращает jQuery-коллекцию новых теней (созданных плагином новых элементов страницы). Их можно сохранить для дальнейшей обработки:

var myShadow = $("#myElement").dropShadow();

Можно получить ID тени по ID оригинального элемента:

var myShadowId = $("#myElement").attr("shadowId");

или

var myShadowId = $("#myElement").shadowId();

Если оригинальный элемент не имеет уникального ID, плагин его добавит. ID тени создается на основе ID оригинала: если уникальный ID элемента - “myElement”, то ID тени тени будет “myElement_dropShadow”.

Скачать исходные коды

Рубрика: JavaScript  |  Ваш отзыв

Закругленные углы с использованием jQuery

19 Ноябрь 2008, 11:50

Закругленные углы — одна из популярных тенденций в современном веб-дизайне. Есть множество вариантов их реализации: от размещения изображений по углам контейнера, до использования специфических свойств, например -moz-border-radius для FireFox. Хотелось бы иметь в арсенале простой и удобный способ скругления углов без использования изображений или экзотических свойств.

Плагин jquery.corner.js для библиотеки jQuery — самый простой способ для решения этой задачи. Подключаем плагин в разделе head HTML-страницы:

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

И вызываем функцию corner():

$("div.rounded").corner("effect corners width");
  • effect — название эффекта, например round или bevel. По умолчанию — round.
  • corners — углы, к которым применяется эффект. Может принимать значения top (верхние правый и левый), bottom (нижние правый и левый), tr (верхний правый), tl (верхний левый), br (нижний правый) или bl (нижний левый). По умолчанию эффект применяется ко всем углам.
  • width — радиус скругления (ширина эффекта) в пикселях. По умолчанию — 10px.

Поскольку для effect, corners и width предусмотрены значения по умолчанию, допускается вызвать функцию corner() так:

$("div.rounded").corner();

Ссылки по теме:

Рубрика: JavaScript  |  Отзывов: 6

Сортировка таблицы средствами JavaScript

17 Ноябрь 2008, 18:17

В одной из предыдущих заметок я писал о сортировке столбцов таблицы. Однако, речь шла о сортировке на стороне сервера. Было бы удобно иметь возможность сортировки без перезагрузки страницы, т.е. на стороне клиента. Один из вариантов решения этой задачи — скрипт Стюарта Лангриджа sorttable.js. Подключаем его в разделе head HTML-страницы:

<script src="sorttable.js" type="text/javascript"></script>

Для таблицы должен быть определен класс class=”sortable”. Допускается применить этот класс для нескольких таблиц на странице. Каждая таблица должна содержать thead, tbody и tfoot.

PHP:

<?php
$dblocation = "localhost";   // Имя сервера
$dbuser     = "root";        // Имя пользователя
$dbpswrd    = "";            // Пароль
$dbname     = "catalog";     // Имя базы данных

// Соединение с сервером базы данных
$dblink = mysql_connect( $dblocation, $dbuser, $dbpswrd );
mysql_query( 'SET NAMES cp1251' );
// Выбираем базу данных
mysql_select_db( $dbname, $dblink );
?>

<html>
<html>
<title>Сортировка таблицы</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
body {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
}
table.sortable{border:0; padding:0; margin:0; width: 70%}
table.sortable td{padding:4px; border-bottom:solid 1px #DEDEDE;}
table.sortable th{padding:4px; cursor:pointer}
table.sortable thead{text-align:left; background:#e3edef; color:#333333;}
table.sortable tfoot{font-weight:bold; }
table.sortable tfoot td{border:none;}
</style>
<script type="text/javascript" src="sorttable.js"></script>
</head>
<body>
 
<?php
  // Формируем запрос на извлечение товарных позиций
  $query = 'SELECT code, title, description, price
            FROM products
            ORDER BY title';
  $res = mysql_query($query);
  echo '<table class="sortable">';
  echo '<thead>';
  echo '<tr>';
  echo '<th>Код</th>';
  echo '<th>Наименование</th>';
  echo '<th>Описание</th>';
  echo '<th>Цена</th>';
  echo '</tr>';
  echo '</thead>';
  echo '<tbody>';
  while( $prd = mysql_fetch_array( $res ) ) {
    echo '<tr>';
    echo '<td>'.$prd['code'].'</td>';
    echo '<td>'.$prd['title'].'</td>';
    echo '<td>'.$prd['description'].'</td>';
    echo '<td align="right">'.$prd['price'].'</td>';
    echo '</tr>';
  }
  echo '</tbody>';
  echo '<tfoot></tfoot>';
  echo '</table>';
?>

</body>
</html>

Ссылки по теме:

Рубрика: JavaScript  |  Ваш отзыв
Страница 9 из 44« Первая...«7891011»...Последняя »