JavaScript的导航辅助

我试图创建一个ul菜单伸出li元素以使用可用的宽度（100％）一个javascript算法智能流体。JavaScript的导航辅助

我在想这个流程的算法：

1. calculate the entire available with 
2. substract the total elements width to see what's left 
3. iterate the elements and substract 1px from the left width and assign 
    it to the smallest li until the iterator runs out of width

这是一个很好的方法还是将太laggy，因为这可能意味着几百次迭代？

编辑：评论/提供不持有一个好的答案，因为也许一个或多个元素一个答案举行冗长的文字，并且这些不应该得到任何额外的长度。这个问题需要作为唯一的最小元素可占的遗留像素的algoritmic解决方案每次迭代所以菜单有效strectched

更新后：对于那些困惑，这是我希望它伸展的方式：

1. A bank has a total bankroll of 100 dollars 
2. Jack has a 40% cut, Dennis has 6%, Minny has 1% 
3. The bank starts handing out moneyz, 1 dollar each time starting with the 
    poorest kid. 
4. In the end Jack has 40% while Dennis and Minny have both 30% 

Where the cuts stand for the number of characters in a li's child a node

注：我已阅读使用表显示在纯CSS的解决方案，但是这确实是没有任何好处作为底层<a>元素似乎不这样父元素伸展。

来源

2013-05-17 user2298943

你究竟想在这里做什么？你说延伸出来的菜单使用了可用的宽度_（原文如此），但这可以通过多种方式实现。最简单的方法是通过分割剩余宽度来为每个li元素添加边距或填充。如果你有三个元素，剩余400px，则400 /（3 * 2）= 66.6-ish左右填充每个li。 –

没有想到，这实际上是一个聪明的解决方案，如果你创建一个答案，我会接受它的感谢！事实上，这是行不通的，因为我有一个（或很多）一个元素（多个）与一个长文本，所以我不想给这些添加任何东西..它需要被algoritmicly设置 – user2298943

这太糟糕了，flexbox isn' t支持IE，否则这将是非常简单的。 – zzzzBov

你也可以用纯CSS，而不是通过使用锂元素ul元素的display: table财产和display: table-cell一个javascript办法做到这一点：

看到这个小提琴：

http://jsfiddle.net/ERsrf/

如果您想强制li元素具有相同的宽度，请将此属性添加到ul元素中：

table-layout:fixed;

来源

2013-05-17 16:00:19 Brewal

问题是这只是模拟我想要什么，当你在li节点上放置最大宽度和最小宽度时，里面的元素仍然不能拉伸以匹配他们的父母李 – user2298943

我已经更新你的小提琴来说明问题http://jsfiddle.net/ERsrf/1/，因为你可以看到较大的元素与较小的元素相比变得更大，同样A元素里面也没有覆盖li大小造成可点击区域中的“空洞” – user2298943

这是我使用表格显示http://jsfiddle.net/ERsrf/2/的多远，但最小和最大宽度真的是_static_助手明显 – user2298943

此答案可能有点进步，因为它依靠flexbox进行繁重工作。 Flexbox is only starting to be supported by IE10，因此除非您想忽略对IE的支持，否则这些技术可能还需要5年的时间才能在生产环境中可靠地使用。

简单的解决办法就是让<ul>行Flexbox的，同样弯曲所有<li>元素：

ul { 
    display: flex; 
    flex-direction: row; 
    list-style: none; 
    padding: 0; 
} 

li { 
    flex: 1; 
}

当然，在实践中，你需要添加浏览器的前缀，所以CSS将大头向上一点点。

Flexbox fiddle

来源

2013-05-17 16:02:07 zzzzBov

这说明我的问题，这个解决方案http://jsfiddle.net/jjTAB/1/ – user2298943

@ user2298943，[这样的事情会更合适吗？]（http://jsfiddle.net/jjTAB/2/） – zzzzBov

是的，这完全是完美的，我实现了Brewal在这里建议的http://jsfiddle.net/ERsrf/2/，但当然你不想要最大和最小宽度设置像这样.. – user2298943

每个元素添加到对象的数组（VAR elems的）像{ "width": 0, "number": 0, "LIs": [] }，由宽度数组排序，然后让你有额外的空间量。在那之后（伪代码如下）：

if(elems.length > 1) { 
     while(extraSpaceLeft > 0) { 
      leastWidth = elems object with lowest width; 
      secondLeastWidth = elems object with second lowest width; 
      toAdd = min(abs(leastWidth - secondLeastWidth),extraSpaceLeft); 
      toAdd -= toAdd % leastWidth.number; 
      extraSpaceLeft -= toAdd; 
      leastWidth += toAdd/leastWidth.number; 
      if(leastWidth.width === secondLeastWidth) combine the two objects 
      else if(leastWidth.width > secondLeastWidth) swap the two objects in the array 
     } 
    } else { elems[0].width += extraSpaceLeft; } 

    set the element width of each elem based on the elems widths

这实在是粗糙的伪代码，逻辑可能不完全正确的，但它应该是快了很多比一次添加一个像素。

来源

2013-05-17 18:07:04

这可能是最好的答案了 – user2298943

JavaScript的导航辅助

回答

相关问题