jQuery Mobile中的提交列表菜單

Question

我正在使用多個提交的表單來檢測哪個按鈕被點擊，但列表在jQuery Mobile菜單中沒有正確顯示。我希望它看起來很像JQM docs（點擊「菜單」按鈕），但它看起來像在this picture。 （如果不明顯，黑盒子是我編輯的名字。）我需要做些什麼才能讓它將提交按鈕合併到文檔中的好列表中？

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

Answer 1

簡短的回答是不要把提交按鈕（至少可見）列表視圖項目。 問題是，按鈕和lisview項目的內容區域有他們的風格padding, margin, border等等。而不是與造型戰鬥，你可以利用jQM給你的東西。

恕我直言，以達到你想要什麼，如果你能GET代替POST生活最簡單的方法，就是用錨點href到相應的網址與參數和使用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