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 为您提供的东西，而不是与样式作斗争。

恕我直言，实现您想要的最简单的方法，如果您可以使用GET而不是POST，是放弃表单并href使用带有参数的适当 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 回答