Лучший способ вызвать структуру HTML с разных страниц

Question

Лучший способ вызвать структуру HTML с разных страниц

0

Мне было интересно, как лучше всего вызывать структуру HTML с разных страниц в последовательном порядке.

У меня есть webapp, в котором я вызываю с разных страниц один и тот же тип структуры.

Например, у меня есть страница для управления носителями, в которых отображается список загруженных медиа и некоторые кнопки для выполнения некоторых действий (удаление, загрузка, загрузка и т.д.). Однако этот же вид должен отображаться, если на другой странице отображается кнопка "выбрать носитель".

То, что я хотел бы сделать, - принять jQuery - вызвать эту структуру в диалоговом окне, а также иметь возможность иметь HTML-страницу с таким же представлением. Меняя только эту структуру, следует отвечать на все страницы, на которых она показана.

На самом деле, я делаю это, вызывая функцию jQuery load(). Dialog(), но мне было интересно, есть ли другой лучший способ, например создание класса "MediaManagementView()" в Javascript с функцией рендеринга в нем или что-то вроде что.

Единственные способы, которые я знаю, это объяснить ранее, но я думаю, что с вашими мнениями и решениями я получу лучшую точку зрения, вместо того, чтобы использовать только мои.

Спасибо за ваше время и ваши ответы!

Unapedra 12 нояб. 2013, в 11:51

Источник

Теги:

javascript

html

function

structure

instance

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 в качестве параметра.

Latheesan 12 нояб. 2013, в 07:02

0

Спасибо за ответ! На самом деле, я вижу, что это то же самое, что и в моем вопросе, с load () (который вместо iFrame загружает содержимое HTML, но это та же концепция). Тем не менее, веб-приложение может иметь некоторый контент такого типа, поэтому я бы предпочел не создавать на каждой странице дюжину iFrames на тот случай, если мне понадобится их использовать. В любом случае, спасибо за ваше время!
Unapedra 12 нояб. 2013, в 15:46

Ещё вопросы

Спасибо за ответ! На самом деле, я вижу, что это то же самое, что и в моем вопросе, с load () (который вместо iFrame загружает содержимое HTML, но это та же концепция). Тем не менее, веб-приложение может иметь некоторый контент такого типа, поэтому я бы предпочел не создавать на каждой странице дюжину iFrames на тот случай, если мне понадобится их использовать. В любом случае, спасибо за ваше время!

Unapedra · Accepted Answer · 2013-11-18T10-30-00.000Z

Увлекая этот вопрос, чтобы получить больше ответов, я напишу, что я сделал для тех, кто ищет возможные пути для достижения этого.

Решение, которое я использовал

Наконец, я использовал функцию загрузки JQuery() для загрузки внешней HTML-страницы, в которой есть только часть, которую я хочу показать.

Кроме того, я больше не использовал функцию JQuery dialog(), так как это создает стили CSS JQuery, и мне нужно, чтобы она полностью интегрировалась в мою схему 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 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()
    }
}

Если кому-то тоже интересно, CSS, применяемый к общим divs, следующий:

.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_control сосредоточено с помощью JQuery-модуля JQuery() JsFiddle.

Надеюсь, это поможет кому-то. Также исправления принимаются!

С уважением.