0

どのボタンがクリックされたかを検出するために複数の送信があるフォームを使用していますが、リストが jQuery Mobile メニューに正しく表示されません。JQM ドキュメント([メニュー] ボタンをクリック) のようにきれいに表示したいのですが、代わりにこの図のように表示されます。（明らかでない場合、ブラックボックスは私が名前を編集していました。）ドキュメントのように送信ボタンを素敵なリストに折りたたむにはどうすればよいですか?

<a href="#navmenu" data-rel="popup" data-role="button">Navigate to different section</a>
    <div data-role="popup" id="navmenu">
        <form name="navmenuform" action="X.php" method="post">
            <ul data-role="listview" data-inset="true">
            <li data-role="divider">Navigate to:</li>
            <?php foreach ($array as $category) { ?>
            <li><input type="submit" name="nav<?php echo $category[0]; ?>" value="Section <?php echo $category[0] . ": " . $category[1]; ?>"></li>
            <?php } ?>
            </ul>
        </form>
    </div>
4

1 に答える 1

1

簡単な答えは、リストビュー項目に送信ボタン (少なくとも表示可能) を置かないことです。問題は、ボタンと lisview アイテムのコンテンツ領域paddingにmargin、border、 などのスタイリングがあることです。スタイリングと戦う代わりに、jQM が提供するものを活用することができます。

IMHO の代わりに使用できる場合GETPOSThref、必要なものを達成する最も簡単な方法は、フォームを捨てて、パラメーターを使用して適切な URL へのアンカーをリスト項目に入力し、次のrel="external"ように使用することです。

<div data-role="popup" id="navmenu" style="min-width:210px;">
    <ul data-role="listview" data-inset="true">
        <li data-role="divider">Navigate to:</li>
        <li><a rel="external" href="X.php?nav1=Section 1:1">Section 1:1</a></li>
        <li><a rel="external" href="X.php?nav2=Section 1:2">Section 1:2</a></li>
        <li><a rel="external" href="X.php?nav3=Section 1:3">Section 1:3</a></li>
        <li><a rel="external" href="X.php?nav4=Section 1:4">Section 1:4</a></li>
    </ul>
</div>

フォームにアクセスできるようにしたい場合POSTは、非表示の入力と少しの JS コードを利用できます。次のマークアップを作成するとします。

<div data-role="popup" id="navmenu" style="min-width:210px;">
    <form name="navmenuform" action="X.php" method="post" data-ajax="false">
        <ul data-role="listview" data-inset="true">
            <li data-role="divider">Navigate to:</li>
            <li><a href="nav1">Section 1:1</a></li>
            <li><a href="nav2">Section 1:2</a></li>
            <li><a href="nav3">Section 1:3</a></li>
            <li><a href="nav4">Section 1:4</a></li>
        </ul>
        <input id="param" type="hidden" name="" value="">
    </form>
</div>

タグを付けるのを忘れないdata-ajax="false"でくださいform。そうしないと、jQM はデフォルトで ajax 経由でフォームを送信しようとします。

次にclick、リスト項目でイベントを使用し、非表示の入力で名前と値を変更して、フォームを送信します。

$(document).on("pageinit", "#page1", function(){
    $("#navmenu ul li a").click(function(e){
        //Prevent default behavior since we need to submit the form instead of following the link
        e.preventDefault();
        //Change name and value attributes in out hidden input
        $("#param").attr("name", $(this).attr("href")).val($(this).text());
        //Submit the form
        $("form[name=navmenuform]").submit();
    });
});

ここにjsFiddleがあります

于 2013-02-08T02:08:46.850 に答える