j未知内容宽度的卡号

Question

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

我提到的内容基本上是用户定义的<li>元素，样式使得它们具有标签的感觉和外观。所以基本上我试图达到与pageflakes.com中的选项卡相同的效果。您可能会想象，用户正在创建标签并自行提供标签名称。

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

我已经尝试过使用一种愚蠢的方法，如猜测宽度编程假设每个字母大约5像素，并乘以5他们已作为一个选项卡的名称给出的单词的长度。即使在这种情况下，我需要动态哪我不知道怎么做，哪怕是feasable这样做处理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> 

我们会做的是转变了“空间”元素里面来回穿梭“窗口”元素。这可以通过设置position:relative为“窗口”和做position:absolute为“空间”，然后其转移有关使用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(); 
    }); 

完成！

宽度也可以通过循环“”标签“元素和求和upp outerWidth来计算。如果您拥有完全控制权，则这是不必要的，但对于完整的独立插件可能是更好的选择。

Answer 2

从我可以告诉，你想要做的jCarousel做一些它从未被设计去做。根据我在JCarousel website上看到的内容，它似乎是一个图像旋转器。

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

如果我是完全错误的，所有你要找的是如何做正确的CSS标签的教程，看看：

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

Answer 3

Soviut，

你是其实很对！我正在试图让JCarousel做一些它不是为了设计的。

但是，我也不喜欢使用tab插件或任何类似的stuf，因为我需要对我的输出进行全面控制。比如在需要的时候注入更多的元素，比如双击，加载等等等等。

其实我在寻找一种方式来左右滚动水平方向上的div内容..更准确地说，我需要在www.pageflakes.com

中看到的标签完全相同的结构用户将能够通过点击链接（或任何其他元素）创建标签，他们将能够内联编辑它的名字，只要他们有更多的标签，然后长度的div，按钮将是可见的，让他们在div内滑动，我将有事件绑定到他们的负载，点击和双击事件。

总而言之，除滑动/滚动部分之外，我已准备好了所有工作。只有我必须从你们那里获得关于如何实现这个功能的帮助..

亲切的问候，

Answer 4

你正在寻找的不是标签，而是可拖动面板。一个例子可以在这里找到，称为JQuery Portlets。有关Portlets的相关博客条目可以在here找到。

您可能还想看看JQuery UI的Draggable，Droppable和Sortable插件。