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

21 11/08
13

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

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

<div id="container">
  <a id="prev" href="" title="">?</a>
  <a id="next" href="" title="">?</a>
  <div id="content">
    <div class="contbox">
      <!-- Контент  -->
    </div>
    <div class="contbox">
      <!-- Контент  -->
    </div>
 
    <!-- При необходимости добавьте дополнительные блоки -->
 
  </div>
</div>

#prev и #next используются для прокрутки, можно также включить автозапуск. Содержимое находится в блоках с классом contbox.

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

#container{
  width:500px;
  margin:20px auto 0 auto
}
#prev, #next{
  display:block;
  width:50%;height:40px;
  text-align:center;
  color:#fff;
  font:2em/35px Arial, Helvetica, sans-serif;
  text-decoration:none;
  background:#757364
}
#prev:hover, #next:hover{
  background:#D9AA81
}
#prev{
  float:left
}
#next{
  float:right
}
#content{
  background:#E6E6D1;
  clear:both
}
  #content .contbox{
    padding:10px;
    width:480px
}

Подключаем следующие файлы в head:

1
2
3
4
5
6
7
8

<!-- Библиотека jQuery -->
<script type="text/javascript" src="jquery.js"></script>
 
<!-- Плагин jQuery Cycle Plugin -->
<script type="text/javascript" src="jquery.cycle.js"></script>
 
<!-- Плагин jQuery Easing Plugin -->
<script type="text/javascript" src="jquery.easing.js"></script>

jQuery Easing Plugin необходим для использования дополнительных эффекты перехода. Нужный эффект передаётся в значении параметра easing. В данном примере используется эффект easeInOutExpo

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

<script type="text/javascript">
  jQuery(window).bind("load", function() {
    $('#content').cycle({ 
      fx:     'scrollHorz',
      prev:   '#prev',
      next:   '#next',
      height: 250,
      timeout: 0,
      easing: 'easeInOutExpo'
    });
  });
</script>
Теги: •

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

03 10/08
118

Часто бывают ситуации когда необходимо сделать нестандартную полосу прокрутки у блока. Для решения этой проблемы я использую 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>
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
}

Для работы плагина необходимо подключит следующие файлы:

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 необходим в том случае, если необходима поддержка прокрутки колесом мыши.

1
2
3
4

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

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

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

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

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

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

Теги: • • •

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

23 09/08
64

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

Меню представляет собой следующую структуру. У нас есть 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>
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.

1
2
3
4
5
6

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

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

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
}

Стили отвечающие за визуальное оформление вы можете менять по своему вкусу.

Подключаем фреймворк:

1

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

И добавляем следующий JS код:

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();
    });
});
Теги: •