Question

这里有一个jQuery noob。我目前正在开发一个带有可点击map和jQuery dialogs的项目。这是纲要：

1）每个区域都是可点击的热点的图像映射。

2）点击任何这些热点后，将在jQuery对话框中打开一个动态页面，其中包含与该位置相关的服务列表。动态页面是一个连接到数据库的PHP页面。

3）点击列表中的任何服务后，对话框中将打开另一个包含该服务信息的动态页面。动态页面将再次成为连接数据库的PHP页面。

现在，在服务视图（第3部分）中，我想动态添加一个“后退”按钮，将用户带回服务列表。但是在服务列表中，应该隐藏此按钮。我该如何实现呢？

我的代码的另一个问题是如果用户点击地图中的某个地点，然后点击其他地点而不先关闭对话框，则服务列表将停止工作的链接。我已经通过制作对话模式来绕过这个，这会强制用户在再次与地图交互之前关闭对话框，但为了完整性，如何使其在非模态对话框上工作？ < / p>

这是我的代码的一个愚蠢版本（地图替换为列表）。

map.php（使用jQuery）：

<script>
$(document).ready(function() {
    $(".opencategory").click(function(e) {
        e.preventDefault();
        $("#popup").load("category.php",{
             categoryid: $(this).data("categoryid") }, 
             function() {
                $("#popup").dialog("open");
             });
        });

    $("#popup").dialog( {
        autoOpen: false,
        modal: true,
        buttons: [ {
            text: "Back",
            click: function() {
                // ???
            }
        }, {
            text: "Close",
            click: function() {
                $(this).dialog("close");
            }
        } ],
        open: function() {
            $(".openservice").click(function(e) {
                e.preventDefault();
                $("#popup").load("service.php", { 
                    serviceid: $(this).data("serviceid") 
                });
            });
        }
    });
});
</script>
<body>

<ol>
<li><a href="#" data-categoryid="1" class="opencategory">Category 1</a></li>
<li><a href="#" data-categoryid="2" class="opencategory">Category 2</a></li>
<li><a href="#" data-categoryid="3" class="opencategory">Category 3</a></li>
<li><a href="#" data-categoryid="4" class="opencategory">Category 4</a></li>
<li><a href="#" data-categoryid="5" class="opencategory">Category 5</a></li>
</ol>

<div id="popup"></div>    
</body>

category.php：

<?php $categoryid = $_POST["categoryid"]; ?>

<p>Services of category <?php echo $categoryid ?>:</p>
<ul>
<li><a href="#" data-serviceid="1" class="openservice">Service 1</a></li>
<li><a href="#" data-serviceid="2" class="openservice">Service 2</a></li>
<li><a href="#" data-serviceid="3" class="openservice">Service 3</a></li>
<li><a href="#" data-serviceid="4" class="openservice">Service 4</a></li>
<li><a href="#" data-serviceid="5" class="openservice">Service 5</a></li>
</ul>

service.php：

<?php $serviceid = $_POST["serviceid"]; ?>

<p>Information of service <?php echo $serviceid ?></p>

Answer 1

好吧，我最后用两个对话框做了。带有服务列表的类别对话框只有一个“关闭”按钮，它可以完成预期的操作。在类别对话框顶部打开的服务对话框具有“后退”和“关闭”按钮。 “后退”仅关闭服务对话框并显示其下的类别对话框，“关闭”立即关闭。在服务对话框中，我还必须更改“x”按钮的行为以关闭两个对话框。节目和隐藏效果也进行了一些微调。

我对这个解决方案不是很满意，但是我很着急，所以现在必须这样做。我很高兴听到更好的解决方案。

这是更新后的map.php：

<script>
$(document).ready(function() {
    $(".opencategory").click(function(e) {
        e.preventDefault();
        $("#category").dialog("option", "show", true);
        $("#category").dialog("option", "hide", true);
        $("#category").load("category.php", {
            categoryid: $(this).data("categoryid")
        }, function() {
            $("#category").dialog("open");
        });
    });

    $("#category").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        draggable: false,
        height: 500,
        width: 500,
        show: true,
        hide: true,
        closeText: "Close",
        buttons: [{
            text: "Close",
            click: function() {
                $(this).dialog("close");
            }
        }],
        open: function() {
            $("#category").find(".openservice").click(function(e) {
                e.preventDefault();
                $("#service").load("service.php", {
                    serviceid: $(this).data("serviceid")
                }, function() {
                    $("#service").dialog("open");
                });
            });
        }
    });

    $("#service").dialog({
        autoOpen: false,
        modal: false,
        resizable: false,
        draggable: false,
        height: 500,
        width: 500,
        show: true,
        hide: true,
        closeText: "Close",
        buttons: [{
            text: "Back",
            click: function() {
                $(this).dialog("close");
            }
        }, {
            text: "Close",
            click: function() {
                $(this).dialog("close");
                $("#category").dialog("option", "show", false);
                $("#category").dialog("option", "hide", false);
                $("#category").dialog("close");
            }
        }],
        open: function() {
            $(this).closest(".ui-dialog").find(".ui-dialog-titlebar-close").click(function() {
                $("#category").dialog("option", "show", false);
                $("#category").dialog("option", "hide", false);
                $("#category").dialog("close");
            });
        }
    });
});
</script>
<body>

<ul>
<li><a href="#" data-categoryid="1" class="opencategory">Category 1</a></li>
<li><a href="#" data-categoryid="2" class="opencategory">Category 2</a></li>
<li><a href="#" data-categoryid="3" class="opencategory">Category 3</a></li>
<li><a href="#" data-categoryid="4" class="opencategory">Category 4</a></li>
<li><a href="#" data-categoryid="5" class="opencategory">Category 5</a></li>
</ul>

<div id="category"></div>
<div id="service"></div>
</body>

Answer 2

哦，我意识到我应该发布这个作为答案而不是评论，所以有人可能会真的看到它。

查看我最初想法的小提琴，更新：http://jsfiddle.net/VqraY/1/

我设法让按钮工作，但服务链接的问题仍然存在。 单击类别→单击服务→单击返回→链接不再起作用。我认为这是因为我在对话框的open事件中声明了$(".openservice").click()函数。如何规避这个问题？我可以在两者之间关闭对话框并立即再次打开它，但这也会触发显示并隐藏对话框的效果，并且由于模态对话框的背景变暗而使屏幕闪烁。

在jQuery对话框中打开动态页面，添加后退按钮

2 个答案: