Question

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

Answer 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设置为“窗口”并将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来计算。如果您具有完全控制权，则这是不必要的，但对于完整的独立插件可能是更好的选择。

Answer 2

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

你想要的是一个标签式界面。有关如何实施它的演示和文档，请参阅JQuery UI Tabs。

如果我完全错了，你正在寻找的是关于如何做正确的CSS标签的教程，请看看：

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

Answer 3

Soviut，

你其实是对的！我试图让JCarousel做一些它不是为它设计的东西。

但是，我也不想使用标签插件或任何类似的stuf，因为我需要完全控制输出。比如在需要时在标签中注入更多元素，如双击，加载等等等。

实际上我正在寻找一种方法来水平滚动div中的内容，左右箭头。更准确地说，我需要www.pageflakes.com中所见的选项卡的完全相同的结构/ p>

用户可以通过点击链接（或任何其他元素）来创建标签，只要他们有更多标签，然后是div的长度，按钮就可以内联编辑其名称将显示允许他们在div内滑动，我将有事件绑定到他们的负载，点击和双击事件。

总结一下，除了滑动/滚动部分外，我已经准备好了所有工作。只有我必须得到你们关于如何实现这一功能的帮助..

亲切的问候，

Answer 4

您正在寻找的不是制表符，而是可拖动的面板。这里可以找到一个例子，名为JQuery Portlets。可以找到有关Portlet的相关博客条目here。

您可能还想查看JQuery UI的可拖动，可放置和可排序插件。

内容宽度未知的jCarousel

4 个答案: