5

子のない要素が編集ボタンを持つことができるリストビューを作成しようとしています。ユーザーがこのボタンをクリックすると、ポップアップ メニューが表示されます。

ここに画像の説明を入力

以下は、単一の JQM ページ内のコードです。

<div data-role="content">
<ul data-role="listview">
    <li>
        <h3>Colors</h3>
        <ul>
            <li>Blue
                <p class="edit">
                    <a href="#" onclick="openEditMenu()" data-role="button"
                        data-icon="gear" data-inline="true" data-iconpos="notext">Edit</a>
                </p>
            </li>
            <li>Orange</li>
            <li>Purple</li>
        </ul>
    </li>
    <li><h3>Item</h3>
        <p class="edit">
            <a href="#" onclick="openEditMenu()" data-role="button"
                data-icon="gear" data-inline="true" data-iconpos="notext">Edit</a>
        </p></li>
    </ul>
</div>
<div data-role="popup" id="popupMenu">
    <ul data-role="listview" data-inset="true" >
            <li data-role="divider" data-theme="a">Edit Element</li>
            <li><a href="#">Edit</a></li>
            ...
    </ul>
</div>
<script>
    function openEditMenu() {
        $('#popupMenu').popup('open');
    }
</script>

最初のレベルでは、これは期待どおりに機能します。ネストされたリストの 2 番目のレベルに移動すると、ポップアップは表示されません。

JQM のポップアップは同じページに配置する必要があることがわかりました。リストビューのサブページで JQM がポップアップを見つけられないようです。

誰かがそのような解決策をうまく実現しましたか、それとも JQM 1.2 のポップアップ機能では不可能ですか?

jsfiddle では、サンプル コードを見つけることができます。

ヒントや提案をありがとう。

4

2 に答える 2

3

上記のコメントで述べたように、jQm ドキュメントから 'ポップアップ div は、リンクと同じページ内にネストする必要があります。'。

あなたが試すことができるのは、ポップアップを複製して他のページに添付することです。次に、再初期化して開きます。次のようなものを試すことができます：

var nestedLiPage = $(".ui-page-active");
$('#popupMenu').clone().appendTo(nestedLiPage).popup().popup('open');
于 2012-10-26T07:05:14.997 に答える