内容宽度未知的 jCarousel

Posted 2023-05-09

技术标签:

【中文标题】内容宽度未知的 jCarousel【英文标题】：jCarousel with unknown content width 【发布时间】：2010-09-28 16:07:26 【问题描述】：

我正在尝试为 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
        );

【问题讨论】：

【参考方案1】：

最接近您想要的可能是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”元素并求和 pouterWidth 来计算。如果您有完全控制权，这是不必要的，但对于完整的独立插件可能是更好的选择。

【讨论】：

【参考方案2】：

据我所知，您正在尝试让 JCarousel 做一些它从未设计过的事情。根据我在JCarousel website 上看到的内容，它似乎是一个图像旋转器。

听起来您想要的是一个选项卡式界面。有关如何实现它的演示和文档，请参阅 JQuery UI Tabs。

如果我完全错了，而您正在寻找的只是有关如何正确使用 CSS 选项卡的教程，请查看：

http://unraveled.com/projects/css_tabs/

【讨论】：

【参考方案3】：

苏维埃，

其实你说的很对！我试图让 JCarousel 做一些它不是为它设计的事情。