0

プログラムでポップアップを作成しました。折りたたみ可能でリストビューはポップアップのコンテンツ内にあります

折りたたみ可能とリストビューは $.map、データをロードするために使用して動的に作成されます

ここに私のjsFiddleがあります

リストビューに表示される数を制限する方法はあるの<li>でしょうか?

例えば

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>

4 だけを表示させたいのですが、スクロール<li>すると5番目が表示されます<li><ul>

どうすればそれを達成できますか?!

の高さを設定しようとしましたが<ul>、うまくいきません...

下手な英語でごめんなさい... 私は台湾人です

私が何を言おうとしているのか理解できない場合は、教えてください

私はそれをよりよく説明しようとします

4

2 に答える 2

1

ソリューションで更新されたフィドルは次のとおりです。 http://jsfiddle.net/ezanker/CnSMr/2/

基本的に、折りたたみ可能な div (.popupcollapsediv) にクラスを割り当ててから、クラス .ulcontainerdiv を使用して UL をダイブ内に配置します。

    $.map(kennedy.webdb.userdata[0].Category, function (value, key) {
    return $("<div/>", {
        id: value.Name,
        "data-role": "collapsible",
        "data-inset": "false",
        class: "popupcollapsediv"
    }).append(
      $("<h2/>", {
          text: value.Name
      })).append(
        $("<div/>", {
          class: "ulcontainerdiv"
        }).append(
          $("<ul/>", {
            "data-role": "listview",
            "data-icon": "false"
          }).append(
    ...

次に、CSS を使用して各 UL を含む div の最大高さを設定し、含まれる UL がその最大高さよりも高い場合はスクロールを許可します。折りたたみ式によって作成された自動生成された div からパディングを削除します。

.ulcontainerdiv{
    max-height: 170px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.popupcollapsediv .ui-body-a {
    padding: 0;
    margin: 0;
}
于 2013-10-28T14:38:40.853 に答える
0

配列の値とインデックスの両方をコールバック関数に送信するためjQuery.map、次のようにコールバックに何かを含めてみませんか。

$.map( array, function ( value, index ) {
  // Make li here
  if ( index >= 4 ) {
    // Hide li here however you want, maybe just use .hide
  }
});
于 2013-10-27T13:43:02.363 に答える