jQuery: слайдшоу с помощью Cycle Plugin

21 11/08
13

Сегодня поговорим о том, как, используя библиотеку jQuery и плагин Cycle Plugin, создать небольшое слайдшоу из обычного содержимого страницы. Это могут быть новости, изображения, различные виджеты и т.п. Это значительно экономит место на странице и может пригодится в определённых случаях. (далее…)

Теги: •

Делаем вертикальный «скроллбар»

03 10/08
118

В разных браузерах полоса прокрутки выглядит по разному. И когда возникает необходимость настроить внешний вид скроллбара, появляются мысли что это должно быть как-то связано с CSS. Если вы будете искать информацию об этом, то скорее всего обнаружите что есть стили с помощью которых можно настроить цвет скроллбара. Стоит заметить, что поддерживаются эти стили только браузерами IE 5.5 и выше.

Бывают ситуации когда необходимо иметь полный контроль на внешним видом скроллбара. Например если дизайнер сделал элемент со специфической полосой прокрутки.
Для решения этой проблемы нам на помощь приходит Javascript со своими возможностями. Используя jQuery плагин jScrollPane, можно легко настроить внешний вид полосы прокрути по своему вкусу.

HTML разметка включает всего один внешний контейнер. Контейнер с id="scroll-wrap" в данном случае необходим лишь для позиционирования.

1
2
3
4
5
6
7

<body>
    <div class="scroll-wrap">
        <div class="scroll-pane">
            ....
        </div>
    </div>
</body>

CSS:

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

.scroll-wrap{
    width: 300px;
    margin: 40px auto;
    background: #F7F1E5
}
.scroll-pane{
    width: 290px;
    height: 200px;
    padding: 0 0 0 10px;
    overflow: hidden
}
a.jScrollArrowUp{
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    text-indent: -2000px;
    overflow: hidden;
    background:url(images/but.gif) no-repeat center top;
    height:18px;
}
a.jScrollArrowDown {
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    text-indent: -2000px;
    overflow: hidden;
    background:url(images/but.gif) no-repeat center top;
    height:18px;
}
.jScrollPaneDrag {
    position: absolute;
    cursor: pointer;
    overflow: hidden;
    background:url(images/drag.gif) no-repeat left top;
    height:42px
}

Далее необходимо подключить следующие файлы в секцию head:

1
2
3
4

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="jScrollPane.css" />

Файл jquery.mousewheel.min.js необходим в том случае, если необходимо прокручивание содержимого колесом мыши.

и небольшой javascript:

1
2
3
4

$(function()
{
$('.scroll-pane').jScrollPane({showArrows:true,scrollbarWidth:19,dragMaxHeight:43});
});

Параметр showArrows отвечает за отображение кнопок прокрутки, scrollbarWidth отвечает за ширину полосы, а dragMaxHeight за максимальную высоту перетаскиваемой панели.

Удобство и доступность

Лишая скроллбар его естественного вида, вы рискуете тем, что пользователи не смогут распознать в новом дизайне, элемент, которым они привыкли пользоваться. Вы должны быть уверены, что новый вид ассоциируется именно с полосой прокрутки. Якоб Нильсен написал неплохую статью «Scrolling and Scrollbars», в которой описал, что можно, а что нельзя делать, когда дело касается настройки скроллбара. Учитывайте это когда будете применять данный способ.

Оригинал: Styling Scrollable Areas

UPD: Пример горизонтальной полосы прокрутки.

Теги: • • •

Анимированное меню на Mootools

23 09/08
64

Сегодняшний урок описывает создание анимированного меню, с помощью библиотеки Mootools. По умолчанию внешний вид меню выглядит примерно так:

HTML представляет собой следующую структуру. У нас есть div с id="menu", который является контейнером для меню, заголовоки секций (элемент h3) а также меню секций (элемент ul):

