Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » jQuery: Настраиваем внешний вид скроллбара
jQuery: Настраиваем внешний вид скроллбара
cechДата: Понедельник, 19.07.2010, 09:29 | Сообщение # 1
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
В разных браузерах полоса прокрутки выглядит по разному. И когда возникает необходимость настроить внешний вид скроллбара, появляются мысли что это должно быть как-то связано с CSS. Если вы будете искать информацию об этом, то скорее всего обнаружите что есть стили с помощью которых можно настроить цвет скроллбара. Стоит заметить, что поддерживаются эти стили только браузерами IE 5.5 и выше.


Бывают ситуации когда необходимо иметь полный контроль на внешним видом скроллбара. Например если дизайнер сделал элемент со специфической полосой прокрутки.








Для решения этой проблемы нам на помощь приходит Javascript со своими возможностями. Используя jQuery плагин jScrollPane, можно легко настроить внешний вид полосы прокрути по своему вкусу.


HTML разметка включает всего один внешний контейнер. Контейнер с id="scroll-wrap" в данном случае необходим лишь для позиционирования.


Code
<body>
     <div class="scroll-wrap">
         <div class="scroll-pane">
             ....
         </div>
     </div>
</body>



CSS:


Code
.scroll-wrap{
     width: 300px;
     margin: 40px auto;
     background: #F7F1E5
}
.scroll-pane{
     width: 290px;
     height: 200px;
     padding: 0 0 0 10px;
     overflow: hidden
}
a.jScrollArrowUp{
     display: block;
     position: absolute;
     z-index: 1;
     top: 0;
     right: 0;
     text-indent: -2000px;
     overflow: hidden;
     background:url(/images/but.gif) no-repeat center top;
     height:18px;
}
a.jScrollArrowDown {
     display: block;
     position: absolute;
     z-index: 1;
     bottom: 0;
     right: 0;
     text-indent: -2000px;
     overflow: hidden;
     background:url(/images/but.gif) no-repeat center top;
     height:18px;
}
.jScrollPaneDrag {
     position: absolute;
     cursor: pointer;
     overflow: hidden;
     background:url(/images/drag.gif) no-repeat left top;
     height:42px
}



Далее необходимо подключить следующие файлы в секцию head:


Code
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="jScrollPane.css" />



Файл jquery.mousewheel.min.js необходим в том случае, если необходимо прокручивание содержимого колесом мыши.


и небольшой javascript:


Code
$(function()
{
$('.scroll-pane').jScrollPane({showArrows:true,scrollbarWidth:19,dragMaxHeight:43});
});



Параметр showArrows отвечает за отображение кнопок прокрутки, scrollbarWidth отвечает за ширину полосы, а dragMaxHeight за максимальную высоту перетаскиваемой панели.


Удобство и доступность


Лишая скроллбар его естественного вида, вы рискуете тем, что пользователи не смогут распознать в новом дизайне, элемент, которым они привыкли пользоваться. Вы должны быть уверены, что новый вид ассоциируется именно с полосой прокрутки. Якоб Нильсен написал неплохую статью «Scrolling and Scrollbars», в которой описал, что можно, а что нельзя делать, когда дело касается настройки скроллбара. Учитывайте это когда будете применять данный способ.



 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » jQuery: Настраиваем внешний вид скроллбара
  • Страница 1 из 1
  • 1
Поиск: