内容宽度未知的jCarousel [英] jCarousel with unknown content width

问题描述

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

I am trying to use jCarousel plugin for jQuery in order to provide my website users with scrollable (horizontal) content.

我提到的内容基本上是用户定义的< li> 元素，其样式使其具有标签的外观和外观。所以基本上我试图在pageflakes.com中实现相同的效果。正如您可能想象的那样，用户正在创建标签并自行提供标签名称。

The content I am mentioning is basically user defined <li> elements, styled so that they have a feel and look of a tab. so basically I am trying to achieve the same effect of the tabs in pageflakes.com. As you may imagine, the users are creating tabs and providing tab names by themselves..

jCarousel需要您为内容指定固定宽度，例如，所有示例均为基于具有固定高度和宽度的图像。但在我的情况下，我无法控制用户将他/她的标签命名为什么......使我无法猜出总容器div的宽度。

jCarousel needs you to specify a fixed width for the content e.g., all their examples are based upon images that have fixed height and width. but in my case I have not control over what the user will name his/her tab...making it impossible for me to guess the width of the total container div.

我尝试使用一种愚蠢的方法，例如以编程方式猜测宽度，假设每个字母大约为5个像素，并将5与他们作为标签名称给出的单词的长度相乘。即使在这种情况下，我需要动态操作css文件，我不知道该怎么做，即使这样做也是可行的。

I have tried using a silly method such as guessing the width programatically assuming each letter being approx 5 pixels and multiplying 5 with the length of the word they have given as a name for a tab. even in this case, i needed to manipulate the css file dynamically which I am not sure how to do and even if it is feasable to do so..

任何解决方案赞赏...

Any solutions appreciated...

<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非常小心剩下的..

The above html is produced programatically through ajax_tabs_output.aspx, loaded into a javascript array and the jCarousel takes care of the rest..

     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}
        });

推荐答案

最接近你想要的东西可能是 jscrollhorizo​​ntalpane 。我是从来没有使用它所以我不能保证它作为解决这个特定问题的有效性。

The closest thing to what you want is probably jscrollhorizontalpane. I've never used it so I can't vouch for it's effectiveness as a solution to this specific problem.

如果你想要这种小部件不应该很难做到尝试它。我将分解我将使用的近似方法：

This sort of widget shouldn't be to hard to make if you want to attempt it. I'll break down the approximate method I would use:

确保使用大量包装。

<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>

我们要做的是将 space 元素移回在 window 元素中。这可以通过将 position：relative 设置为 window 和 position：absolute 来完成。到 space ，然后使用左移： - ?? px ，但我将使用 scrollLeft property。

What we'll be doing is shifting the "space" element back and forth inside "window" element. This can be done by setting position:relative to "window" and position:absolute to "space" and then shift it about using left:-??px, but I'll use the scrollLeft property.

添加一些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应用，

This is just the basic stuff that the technique needs. Some of this stuff could be applied by 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 来计算。如果您拥有完全控制权，则这是不必要的，但对于完整的独立插件可能是更好的选择。

The widths could also be calculated by looping through the "tab" elements and summing upp outerWidth. This is unnecessary if you have full control but might be a better choice for a full standalone plugin.

这篇关于内容宽度未知的jCarousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！