jquery ui对话框和加载外部内容

Question

我有一个使用echo语句动态生成的页面列表.例:

<a href="<?php echo $action['href']; ?>"><span onclick="jQuery('#category_edit_dialog').dialog('open'); return false"><?php echo $action['text']; ?></a>

这是制作jquery ui对话框窗口的代码:

$.ui.dialog.defaults.bgiframe = true;
$(function() {
    $("#category_edit_dialog").dialog({
        width: 960,
        hide: 'slide',
        autoOpen: false,
    });

    $('#open_category_edit_dialog').click(function() {
        $('#category_edit_dialog').dialog('open');
        return false;
    });

});

我想要实现的是在点击链接的那一刻,jquery ui对话框将加载内容.所以问题更可能是如何加载用php生成的外部链接.

Answer 1

您拥有 HREF 锚点，因此您所要做的就是使用 jQuery 加载函数来获取 HTML 链接并将其放在您的页面上。

假设您的链接具有以下 HTML（锚点中奇怪的未闭合范围对我来说没有意义）：

<a href="<?php echo $action['href']; ?>" class="dialogLink"><?php echo $action['text']; ?></a>

您可以修改您的 javascript 使其工作如下：

$.ui.dialog.defaults.bgiframe = true;
$(function() {
    $("#category_edit_dialog").dialog({
        width: 960,
        hide: 'slide',
        autoOpen: false
    });

    $('a.dialogLink').click(function() {
        var url = $(this).attr('href');
        $('#category_edit_dialog').load(url, function() {
            $('#category_edit_dialog').dialog('open');
        });
        return false;
    });
});

它们的关键是将单击事件绑定到具有dialogLink 类的链接。单击时它将获取它指向的 URL，将在该 URL 找到的内容加载到页面上已有的对话框内容 div 中，一旦它具有 HTML，它将打开该对话框。