 Приведу пример очень удобной и легко настраиваемой под нужды сайта панели. Она всегда будет находится в поле зрения пользователя и нести на себе те функции, которыми вы её наделите. Сделать это очень легко.
Достаточно включить в неё определенный функционал с вашего или внешнего сайта. Кнопки социальных сетей, информеры или бегущую строку с новостями вашего проекта. Оповещение о личных сообщениях, дополнительные пункты меню, важные сообщения. Фантазируйте и сможете сделать отличную фишку для проекта.
Панель может быть закреплена как снизу, так и сверху.
Подключаем к нашему сайту jQuery и CSS и нужный нам скрипт:
| Код | 1
2
3
4
5
6
7
8
| <link type="text/css" href="/path/to/themes/default/jx.stylesheet.css" rel="stylesheet"/>
<script type="text/javascript" src="/path/to/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/path/to/src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sample-bar").jixedbar();
});
</script> |
Далее идет разметка панели:
| Код | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <div id="demo-bar">
<ul>
<li title="Домой"><a href="https://www.yworld.ru/"><img src="icons/home.png" alt="" /></a></li>
</ul>
<ul>
<li title="About"><a href="https://www.yworld.ru"><img src="icons/info.png" alt="" /></a></li>
<li title="Resume"><a href="https://www.yworld.ru"><img src="icons/blogs.png" alt="" /></a></li>
<li title="Portfolio"><a href="https://www.yworld.ru"><img src="icons/block.png" alt="" /></a></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title="Социальные сети, общение Yworld, присоединяйтесь!!!"><a href="#"><img src="icons/network.png" alt="" title="Социальные сети Yworld" />Мы в интеренет</a></a>
<ul>
<li><a href="https://www.yworld.ru/forum/index.php"><img src="icons/facebook.png" title="Форум" />Форум</a></li>
<li><a href="http://twitter.com/yworld_1"><img src="icons/twitter.png" title="Twitter" />Twitter</a></li>
<li><a href="https://plus.google.com/"><img src="icons/google.png" title="Google" />Google</a></li>
</ul>
</li>
</ul>
<span class="jx-separator-left"></span>
<div>Используйте и настраивайте панель по своему усмотрению.</div>
<ul class="jx-bar-button-right">
<li title="Feeds"><a href="#"><img src="icons/feed.png" alt="" /></a>
<ul>
<li><a href="https://www.yworld.ru/go.php?go=http://feeds.feedburner.com/Yworldru"><img src="icons/feed.png" title="Почитать фид" />Перейти</a></li>
<li><a href="https://www.yworld.ru/go.php?go=http://feedburner.google.com/fb/a/mailverify?uri=Yworldru&loc=ru_RU"><img src="icons/feed.png" title="Подписаться" />Подписаться</a></li>
</ul>
</li>
</ul>
<ul class="jx-bar-button-right">
<span class="jx-separator-right"></span>
<li title="Добавить в закладки"><a href="#" onclick="bookmark(location.href, 'jixedbar - jQuery fixed bar'); return false;"><img src="icons/bookmark.png" alt="" /></a></li>
</ul>
<span class="jx-separator-right"></span>
</div> |
Ниже немного о настройках которые можно изменить:
showOnTop — позволяет отображать панель сверху экрана. По умолчанию панель отображается внизу экрана.
transparent — делает панель прозрачной.
opacity — параметр прозрачности — принимает значение от 0.0 до 1.0.
slideSpeed — задает скорость скрытияпоказа панели. значения от 200 до 600. по умолчанию fast.
roundedCorners — дает возможность сделать края панели закругленными.
roundedButtons — дает возможность сделать края кнопок закругленными.
menuFadeSpeed — задает скорость скрытияпоказа меню. значения от 200 до 600. по умолчанию fast.
tooltipFadeSpeed — задает скорость скрытияпоказа подсказок. значения от 200 до 600. по умолчанию fast.
tooltipFadeOpacity — задает прозрачность поля с подсказкой. значения от 0.0 до 1.0
 $("#sample-bar").jixedbar({
showOnTop: true,
transparent: true,
opacity: 0.5,
slideSpeed: "slow",
roundedCorners: false,
roundedButtons: false,
menuFadeSpeed: "slow",
tooltipFadeSpeed: "fast",
tooltipFadeOpacity: 0.5
});
Стили jx.stylesheet.css:
jx-bar — стиль главной панели
jx-bar span — разделители
jx-bar-button li — определяет стиль кнопки панели
jx-bar-button li:hover — стиль кнопки при наведении
jx-bar-button li a:* — стиль анкора кнопки
jx-bar-button-tooltip — стиль подсказки при наведении на кнопку
jx-bar div — стиль текстового контейнера и стрелки
jx-nav-menu — стиль выпадающего меню
jx-nav-menu ul li a — стиль пунктов меню
jx-arrow-up — стиль стрелки в состоянии up
jx-arrow-down — стиль стрелки в состоянии down
jx-hide — стиль для скрытия панели
jx-show — стиль для показа панели
В комплекте три шаблона, но вы всегда сможете изменить под дизайн своего сайта.
Полезная информация:
Мир компьютеров не стоит на месте. И вот уже на смену или параллельно со стационарными компьютерами и ноутбуками пришел планшет. Это компьютер, но очень легкий и компактный, в нем отстутствует привычная клавиатура и им легко управлять просто пальцами. Но для тех кому более прывчно управление компьютером с помощью клавиатуры, то существуют модели не только с сенсорными экранами, но и имеющие съемную клавиатуру.
Популярность планшетов шла по нарастающей в течение нескольких лет, по мере совершенствования операционных систем, одновременно с разработкой новых, аккумуляторов, имеющих более длительное время работы без подзарядки, а также с постепенным снижением цены на планшеты.
При выборе планшета в первую очередь это самому определиться с направлением: что Вы хотите от него получить? Безусловно, в первую очередь Вы пройдетесь по сравнительным характеристикам планшета и лучше это делать не в магазине, а пройтись по страницам интернета, где про планшет расскажут все и Вы сделаете свой правильный выбор. Так iPad или привычный планшет? Решать только Вам
Ссылка на источник обязательна: www.yworld.ru
|
