Архив за Октябрь 2008

Плагин Featured Content Glider для jQuery

Еще один плагин для демонстрации слайдов. Содержимое отдельных кадров помещается в контейнер с уникальным ID. Контейнеры для отдельных кадров должны иметь одинаковое значение атрибута class. Для создания панели навигации в еще один контейнер с уникальным ID помещаются ссылки на отдельные кадры слайдшоу.

Для начала подключим в разделе head HTML-страницы три файла:

<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />
<script type="text/javascript" src="featuredcontentglider.js">

HTML:

<div id="canadaprovinces" class="glidecontentwrapper">

  <div class="glidecontent">
  Glide content 1 here
  </div>
 
  <div class="glidecontent">
  Glide content 2 here
  </div>

  <div class="glidecontent">
  Glide content 3 here
  </div>

</div>

<div id="p-select" class="glidecontenttoggler">
  <a href="#" class="prev">Prev</a>
  <a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
  <a href="#" class="next">Next</a>
</div>

JavaScript:

<script type="text/javascript">

featuredcontentglider.init({
    gliderid: "canadaprovinces", // ID of main glider container
    contentclass: "glidecontent", // Shared CSS class name of each glider content
    togglerid: "p-select", // ID of toggler container
    remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
    selected: 0, //Default selected content index (0=1st)
    persiststate: false, //Remember last content shown within browser session (true/false)?
    speed: 500, //Glide animation duration (in milliseconds)
    direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
    autorotate: true, //Auto rotate contents (true/false)?
    autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

Как видите, мы должны определить несколько параметров для управления слайдшоу:

  • gliderid - ID контейнера всех кадров
  • contentclass - имя класса отдельных кадров
  • togglerid - ID контейнера меню навигации
  • remotecontent - позволяет загружать кадры слайдшоу из внешнего файла на сервере, используя AJAX
  • selected - порядковый номер выбранного по умолчанию кадра (0 - первый кадр)
  • persiststate - запоминать (true) или нет (false) последний показанный кадр
  • speed - продолжительность в миллисекундах эффекта анимации при смене кадров
  • direction - определяет, как кадры будут сменять друг друга: “updown”, “downup”, “leftright” или “rightleft”
  • autorotate - разрешает (true) или запрещает (false) автоматическую смену кадров
  • autorotateconfig - если autorotate=true, задает интервал в миллисекундах между сменами кадров и количество полных циклов перед остановкой слайдшоу

Можно улучшить внешний вид меню навигации, используя CSS

<link rel="stylesheet" type="text/css" href="cssbuttonstoggler.css" />

и два изображения: square-gray-left.gif и square-gray-right.gif.

Закладки: CSS и фоновое изображение

Сегодня рассмотрим, как сделать закладки используя CSS и одно фоновое изображение для всех состояний закладки. Каждый элемент имеет закругленные уголки, а его ширина зависит от содержимого.

Каждая закладка может иметь три состояния:

  • Обычная закладка
  • Активная закладка
  • Закладка при наведении указателя мыши

Как уже было сказано ранее, нам понадобится всего лишь одно фоновое изображение:

Чтобы фон изменялся мы будем использовать позиционирование фона для каждого состояния:

  • Активное (background-position: xxx top)
  • Обычное (background-position: xxx 30px)
  • При наведении указателя (background-position: xxx 60px)

Теперь перейдем к HTML и CSS.

HTML:

<ul class="tab">
    <li><a href="index.html"><span>Главная</span></a></li>
    <li class="active"><a href="news.html"><span>Новости</span></a></li>
    <li><a href="articles.html"><span>Статьи</span></a></li>
    <li><a href="blog.html"><span>Блог</span></a></li>
    <li><a href="forum.html"><span>Форум</span></a></li>
    <li><a href="contact.html"><span>Контакты</span></a></li>
</ul>

Для того чтобы сделать закладку активной нужно добавить класс active этому элементу списка.

CSS:

ul, li {border:0; margin:0; padding:0; list-style:none;}
ul{
    border-bottom:solid 1px #DEDEDE;
    height:29px;
    padding-left:20px;
}
li{float:left;margin-right:2px;height:30px;overflow:hidden}
.tab a:link, .tab a:visited{
    background:url(tab.png) right 60px;
    color:#666;
    display:block;
    font-weight:bold;
    line-height:30px;
    text-decoration:none;
}
.tab a span{
    background:url(tab.png) left 60px;
    display:block;
    margin-right:14px;
    padding-left:14px;
}
.tab a:hover{
    background:url(tab.png) right 30px;
    display:block;
}
.tab a:hover span{
    background:url(tab.png) left 30px;
    display:block;
}
.active a:link, .active a:visited, .active a:visited, .active a:hover{
    background:url(tab.png) right 0 no-repeat;
}
.active a span, .active a:hover span{
    background:url(tab.png) left 0 no-repeat;
}

Плагин Cycle для библиотеки jQuery. Часть 3

Опции speedIn/speedOut и easeIn/easeOut позволяют более полно управлять эффектом перехода. Фактически, эти опции расширяют возможности опций speed и easing:

$.fn.cycle.defaults = {
    ...
    speed:       1000// speed of the transition (any valid fx speed value)
    speedIn:     null// speed of the "in" transition
    speedOut:    null// speed of the "out" transition
    ...
    easing:      null// easing method for both in and out transitions
    easeIn:      null// easing for "in" transition
    easeOut:     null// easing for "out" transition
    ...
};

Свойства speedIn и easeIn определяют скорость и easing-эффект при появлении следующего кадра. Если эти свойства не определены, они будут установлены в значения speed и easing соответственно.

Свойства speedOut и easeOut определяют скорость и easing-эффект при исчезновении текущего кадра. Если эти свойства не определены, они будут установлены в значения speed и easing соответственно.

Чтобы полностью использовать все возможности плагина Cycle необходимо понять назначение четырех опций:

  • cssBefore - стиль кадра перед его появлением
  • animIn - эффект при появлении нового кадра
  • cssAfter - стиль текущего кадра в момент его исчезновения
  • animOut - эффект при исчезновении текущего кадра

Для использования этих опций установите свойство fx в значение custom.

Если вы создали интересный эффект перехода, то его можно сохранить для дальнейшего использования:

$('#s6').cycle({
    fx: 'custom',
    cssBefore: { 
        top:  0,
        left: 0,
        width: 0,
        height: 0
        zIndex: 1 
    },
    animIn:  { 
        width: 200,
        height: 200 
    },
    animOut: { 
        top:  200,
        left: 200,
        width: 0,
        height: 0
    },
    cssAfter: { 
        zIndex: 0 
    }
});

Добавляем функцию:

$.fn.cycle.transitions.pinch = function($cont, $slides, opts) {
    var $el = $($slides[0]);
    var w = $el.width();
    var h = $el.height();
    opts.cssBefore = { top: 0, left: 0, width: 0, height: 0, zIndex: 1 };
    opts.animIn    = { width: w, height: h };
    opts.animOut   = { top: h, left: w, width: 0, height: 0 };
    opts.cssAfter  = { zIndex: 0 };
};

Пример использования:

$('#s1').cycle('pinch');

Опция nowrap запрещает переход к первому кадру после того, как был показан последний кадр.

Ссылки по теме: