gpt4 book ai didi

javascript - 内容宽度未知的 jCarousel

转载 作者:行者123 更新时间:2023-11-29 10:00:41 26 4
gpt4 key购买 nike

我正在尝试使用 jQuery 的 jCarousel 插件,以便为我的网站用户提供可滚动(水平)的内容。

我说的内容基本都是用户自定义<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}
});

最佳答案

最接近您想要的可能是 jscrollhorizontalpane .我从未使用过它,所以我不能保证它作为解决这个特定问题的有效性。

如果您想尝试制作这种小部件应该不难。我将分解我将使用的大致方法:

确保使用大量包装器。

<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">&larr;</a>
<a href="#" class="right">&rarr;</a>
</div>

我们要做的是在“window”元素内来回移动“space”元素。这可以通过将 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”元素并对 outerWidth 求和来计算宽度。如果您拥有完全控制权,则这是不必要的,但对于完整的独立插件来说可能是更好的选择。

关于javascript - 内容宽度未知的 jCarousel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/397184/

26 4 0