Архив за Ноябрь 2008

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

Закругленные углы — одна из популярных тенденций в современном веб-дизайне. Есть множество вариантов их реализации: от размещения изображений по углам контейнера, до использования специфических свойств, например -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

В одной из предыдущих заметок я писал о сортировке столбцов таблицы. Однако, речь шла о сортировке на стороне сервера. Было бы удобно иметь возможность сортировки без перезагрузки страницы, т.е. на стороне клиента. Один из вариантов решения этой задачи — скрипт Стюарта Лангриджа 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>

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

Навигация с использованием jQuery

Эта навигация сделана с использованием библиотеки jQuery и плагинов jquery.scrollable.js и jquery.mousewheel.js. Плагин jquery.scrollable.js отвечает за главный эффект — прокрутку, а плагин jquery.mousewheel.js позволяет использовать колесико мышки для скроллинга.

Основные возможности:

  • горизонтальная и вертикальная прокрутка;
  • возможность установить количество видимых элементов;
  • создание кнопок навигации.

Рассмотрим простой пример.

HTML:

<div id="scrollable">   
    <div class="navi"></div>   
    <a class="prev"></a>       
    <div class="items">
        <a>1</a>  <a>2</a>  <a>3</a>  <a>4</a>  <a>5</a>
        <a>6</a>  <a>7</a>  <a>8</a>  <a>9</a>  <a>10</a>
        <a>11</a> <a>12</a> <a>13</a> <a>14</a> <a>15</a>      
    </div> 
    <a class="next"></a>   
</div>

JavaScript:

$("#scrollable").scrollable({items:'.items',horizontal:true});

Cписок всех параметров и их значений по умолчанию:

// выберите один или несколько контейнеров
$("#scrollable").scrollable({
    // дефолтное количество видимых эелементов 5
    size: 5,
   
    // по умолчания создается вертикалльный скроллинг
    horizontal:false,
   
    // вскорость прокрутки
    speed: 300,
   
    // селектор для кнопки назад
    prev:'.prev',   
   
    // селектор для кпопки вперед
    next:'.next',
   
    // селектор для верхней навигации (точки наверху)
    navi:'.navi',
   
    // имя элемента внутри верхней навигации (точки наверху)
    naviItem:'span',   
       
    // CSS класс для активного элемента верхней навигации
    activeClass:'active',
   
    // селектор элементов прокрутки
    items: '.items',
   
    // функция, которая вызывается при прокрутке элементов
    onSeek: null
});

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

Рассмотрим функции скрипта, которые можно использовать для организации навигации

// выбираем контейнер элементов
var el = $("div.scrollable");

// шаг сперед
el.scrollable("next", [speed]);

// шаг назад
el.scrollable("prev", [speed]);

// страница вперед
el.scrollable("nextPage", [speed]);

// страница назад
el.scrollable("prevPage", [speed]);

// переход на конкретную страницу
el.scrollable("setPage", 1, [speed]);

// два шага вперед
el.scrollable("move", 2, [speed]);

// переход на конкретный элемент
el.scrollable("seekTo", 2, [speed]);

// переход к первому элементу
el.scrollable("begin", [speed]);

// переход к последенему элементу
el.scrollable("end", [speed]);