Alex Ilin » Javascript

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

Alex — Thu, 05 Aug 2010 15:06:20 +0000

После публикации статьи «jQuery: Настраиваем внешний вид скроллбара» многие просили показать аналогичный пример, но с горизонтальной полосой прокрутки. Собственно вот и он.

Для создания будет использоваться jQuery плагин jScrollHorizontalPane.

HTML

Разметка очень простая. Необходим добавить контенту один внешний блок:

<div id="scroll-box">
    
</div>

CSS

Подключаем файл jScrollHorizontalPane.css, а также прописываем необходимые для работы и оформления стили:

#scroll-box{
    width:300px;
    height:150px;
    overflow:hidden;
    float:left;
}
#scroll-box p{
    width:1000px;
}
a.jScrollArrowLeft{
    height:20px;
}
a.jScrollArrowRight{
    height:20px;
}

Чтобы появился эффект переполнения, необходимо контенту установить ширину большую, чем ширина внешнего блока.

Javascript

Подключаем необходимые скрипты:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jScrollHorizontalPane.min.js"></script>

Ну и указываем к какому именно блоку установить прокрутку:

$(function(){
    $('#scroll-box').jScrollHorizontalPane({
        showArrows:true,
        arrowSize:20,
        scrollbarHeight:20,
        scrollbarMargin:0
    });
});

Немного о параметрах, используемых в примере.

showArrows — отвечает за отображение кнопок «Назад» «Вперёд» на полосе прокрутки
arrowSize — ширина этих кнопок в px (если не указано здесь, должна определяться через css)
scrollbarHeight — высота полосы прокрутки в px
scrollbarMargin — отступ справа от полосы прокрутки

Удачи!

jQuery: Сворачиваемые блоки

Alex — Fri, 12 Feb 2010 13:13:41 +0000

Небольшой пример демонстрирующий эффект сворачивания однотипных блоков (например постов в блоге или виджетов в сайдбаре) с помощью jQuery.

HTML

<div class="post">
    <div class="title">
        <h3><a href="" title="">Заголовок</a></h3>
        <p>Автор, 12.02.2010</p>
    </div>
    <div class="entry">
        
    </div>
</div>
 
<div class="post">
    <div class="title">
        <h3><a href="" title="">Заголовок</a></h3>
        <p>Автор, 12.02.2010</p>
    </div>
    <div class="entry">
        
    </div>
</div>
 
…

В данном примере присутствуют несколько постов. Скрываться будет их контентная часть.

CSS

.post {
    padding:10px 20px;
    position:relative;
    background:#eee;
    margin-bottom:20px
}
.inactive {
    color:#bbb
}
.post .title {
    position:relative;
    height:1%
}
.post .title h3 {
    font-size:1.4em
}
.post .title h3 a {
    text-decoration:none;
    color:#000
}
.inactive .title h3 a {
    color:#bbb
}
.post .title p {
    font-size:0.7em;
    font-style:italic;
    font-weight:bold;
    margin:0
}
.post .title span {
    position:absolute;
    right:0;
    top:30%;
    cursor:pointer;
    width:14px;
    height:14px;
    background:url(trigger.gif) no-repeat left bottom;
    display:block;
    font-size:0
}
#content .inactive .title span {
    background-position:left top
}
#content .post .entry {
    padding:10px 0
}

Span будет служить переключателем для сворачивания и разворачивания блоков и будет добавлен с помощью javascript. Поэтому пользователи с отключенным javascript не увидят ничего не делающий элемент.

Javascript

$('.title').append('');
$('.post span').each(function() {
   var trigger = $(this), state = false, el = trigger.parent().next('.entry');
   trigger.click(function(){
      state = !state;
      el.slideToggle();
      trigger.parent().parent().toggleClass('inactive');
   });
});

JQuery плагин: AnythingSlider

Alex — Mon, 28 Sep 2009 21:02:04 +0000

Автор блога CSSTricks, Chris Coyier, представил на своём блоге, созданный им слайдер контента, который сочетает в себе лучшие свойства подобных аналогов, а так же имеет некоторые новые возможности.

Возможности плагина следующие:

В слайде может быть любой контент.
Кнопки предыдущего и следующего слайдов.
Автоматически создаётся меню со ссылками на каждый слайд.
Возможность изменения текста ссылок на предыдущий и следующий слайды.
Автоматическая прокрутка слайдов.
Каждый слайд имеет якорь, что позволяет ссылаться на него.
Возможность использования нескольких экземпляров на одной странице (якоря будут работать на первом).
Пауза при наведении курсора мыши.

Демо

Параметры по умолчанию:

easing: "easeInOutExpo",        // Вид анимации. Все виды анимации кроме "linear" и "swing" требуют дополнительный плагин
autoPlay: true,                 // Добавляет функционал автоматической прокрутки
startStopped: false,            // Блокирует автоматическую прокрутку при первой загрузке
delay: 3000,                    // Временной интервал между переходами
animationTime: 600,             // Время анимации
hashTags: true,                 // Добавляет якоря к слайдам
buildNavigation: true,          // Генерация ссылок на каждый слайд
pauseOnHover: true,             // Пауза при наведении
startText: "Старт",             // Текст кнопки «Старт»
stopText: "Стоп",               // Текст кнопки «Стоп»

Подключается плагин также как и большинство других плагинов, поэтому описывать в сотый раз думаю не нужно, достаточно посмотреть приведённый пример. Оформление слайдера находится в файле slider.css. Для увеличения количества слайдов, нужно добавить нужное количество элементов li, в списке, находящемся внутри блока с классом wrapper.

Эффект увеличения миниатюр

Alex — Thu, 30 Apr 2009 09:45:01 +0000

Обнаружил на днях симпатичный эффект увеличения миниатюр изображений с помощью jQuery. Немного оптимизировал увиденное решение и решил опубликовать для общего пользования. А для личностей, которые негативно относятся к повсеместному использованию javascript, добавил вариант без использования оного.

HTML разметка представляет собой список, состоящий из миниатюр:

<ul id="gallery">
<li><a href="" title="Фото 1"><img src="spring.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="" title="Фото 2"><img src="spring2.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="" title="Фото 3"><img src="spring3.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="" title="Фото 4"><img src="spring4.jpg" width="100" height="100" alt="" /></a></li>
…
</ul>

Т.к. в первом случае описание изображения создаётся и отображается с помощью скрипта, то для варианта без javascript необходимо после миниатюры добавить элемент span c этим описанием.

CSS стили:

#gallery{
    list-style-type: none;
    height: 1%;
    width: 500px;
    margin: 0 auto;
    font-size: 0.75em;
    margin-bottom: 20px
}
#gallery:after{ /* Чтобы список «охватывал» вложенные элементы */
    content:"";
    display:block;
    clear:both
}
    #gallery li{
        margin:0 10px 10px 0;
        float:left
    }
        #gallery li a{
            position:relative;
            display:block;
            float:left;
            width:110px;
            height:110px;
            text-decoration:none
            }
        #gallery li img{
            padding:4px;
            background:#f0f0f0;
            border:solid 1px #ddd;
            position:absolute;
            left:0;
            top:0;
            -ms-interpolation-mode:bicubic /* Для нормального масштабирования изображений в IE6 и 7 */
        }
        #gallery li span{
            display:block;
            padding:5px;
            background:#f0f0f0;
            color:#666;
            position:absolute;
            top:-35px;
            left:-35px;
            width:170px
        }

А следующие стили нужно добавить в случае использования варианта без javascript:

#gallery li a:hover{
    z-index:100;
    display:inline
}
    #gallery li a:hover img{
        left:-40px;
        top:-40px;
        width:180px;
        height:180px
    }
    #gallery li a span{
        opacity:0.7; /* Если нужно сделать блок с информацией прозрачным */
        filter:alpha(opacity=70); /* Прозрачность в IE */
        visibility:hidden;
        cursor:pointer
    }
    #gallery li a:hover span{
        visibility:visible
    }

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

$(document).ready(function(){
    $("#gallery a").hover(function() {
        $(this).css({'z-index' : '10'});
        $(this).find('img').stop()
        .animate({
            top: '-40px',
            left: '-40px',
            width: '180px',
            height: '180px'
        }, 400);
        $(this).append('' + this.title + '');
        $(this).find('span').hide();
        $(this).find('span').fadeIn(500);
        }, function() {
        $(this).css({'z-index' : '0'});
        $(this).find('img').stop()
        .animate({
            top: '0',
            left: '0',
            width: '100px',
            height: '100px'
        }, 250);
        $(this).find('span').remove();
    });
});

Работа скрипта ничего необычного из себя не представляет. Всего лишь изменяются некоторые CSS свойства при наведении курсора на миниатюру, а также создаётся элемент span содержащий текст из атрибута title ссылки.

Альтернативные картинки для отсутствующих изображений

Alex — Mon, 06 Apr 2009 19:07:33 +0000

Отсутствующие изображения на вашем сайте могут показать вас или то, что вы предлагаете не с лучшей стороны. Со временем изображения по тем или иным причинам могут быть удалены без вашего ведома. В этом случае браузеры предлагают посетителю альтернативный контент. К несчастью у каждого браузера своё видение того, как этот контент представить и не всегда это выглядит лучшим образом.

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

Создайте изображение, подключите фреймворк и добавьте следующий javascript код:

$(document).ready(function() {
    $('img').error(function() {
        $(this).attr({
        src: 'missing.png',
        style:'border:3px solid #999;width:144px;height:144px;'
        });
    });
});

Оригинал: Use Custom Missing Image Graphics Using jQuery