1

私はいくつかのネストされたリストを動的に構築しています。正確に理解できるように、少し抽象化した例を示します。

サブカテゴリを追加するには、次のようにします。

obj.append('<ul id="' + id_ul + '"></ul>');
$("#" + id_ul).append('<li id="' + id + '"><h3>' + name + '</h3><p>' + text + '</p></li>');
$("#" + id_ul).append('<li id="' + id2 + '"><h3>' + name2 + '</h3><p>' + text2 + '</p></li>');

そして、これらのカテゴリのいずれかにアイテムを追加するには、次のようにします。

obj.append('<ul id="' + id_ul + '"></ul>');
$("#" + id_ul).append('<li id="' + id + '" data-icon="false"><a id="' + ida + '" href="#"><h3>' + name + '</h3><p>' + text + '</p><p class="ui-li-aside"><strong>' + info + '</strong></p></a></li>');
$("#" + id_ul).append('<li id="' + id2 + '" data-icon="false"><a id="' + ida2 + '" href="#"><h3>' + name2 + '</h3><p>' + text2 + '</p><p class="ui-li-aside"><strong>' + info2 + '</strong></p></a></li>');

もちろん、obj は常に、新しいサブカテゴリまたはアイテムを関連付けたい親オブジェクトです。したがって、IDに追加することですべてを行います。

私はこのコードをバージョン 1.0.1 で使用し、正常に動作し、1.1.1 に切り替えました (1.2.0 アルファにも同じ問題があります)。これが私の問題です:

  • ネストされたリストにカテゴリのみを含むページ: 正常に動作します
  • ネストされたリスト内のアイテムのみを含むページ: 正常に動作します
  • ネストされたリストにカテゴリとアイテムの両方を含むページ:リストが画面の高さを拡張する場合、スクロールできず、スクロールできないページの1つが表示された後、ナビゲーション内の他のすべてのページも、全体をリロードするまでスクロールできなくなりますページ

ネストされたリストビューとJQueryMobile 1.1.1からのスクロールに関する既知の問題はありますか? または、リストの作成が間違っていますか?

これは現時点で私を夢中にさせているので、どんなアイデアでも大歓迎です!

編集：

これは、subcat と 2 つの項目を含む最終的なリストのサンプル HTML です。

<div data-role="page" data-url="mylist&amp;ui-page=ul_4" data-theme="c" data-count-theme="c" tabindex="0" class="ui-page ui-body-c ui-page-active">

<div data-role="header" data-theme="c" class="ui-header ui-bar-c" role="banner">
        <div class="ui-title">myuppercat</div>
</div>

<div data-role="content" class="ui-content" role="main">
    <ul id="ul_4" class="ui-listview">
        <li id="li_2134" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
            <div class="ui-btn-inner ui-li">
                <div class="ui-btn-text">
                    <a href="#mylist&amp;ui-page=ul_4" class="ui-link-inherit"><h3 class="ui-li-heading">mysubcat</h3><p class="ui-li-desc"></p></a>
                </div>
                <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
            </div>
        </li>
        <li id="li_2136" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
            <div class="ui-btn-inner ui-li">
                <div class="ui-btn-text">
                    <a id="2136" href="#" onclick="javascript:dosomething(this)" class="ui-link-inherit"><p class="ui-li-aside ui-li-desc"><strong>somedetail</strong></p><h3 class="ui-li-heading">item1</h3><p class="ui-li-desc"></p></a>
                </div>
            </div>
        </li>
        <li id="li_2137" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
            <div class="ui-btn-inner ui-li">
                <div class="ui-btn-text">
                    <a id="2137" href="#" onclick="javascript:dosomething(this)" class="ui-link-inherit"><p class="ui-li-aside ui-li-desc"><strong>somedetail</strong></p><h3 class="ui-li-heading">item2</h3><p class="ui-li-desc"></p></a>
                </div>
            </div>
        </li>
    </ul>

</div>

4

0 に答える 0