Анимированное меню на Mootools

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="menu">
    <h3 class="toggler menusection">Секция 1</h3>
    <ul class="element menusection">
        <li><a href="">Ссылка 1</a></li>
        <li><a href="">Ссылка 2</a></li>
        <li><a href="">Ссылка 3</a></li>
        <li><a href="">Ссылка 4</a></li>
    </ul>
    <h3 class="toggler menusection">Секция 2</h3>
    <ul class="element menusection">
        <li><a href="">Ссылка 1</a></li>
        <li><a href="">Ссылка 2</a></li>
    </ul>
    <!-- По необходимости добавьте дополнительные секции... -->
</div>

Вы можете добавить дополнительные секции, используя структуру кода как в предыдущих секциях.

CSS код текущего примера следующий, однако оформление вы можете изменить по своему вкусу:

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

#menu h3{
    background:#E8D7B7;
    padding:4px;
    font-size:12px;
    color:#000;
    border-bottom:solid 2px #9C8B7B;
    cursor:pointer;
    font-weight:normal;
    text-transform:uppercase
}
#menu ul{
    list-style:none
}
#menu li{
    border-bottom:solid 1px #DEDEDE
}
#menu li a{
    padding:3px 6px;
    display:block;
    color:#5CA8CC;
    text-decoration:none
}
#menu li a:hover{
    background:#EFEFEF
}

Осталось добавить саму библиотеку Mootools:

1

<script type="text/javascript" src="mootools.js"></script>

и следующий код в секцию <head>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript">
window.addEvent('domready', function(){
    var accordion = new Accordion('h3.menusection', 'ul.menusection', {
        opacity: false,
        onActive: function(toggler, element){
            toggler.setStyle('color', '#333333');
            toggler.setStyle('background', '#F7F1E5');
        },
        onBackground: function(toggler, element){
            toggler.setStyle('color', '#333');
            toggler.setStyle('background', '#E8D7B7');
        }
    }, $('menu'));
}); 
</script>

Пользуемся!

Оригинал: Nice animated menu using CSS and Mootools

Теги: • • •

Выдвигающаяся панель

26 08/08
33

Сегодняшний урок описывает создание простой выдвигающейся панели, используя CSS и Mootools.

HTML код выглядит очень просто:

1
2
3
4
5
6

<div id="toppanel">
    <div id="slidepanel">
        <!-- Содержимое панели -->
    </div>
    <a href="#" id="toggle">Показать панель</a>
</div>

Мы имеем внешний контейнер <div id="toppanel">, который содержит саму панель <div id="slidepanel"> и кнопку показывающую и скрывающую эту панель.

CSS:

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

*{
    margin:0;
    padding:0;
}
#toppanel{
    position:absolute;
    left:0;
    top:0;
    width:100%
}
#slidepanel{
    background:#E8D7B7;
    border-bottom:3px solid #9C8B7B;
    text-align:right;
    width:100%
}
#toggle{
    font-size:0.75em;
    display:block;
    width:150px;
    height:25px;
    float:right;
    color:#fff;
    text-decoration:none;
    margin-right:30px;
    font-weight:bold;
    background:url(img/toggle.gif) no-repeat left top;
    padding-top:5px;
    text-align:center
}

Как и всегда, стили отвечающие за визуальное оформление вы можете менять как угодно.

Javascript:

Добавьте этот код в секцию <head> страницы.

1
2
3
4
5
6
7
8

window.addEvent('domready', function() {
    var myVerticalSlide = new Fx.Slide('slidepanel');
    myVerticalSlide.hide();
    $('toggle').addEvent('click', function(e){
        e.stop();
        myVerticalSlide.toggle();
    });
});

… и не забудьте добавить сам фреймворк также в секцию <head>:

1

<script type="text/javascript" src="mootools.js"></script>

Оригинал статьи Sliding top panel using mootools, но там пример в IE работает немного некорректно и панель не располагается над основным содержимым страницы.

Теги: •