0

我想知道以一致的方式从不同页面调用 HTML 结构的最佳方法是什么。

我有一个 webapp，我从不同的页面调用相同类型的结构。

例如，我有一个管理媒体的页面，其中显示了已上传媒体的列表以及一些用于执行某些操作（删除、下载、上传等）的按钮。但是，如果在另一个页面中显示了“选择媒体”按钮，则应该显示相同的视图。

我想做的是 - 接受 jQuery - 将此结构调用到一个对话框中，并且还能够拥有一个具有相同视图的 HTML 页面。仅更改一次此结构，应回复显示它的所有页面。

实际上，我是通过调用 jQuery 函数 load().dialog() 来做到这一点的，但我想知道是否有另一种更好的方法，比如在 Javascript 中创建一个带有渲染函数的类“MediaManagementView()”，或者类似的东西那。

我知道这样做的唯一方法是之前解释过的，但我认为有了你的意见和解决方案，我会得到一个更好的观点，而不是只使用我的观点。

感谢您的时间和答案！

4

2 回答 2

1

你在寻找这样的东西吗？

你需要 jQuery + jQuery UI

html:

<div id="dialog">
    <iframe id="myIframe" src=""></iframe>
</div>
<button id="dialogBtn">Open Media Manager</button>

javascript:

$(document).ready(function()
{
    $('#dialogBtn').click(function()
    {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            height: 600,
            open: function(ev, ui){
                     $('#myIframe').attr('src','http://www.google.com');
                  }
        });
        $('#dialog').dialog('open');
    });
});

您可以轻松地将其更改为将 iframe src/url 作为参数传递的函数。

于 2013-11-12T09:58:35.060 回答
0

鉴于这个问题很难得到更多答案，我会写下我为任何寻找可能方法的人所做的事情。

我用过的解决方案

最后，我使用了JQuery load() 函数来加载一个外部HTML 页面，其中只有我想要显示的部分。

此外，我不再使用JQuery dialog() 函数，因为它获取了 JQuery CSS 样式，我需要将它完全集成到我的 CSS 方案中。另外，我想要更多地控制按钮。所以我所做的是使用以下自定义函数：

function show_user_control(target_control, parameters){
    // target_control = the url we want to get the code from
    // parameters = the parameters passed to the url, in a JSON format

    /* 
      If we want to call this function and add event to its elements, perform some kind of actions when it finishes loading or call a function created within the external HTML, we will call it this way:
      $.when(show_user_control("URL_TO_LOAD")).done(function(element){ --HERE GOES THE ACTIONS TO EXECUTE-- })
    */

    return $.Deferred(function(){
        var self = this
        if(parameters === undefined) parameters = '';

        var user_control
        var parameters_url = "?"

        if(parameters != ''){
            parameters = JSON.parse(parameters)

            $.each(parameters, function(key,par){
                parameters_url += key+"="+par+"&"
            })
        }

        parameters_url = parameters_url.substring(0, parameters_url.length-1)

        $("body").append(
            $('<div class="user_control_lock"></div>').append(
                $('<div class="user_control"></div>').load(target_control + parameters_url, function(){
                    user_control = $(this)
                    user_control.center(true)

                    user_control.on(myDown, ".xlogout", function(){ // Add a global event, common to all the dialogs (if a span.xlogout is clicked, it's closed)
                        remove_user_control()
                    })

                    self.resolve(user_control)

                })
            )
        )
    })
}

function remove_user_control(target){
    // target = the JQuery object reference to the User_Control we want to remove
    if(target === undefined){
        $(".user_control_lock").last().empty()
        $(".user_control_lock").last().remove()
    }else{
        target.empty()
        target.remove()
    }
}

如果有人也有兴趣，则应用于一般div的 CSS如下：

.user_control_lock{
    background: rgba(24,24,24,0.8);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:9999;
}

.user_control{
    z-index: 9999;
    position:absolute;
}

.user_controldiv 通过JQuery插件 center() JsFiddle sample 居中。

希望它可以帮助某人。另外，接受更正！

亲切的问候。

于 2013-11-18T11:52:16.120 回答