Question

这是我需要做的事情：

我需要能够允许一些列表项（它们是文章的可用标签）在固定区域内显示内联块。将会有很多这些列表项，我需要它们最多包含3行，但这就是它。在那之后，我需要一些方法来限制这些，所以他们不会打到第四行，而是有一些jQuery滑块，所以我可以滚动到右边找到更多的标签。

这些标签将从服务器中提取，不会被硬编码，因此我不认为我可以创建单独的列表。此外，每个标签都是可变宽度。

我有点卡住，不确定这是否是可能的执行。任何指向正确方向的人都会受到赞赏。

谢谢！

Answer 1

嗯，现在好了，我对你想要的东西大致了解，我把this demo放在一起，但主要区别在于它上下滚动而不是从右到左。

我认为垂直滑块效果最好，因为标签的宽度是如此可变。这使编码变得更容易;）

CSS

h2 {
  font-size:.8em;
  margin:0 5px 10px;
}

#wrap {
  padding:20px;
  background:#DDD;
  height:170px;
  width:680px;
}

#up, #down {
  float: right;
  line-height: 3em;
  margin-top: 1em;
}

#down {
  clear: right;
  margin-top: 4em;
}

#up a, #down a {
  text-decoration:none;
  color:#FFF;
  font-weight:bold;
  font-family:serif;
  font-size:2em;
  display:block;
}

#up a:hover, #down a:hover {
  color: #999;
}

#window {
  width: 90%;
  height: 9em;
  overflow: hidden;
}

ul {
  padding:0;
  margin:0 45px 0 0;
}

ul li {
  padding:10px;
  float:left;
  margin:5px;
  background:#777;
  list-style-type:none;
  color:#FFF;
}

HTML

<div id="wrap">
  <div id="up" class="disabled"><a href="#">&#9650;</a></div>
  <div id="down"><a href="#">&#9660;</a></div>
  <h2>Available Tags</h2>
  <div id="window">
    <ul>
      <li>Lorem ipsum</li>
      <li>dolor sit amet</li>
      <li>consectetur</li>
      <li>adipiscing elit</li>
      <li>Pellentesque</li>
      <li>pellentesque justo</li>
      <li>Sed in rutrum lectus</li>
      <li>Vivamus lorem dui</li>
      <li>auctor vitae</li>
      <li>suscipit id</li>
      <li>mollis tempus tellus</li>
      <li>Nullam in turpis sem</li>
      <li>Nulla molestie</li>
      <li>fermentum dictum</li>
      <li>Donec arcu lacus</li>
      <li>lacinia a pretium in</li>
      <li>bibendum eget felis</li>
      <li>Praesent gravida sapien mi</li>
      <li>Mauris purus justo</li>
      <li>vestibulum et volutpat non</li>
      <li>condimentum sit amet est</li>
      <li>Aenean non augue</li>
      <li>tellus rutrum commodo</li>
      <li>Duis malesuada</li>
      <li>tristique diam nec pharetra</li>
      <li>Praesent a facilisis dolor</li>
      <li>Praesent eget orci</li>
      <li>id nisl interdum consectetur</li>
      <li>Quisque ultrices hendrerit risus</li>
      <li>aliquam gravida dolor laoreet sed</li>
      <li>Pellentesque tristique</li>
      <li>commodo eros ac vestibulum</li>
      <li>Curabitur ipsum dui</li>
      <li>lacinia vitae hendrerit et</li>
      <li>luctus in eros</li>
    </ul>
  </div>
</div>

的jQuery

$(function(){
  var delay = 500,
  t, win= $('#window'),
  up = $('#up'),
  down = $('#down'),
  winH = win.height() + 10, // 10 = top + bottom margin of li
  bottom = win[0].scrollHeight - winH;

  up
  .click(function(){
    t = win.scrollTop();
    if (t - winH <= 0) {
      t = 0;
      $(this).addClass('disabled').fadeTo(delay, 0);
    } else if (down.hasClass('disabled')) {
      down.removeClass('disabled').fadeTo(delay, 1);
    }
    win.animate({ scrollTop: t - winH}, delay);
  })
  .addClass('disabled')
  .fadeTo(delay, 0);

  down.click(function(){
    var t = win.scrollTop();
    if (t + winH >= bottom) {
      t = bottom;
      down.addClass('disabled').fadeTo(delay, 0);
    } else if (up.hasClass('disabled')) {
      up.removeClass('disabled').fadeTo(delay, 1);
    }
    win.animate({ scrollTop: t + winH}, delay);
  });

});

多线UL滑块？

1 个答案: