вопрос списка навигации - PullRequest
Новая
       11

вопрос списка навигации

1 голос
/ 17 января 2010

Я работаю над небольшим приложением ниже, где есть коллекция элементов списка, все элементы списка должны быть в рамке, независимо от того, сколько их, как они могут быть во втором столбце.Также я хочу сохранить ограничение на количество элементов списка, которые могут отображаться, например, не более 10, поэтому, когда есть 10 элементов, 10-й элемент должен быть пропущен и должно отображаться «Просмотреть все».поэтому, когда пользователь нажимает кнопку «Просмотреть все», он может быть направлен на вторую страницу, и все элементы могут отображаться.

ниже - мой код.

Спасибо 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
    #container {

border: 1px dotted #D7D7D7; 
padding: 0px 5px 5px 8px; 
height: 250px; 
width: 250px;


} 


#heading {

}
ul {
    display: inline;
}
ul li{
    display: block;
}

</style>
</head>
<div id="container">
    <div id="heading">Style </div>
    <ul>
        <li> >>1 </li>
        <li> >>2 </li>
        <li> >>3 </li>
        <li> >>4 </li>
        <li> >>5 </li>
        <li> >>6 </li>

    </ul>



</div>
<body>
</body>
</html>

1 Ответ

2 голосов
/ 18 января 2010

Если вы хотите ограничить количество отображаемых элементов, вы можете сделать это с фиксированной шириной элементов списка и переполнением, скрытым, чтобы обрезать дополнительные элементы из отображаемых. 

<style>
   ul {
        height: 20px;
        overflow: hidden;
        width: 180px;
      }

   li {
        display: block;
        float: left;
        height: 20px;
        width: 20px;
      }

   ul.unlimited {
       height: auto;  
   }

   #view_all {
       display: none;
   }
</style>

Нет для отображения просмотра всей ссылки. Я бы посоветовал генерировать это на стороне сервера. Однако, если у вас нет контроля над этим, вы можете сделать это с помощью javascript, например, вы можете сделать простой скрипт jquery: 

<script>
        $(document).ready(function() {
          if ($("#container ul li").length > 9) {
            $("#view_all").show().click(function() {
              $("#container ul").addClass("unlimited");
              return false;
            });
          }
        });
</script>

Здесь я предполагаю, что у вас есть привязка, встроенная в ваш html с идентификатором "view_all". Вы можете увидеть, что мы делаем здесь. CSS скрывает просмотр всех ссылок по умолчанию и использует фиксированную ширину и высоту в списке. Если имеется более 10 элементов, они не будут видны, так как стиль по умолчанию позволяет отображать только 9 элементов. Тем не менее, скрипт jquery сообщит веб-браузеру, чтобы все ссылки были видны. Затем мы назначаем обработчик события щелчка по этой ссылке. Это применяет класс к списку, который удаляет фиксированную высоту, позволяя отображать все элементы списка.

Вы можете справиться с этим различными способами, но это одно простое решение. Также обратите внимание, что вы захотите добавить идентификатор или класс в несортированный список, чтобы вы могли быть немного более явными в своем коде CSS / JS.

...