Javascript 内容宽度未知的jCarousel

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

我提到的内容基本上是用户定义的

元素，它们的样式使它们具有选项卡的感觉和外观。因此，基本上我正在尝试实现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}
        });

函数输出AbsArray（）{
$.ajax({
url:'ajax\u tabs\u output.aspx'，
键入：“get”，
数据：“q=array”，
async:false，
成功：功能（输出）
{
tabs_数组=out；
} 
});
}//端输出阵列
函数mycarousel_itemLoadCallback（carousel，state）
{
for（var i=carousel.first；i tabs_array.length）{
打破
}
添加（i，mycarousel_getItemHTML（tabs_数组[i-1]）；
}
};
/**
*项目html创建助手。
*/
函数mycarousel_getItemHTML（项目）
{
return“据我所知，你试图让JCarousel做一些它从未设计过的事情。根据我在网站上看到的，它似乎是一个图像旋转器

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

如果我完全错了，而您想要的只是一个关于如何使用正确的CSS选项卡的教程，请查看：

Soviut

事实上你说得很对！我正试图让JCarousel做一些它不是为之设计的事情

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

实际上，我正在寻找一种在div中水平滚动内容的方法，在左侧和右侧带有箭头。更准确地说，我需要与中所示的选项卡结构完全相同的选项卡

用户可以通过点击链接（或任何其他元素）来创建选项卡，他们可以内联编辑其名称，每当他们有超过div长度的选项卡时，按钮将可见，允许他们在div内滑动，我将事件绑定到他们的加载、单击和双击事件

总而言之，除了滑动/滚动部分之外，我已经准备好了所有的东西，并且可以正常工作。关于如何实现这一功能，我只需要得到你们的帮助

您好，
您要查找的不是选项卡，而是可拖动的面板。可以在此处找到一个名为的示例。可以找到有关Portlet的相关博客条目

您可能还需要研究的是可拖动、可拖放和可排序的插件。
最接近您需要的插件可能是。我从未使用过它，因此无法保证它作为解决此特定问题的有效性

如果您想尝试，这种小部件应该不难制作。我将详细介绍我将使用的近似方法：

确保使用大量包装纸。

<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 {
  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 */
}

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

这只是这项技术所需要的基本材料。其中一些材料可以被jQuery应用

添加事件以调整窗口大小。

<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 {
  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 */
}

$(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
外径来计算。如果您拥有完全控制权，这是不必要的，但对于完全独立的插件来说可能是更好的选择。
如果您可以显示当前正在工作的演示，以便更容易理解您的问题，这将是一个很好的选择。