jScrollPane плагин для создания своего скроллбара.

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

Но тем не менее, бывают случаи, когда нужно использовать свой дизайн сколлбара внутри блоков на странице.

Плагин для jQuery решает эту проблему. Имя ему - jScrollpane. Посмотреть как он выглядит можно на странице с множеством примеров. Скачать последнюю версию можно с github.

Использовать его достаточно легко, достаточно завернуть контент в два блока:
<div class="scroll-wrapper">
<div class="scroll-pane">
...
...
...
</div>
</div>

Причем div с классом "scroll-wrapper" используется только для позиционирования.

Вызывается плагин следующей функцией (список параметров в конце поста):
$(".scroll-pane").jScrollPane();

Подключить к странице нужные скрипты и стили:
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="scripts/jScrollPane.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="styles/jScrollPane.css" />


Два важных момента, из-за которых jScrollPane может не заработать сразу:
- нужно использовать последнюю версию плагина
- внутренний div с классом "scroll-pane" должен иметь заданную высоту и css-свойство "overflow:hidden;"

И напоследок параметры запуска:

scrollbarWidth [int] - ширина полосы прокрутки в пикселях (по умолчанию - 10)
scrollbarMargin [int] - отступ в пикселях слева от прокручиваемого блока (по умолчанию - 5)
wheelSpeed [int] - скорость прокрутки колесом мыши (по умолчанию - 18)
showArrows [boolean] - отображение стрелок у прокрутки (по умолчанию - false)
arrowSize [int] - высота стрелок, если showArrows=true (берется из CSS, если не определено)
animateTo [boolean] - прокручивать или нет при вызове функций scrollTo и scrollBy (по умолчанию - false)
dragMinHeight [int] - минимальная высота, при которой появляется прокрутка (по умолчанию - 0)
dragMaxHeight [int] - максимальная высота, при которой появляется прокрутка (по умолчанию - 99999!)
animateInterval [int] - интервал обновления при анимации scrollPane, в миллисекундах (по умолчанию - 100)
animateStep [int] - число, на которое делится дистанция при прокрутке (по умолчанию - 3)
maintainPosition [boolean] - не прокручивать при добавлении контента в блок (по умолчанию - true)
scrollbarOnLeft [boolean] - полоса прокрутки с левой стороны блока (убедитесь, что CSS тоже поддерживает эту позицию)
reinitialiseOnImageLoad [boolean] - перезагружать jScrollPane, когда изображения внутри загрузились (по умолчанию - false)

Размер фотографий в lightbox в зависимости от размера экрана

Lightbox - на мой взгляд, один из самых удобных плагинов для просмотра фотографий. Я ценю простоту и поэтому он мне нравится.

У меня возникла следующая проблема - большие фотографии не влазят в экран. Крайне неудобно.

Я немного переделал сам скрипт и стили, чтобы решить эту проблему. Заодно сделал закрытие по кнопке Esc (вместо X по умолчанию) и перевел интерфейс на русский язык.

Теперь фотографии уменьшаются до подходящих размеров, так чтобы они влазили в экран.

Скачать можно по этой ссылке

PS. Совсем недавно вышел lightbox2. Добавилась возможность переключения между фотографиями и всякие красивости в виде анимаций. Полная поддержка прошлых версий, вам не нужно будет менять свой html-код.

TODO: Изменять ширину непосредственно у картинки
TODO: Возможность просмотра изображения в реальном размере

PPS. Забросил lightbox, нашел fancybox. Анимации, удобная структура и использование, отображение всего, от картинок до iframe. И объем кода в несколько раз меньше, чем у lightbox. Однозначно лучший плагин для модальных окон.

Поиск в CGridView

Для поиска используется фильтрация, по сути это тот же поиск в таблице, по-другому названный.

Если указан параметр filter - в таблице выводятся поля ввода. По их значениям и будет фильтроваться выборка.

Во view инициализируем виджет CGridView, в параметрах надо указать модель для фильтрации.

View:
// $model - переданная модель из контроллера
$this->widget('zii.widgets.grid.CGridView', array(
'id'=>'profiles',
'dataProvider'=>$model->search(),
'filter'=>$model,

));


CGridView посылает ajax запрос на текущую страницу, с массивом в $_GET['Название_модели']. Этот массив - атрибуты модели. Их можно присвоить модели для выборки. По сути так и происходит фильтрация.

Итак, в текущем действии контроллера (текущем, значит в котором выводится таблица):

Controller:
public function actionUsers()
{
// Создаем модель
$model = User::model();
/* Не забудьте в rules модели указать нужные поля как 'safe', 'on'=>'search'
иначе по ним поиск будет невозможен.
*/
$model->setScenario('search');
//
if(isset($_GET['User'])) {
// Присваиваем модели полученные атрибуты
$model->attributes = $_GET['User'];
}
// В рендер передаем переменную $model
$this->render('users', array('model'=>$model));
}


Такой простейший пример весьма сложно найти, как правило, везде подразумевается, что он известен по умолчанию.