1

私は、リスト項目のコレクションがある以下の小さなアプリケーションに取り組んでいます.2番目の列にいくつあっても、すべてのリスト項目がボックス内にある必要があります. また、表示できるリスト項目の数を 10 個までに制限したいので、10 個の項目がある瞬間に 10 個目の項目を省略して [すべて表示] を表示する必要があります。したがって、ユーザーが [View All] をクリックすると、2 番目のページに移動し、すべてのアイテムを表示できます。

以下は私のコードです。

ありがとう

<!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>
4

1 に答える 1

2

表示されるアイテムの量を制限したい場合は、リスト アイテムの幅を固定し、オーバーフローを非表示にして追加のアイテムが表示されないようにすることができます。

<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」という ID を持つアンカーが埋め込まれていると想定しています。ここで私たちが何をしているかを見ることができます。CSS は、既定で [すべて表示] リンクを非表示にし、リストで固定の幅と高さを使用します。10 個を超えるアイテムがある場合、デフォルトのスタイリングでは 9 個しか表示できないため、それらのアイテムは表示されません。ただし、jquery スクリプトは Web ブラウザーに、すべてのリンクを表示するように指示します。次に、そのリンクにクリック イベント ハンドラーを割り当てます。これにより、クラスがリストに適用され、固定の高さが削除され、すべてのリスト項目を表示できるようになります。

これはさまざまな方法で処理できますが、これは 1 つの簡単な解決策です。また、ソートされていないリストに id またはクラスを追加して、CSS/JS コードでもう少し明示的にすることもできます。

于 2010-01-18T05:29:37.137 に答える