12:58
Данный плагин - находка для многих веб дизайнеров! С его помощью вы можете заключить очень длинную статью, материал или любой другой контент в минимуме пространства, к тому же настроив его как вашей душе будет угодно
Для начала посмотрите ДЕМО
Установка:
После /head на нужных страницах вставляйте:
Code
<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>
Далее обрамите ваш контент, который необходимо убрать в скроллер, следующим образом:
Code
<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:
Code
<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) Обрамляемый контент:
Code
<div id="scroll2">
<div id="scrollcontent2">
Здесь ваш контент
</div>
<div id="scrollbar2">
<div id="scroller2" class="scroller2"></div>
</div>
</div>
3) Скрипт, который мы подключаем сразу под скроллером:
Code
<script type="text/javascript">
TINY.scroller.init('scroll2','scrollcontent2','scrollbar2','scroller2','buttonclick2');
</script>
Как вы можете увидеть, мы не сделали ничего особенного... Просто добавили ко всем классам цифру 2
Так же нужно поступить со всеми последующими скроллерами, размещаемыми на той же странице
