Плавающая панель phpbb3
Добавлено: 15 фев 2012, 15:05
Введение
Долгое время я потратил на поиск данной плавающей панели, ни гугл ни яндекс не могли подсказать мне, но вот свершилось чудо и я наконец то нашел необходимый скрипт. Для чего он вообще нужен? Ну кому как, а мне пригодилось для разгрузки шапки форума от множества кнопок, да и вид у нее вполне презентабельный. Впринципе ее работу вы смоежете потестировать у нас на Форуме
Установка
Данная панель очень легка в установке, потребуется лишь правка 2 файлов, займет минут 5, но ясень пень я вам не скину своих конфигов панели, каждый будет волен в своей фантазии и настройке. Итак скачиваем архив и распаковываем его в корень форума. Далее открываем
Код: Выделить всё
<link type="text/css" href="themes/default/jx.stylesheet.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sample-bar").jixedbar();
});
</script>
Код: Выделить всё
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Далее ищем закрывающий тег
Код: Выделить всё
<div id="sample-bar">
<ul>
<li title="Home"><a href="http://your.domain.tld/"><img src="img/home.png" alt="" /></a></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title="Around The Web"><a href="#"><img src="img/web.png" alt="Get Social" /></a>
<ul>
<li><a href="http://www.facebook.com/account-name"><img src="img/facebook.png" title="Facebook" />Facebook</a></li>
<li><a href="http://twitter.com/account-name"><img src="img/twitter.png" title="Twitter" />Twitter</a></li>
<li><a href="http://www.flickr.com/photos/account-name/"><img src="img/flickr.png" title="Flickr" />Flickr</a></li>
</ul>
</li>
</ul>
<span class="jx-separator-left"></span>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<ul class="jx-bar-button-right">
<li title="Feeds"><a href="#"><img src="img/feed.png" alt="" /></a>
<ul>
<li><a href="http://your.domain.tld/feed/"><img src="img/feed.png" title="Content Feeds" />Content Feed</a></li>
<li><a href="http://your.domain.tld/comments/"><img src="img/comment.png" title="Comment Feeds" />Comment Feed</a></li>
</ul>
</li>
</ul>
<span class="jx-separator-right"></span>
</div>
Код: Выделить всё
<ul>
<li title="Home"><a href="http://your.domain.tld/"><img src="img/home.png" alt="" /></a></li>
</ul>
Код: Выделить всё
<span class="jx-separator-left"></span>
Код: Выделить всё
<ul>
<li title="Around The Web"><a href="#"><img src="img/web.png" alt="Get Social" /></a>
<ul>
<li><a href="http://www.facebook.com/account-name"><img src="img/facebook.png" title="Facebook" />Facebook</a></li>
<li><a href="http://twitter.com/account-name"><img src="img/twitter.png" title="Twitter" />Twitter</a></li>
<li><a href="http://www.flickr.com/photos/account-name/"><img src="img/flickr.png" title="Flickr" />Flickr</a></li>
</ul>
</li>
</ul>
Код: Выделить всё
<li><a href="http://www.facebook.com/account-name"><img src="img/facebook.png" title="Facebook" />Facebook</a></li>
Код: Выделить всё
<ul class="jx-bar-button-right">
<li title="Feeds"><a href="#"><img src="img/feed.png" alt="" /></a>
<ul>
<li><a href="http://your.domain.tld/feed/"><img src="img/feed.png" title="Content Feeds" />Content Feed</a></li>
<li><a href="http://your.domain.tld/comments/"><img src="img/comment.png" title="Comment Feeds" />Comment Feed</a></li>
</ul>
</li>
</ul>