Многострочный слайдер UL?

Question

Вот что мне нужно сделать:

Мне нужно, чтобы некоторые элементы списка (они будут доступны для тегов статьи) отображали встроенный блок в фиксированной области.Будет много таких пунктов списка, и мне нужно, чтобы они были обернуты до 3 строк, но это все.После этого мне нужно каким-то образом ограничить их, чтобы они не опускались до четвертой строки, и вместо этого у меня был какой-то ползунок jQuery, чтобы я мог прокрутить вправо и найти больше тегов.

Эти теги будутбыть извлеченным с сервера и не будет жестко закодированным, поэтому я не думаю, что смогу создавать отдельные списки.Кроме того, каждый тег будет иметь переменную ширину.

Я немного застрял и не уверен, возможно ли это даже выполнение.Любые указатели в правильном направлении приветствуются.

Спасибо!

Answer 1

Хм, хорошо, теперь, когда у меня есть общее представление о том, что вы хотели, я собрал это демо , но главное отличие в том, что он прокручивается вверх и вниз, а не справа налево.

Я думаю, что вертикальный ползунок работает лучше всего, потому что ширина тегов очень изменчива. Это и сделало кодирование намного проще;)

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

});