| Главная » Файлы » Прочие скрипты » 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 | |
| Просмотров: 405 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |