Самая близкая вещь к тому, что вы хотите, вероятно, jscrollhorizontpane . Я никогда не использовал его, поэтому я не могу поручиться за его эффективность в качестве решения этой конкретной проблемы.
Этот виджет не должен быть слишком сложным, если вы хотите попробовать его. Я сломаю приблизительный метод, который я использовал бы:
Обязательно используйте много оберток.
<div class="scrollable">
<div class="window">
<div class="space">
<ul class="tabs">
<li class="tab">...</li>
<li class="tab">...</li>
<li class="tab">...</li>
</ul>
</div>
</div>
<a href="#" class="left">←</a>
<a href="#" class="right">→</a>
</div>
То, что мы будем делать, это смещение элемента " space " назад и вперед внутри элемента * window . Это можно сделать, установив position:relative в " window " и position:absolute в " space ", а затем сдвинув его о left:-??px, но я буду использовать scrollLeft собственность.
Добавить CSS.
.window {
overflow : hidden;
width : 100%;
}
.space {
width : 999em; /* lots of space for tabs */
overflow : hidden; /* clear floats */
}
.tabs {
float : left; /* shrink so we can determine tabs width */
}
.tab {
float : left; /* line tabs up */
}
Это просто основные вещи, которые нужны технике. Некоторые из этих вещей могут быть применены jQuery,
Добавить события в окно изменения размера.
$(window)
.resize(function () {
var sz = $('.window');
var ul = sz.find('ul');
if ( sz.width() < ul.width() ) {
$('.scrollable a.left, .scrollable a.right').show();
}
else {
$('.scrollable a.left, .scrollable a.right').hide();
}
})
.trigger('resize');
Добавление событий к кнопкам прокрутки.
$('.scrollable a.left').hover(
function (e) {
var sz = $('.window');
sz.animate({ scrollLeft : 0 }, 1000, 'linear');
},
function (e) {
$('.window').stop();
});
$('.scrollable a.right').hover(
function (e) {
var sz = $('.window');
var margin = sz.find('ul').width() - sz.width();
sz.animate({ scrollLeft : margin }, 1000, 'linear');
},
function (e) {
$('.window').stop();
});
Готово!
Ширина также может быть рассчитана путем циклического перебора элементов " tab " и суммирования upp outerWidth. Это не нужно, если у вас есть полный контроль, но может быть лучшим выбором для полностью автономного плагина.