Главная » Файлы » Прочие скрипты » jQuery

Любой ваш контент в скроллере со своими полосами прокрутки на jQuery
23.06.14, 09:12:41

Скачать файл




Данный плагин - находка для многих веб дизайнеров! С его помощью вы можете заключить очень длинную статью, материал или любой другой контент в минимуме пространства, к тому же настроив его как вашей душе будет угодно

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<style>  
  #scroll {position:relative; width:400px; height:200px; overflow:auto}  
  #scrollcontent {position:absolute; width:375px; z-index:200}  
  #scrollbar {float:right; position:relative; display:none; width:15px; height:200px; z-index:100; background:url(/images/scroll-bg.gif)}  
  .scroller {position:absolute; top:0; width:15px; cursor:pointer; background-color:#ccc; background-image:url(/images/scroll-arrows.gif); background-position:50% 50%; background-repeat:no-repeat}  
  .buttonclick {background-color:#bbb}  
  </style>
  <script type="text/javascript" src="/js/script.js"></script>


Далее обрамите ваш контент, который необходимо убрать в скроллер, следующим образом:
Код
<div id="scroll">
<div id="scrollcontent">
  Здесь ваш контент  
</div>
<div id="scrollbar">
<div id="scroller" class="scroller"></div>
</div>
</div>  
  <script type="text/javascript">
  TINY.scroller.init('scroll','scrollcontent','scrollbar','scroller','buttonclick');  
  </script>


Далее залейте скрипт из прикреплённого архива в папку js и две картинки в папку images

Всё, скрипт полностью подключен и готов к работе. У данного скрипта есть один нюанс - с данными настройками вы можете использовать только один скроллер на странице. Для второго скроллера, размещаемого на той же странице, мы должны прописать второй стиль и, соответственно, изменить все классы у второго скроллера и скрипта. Вот пример реализации второго скроллера на одной странице с первым:

1) css:
Код
<style>  
  #scroll2 {position:relative; width:400px; height:200px; overflow:auto}  
  #scrollcontent2 {position:absolute; width:375px; z-index:200}  
  #scrollbar2 {float:right; position:relative; display:none; width:15px; height:200px; z-index:100; background:url(/images/scroll-bg.gif)}  
  .scroller2 {position:absolute; top:0; width:15px; cursor:pointer; background-color:#ccc; background-image:url(/images/scroll-arrows.gif); background-position:50% 50%; background-repeat:no-repeat}  
  .buttonclick2 {background-color:#bbb}  
  </style>


2) Обрамляемый контент:
Код
<div id="scroll2">
<div id="scrollcontent2">
  Здесь ваш контент  
</div>
<div id="scrollbar2">
<div id="scroller2" class="scroller2"></div>
</div>
</div>


3) Скрипт, который мы подключаем сразу под скроллером:
Код
<script type="text/javascript">
  TINY.scroller.init('scroll2','scrollcontent2','scrollbar2','scroller2','buttonclick2');  
  </script>


Как вы можете увидеть, мы не сделали ничего особенного... Просто добавили ко всем классам цифру 2

Так же нужно поступить со всеми последующими скроллерами, размещаемыми на той же странице

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: ваш, полосами, скроллере, Со, любой, на, JQuery, своими, контент, прокрутки
Просмотров: 269 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: