Я пытаюсь использовать плагин jCarousel для jQuery, чтобы предоставить пользователям моего сайта прокручиваемый (горизонтальный) контент.
Контент, который я упоминаю, в основном представляет собой определяемые пользователем <li> элементы, стилизованные таким образом, чтобы они выглядели как вкладка. поэтому в основном я пытаюсь добиться того же эффекта, что и вкладки на pageflakes.com. Как вы понимаете, пользователи сами создают вкладки и присваивают им имена.
jCarousel требует, чтобы вы указали фиксированную ширину для контента, например, все их примеры основаны на изображениях с фиксированной высотой и шириной. но в моем случае я не могу контролировать, как пользователь назовет свою вкладку... что делает невозможным для меня угадать ширину всего контейнера div.
Я попытался использовать глупый метод, такой как угадывание ширины программно, предполагая, что каждая буква составляет примерно 5 пикселей, и умножая 5 на длину слова, которое они дали в качестве имени для вкладки. даже в этом случае мне нужно было динамически манипулировать файлом css, что я не уверен, как это сделать, и даже если это возможно сделать.
Любые решения приветствуются...
<lu>
<li class='MyTab' id='578'>This is my tab</li>
<li class='MyTab' id='579'>of which I can</li>
<li class='MyTab' id='580'>never guess</li>
<li class='MyTab' id='581'><img src='img/bullet_key.png' /> The length of</li>
</lu>
Приведенный выше html создается программно через ajax_tabs_output.aspx, загружается в массив javascript, а jCarousel позаботится обо всем остальном.
function outputTabsArray() {
$.ajax({
url: 'ajax_tabs_output.aspx',
type: 'get',
data: 'q=array',
async: false,
success: function(out)
{
tabs_array = out;
}
});
}// end outputTabsArray
function mycarousel_itemLoadCallback(carousel, state)
{
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > tabs_array.length) {
break;
}
carousel.add(i, mycarousel_getItemHTML(tabs_array[i-1]));
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
return '<div class="MyTab" id="' + item.tab_id + "'>" + item.tab_name + '</div>';
};
$('#mycarousel').jcarousel({
size: tabs_array.length,
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});
