JQuery UI диалог с опцией уничтожения и возврата в исходное состояние - PullRequest
Новая
       16

JQuery UI диалог с опцией уничтожения и возврата в исходное состояние

1 голос
/ 30 апреля 2011

У меня проблема с JQuery Dialog.

У меня есть этот код: (изначально это простой DIV, прежде чем нажать на вторую кнопку под названием «Развернуть»)

http://pastebin.com/BnpZ1AMA

После нажатия «Развернуть», видимый div становится диалоговым окном. Но когда я хочу вернуться в div (начальное состояние), он больше не появляется на экране. В документации говорится: «Полностью удалите функциональность диалога. Это вернет элемент обратно в его состояние перед инициализацией».

У меня есть код JavaScript: 

           function makeit(data,maximize,minimize)
            {
                $(data).dialog();
                $(maximize).hide();
                $(minimize).show();
            }

            function remakeit(data,maximize,minimize)
            {
                $(data).dialog("destroy");
                $(maximize).show();
                $(minimize).hide();
            }

Является ли опция "destroy" хорошим вариантом или что мне нужно, чтобы вернуться к элементу DIV?

Спасибо

Ответы [ 2 ]

1 голос
/ 30 апреля 2011

Похоже, ваша проблема в том, что после вызова dialog.destroy () пользовательский интерфейс jQuery возвращает элемент в его состояние перед инициализацией, но делает так, чтобы он отображал : нет установлено.

так: 

remakeit = function(data,maximize,minimize)
            {
                $(maximize).show();
                $(minimize).hide();
                $(data).dialog("destroy");
                $(data).show();

            }

Я думаю, что проблемы, с которыми вы сталкиваетесь, связаны с тем, что разработчики пользовательского интерфейса jquery хотели, чтобы div диалога работал как div диалога, а не играл обе части - div диалога и обычный DOM div.

Итак, у вас есть два варианта:

1) Продолжайте так, как вы делали до сих пор (пытаясь использовать один и тот же div и как диалоговый div, и как обычный div DOM) - в этом случае вы должны играть тем, что делает пользовательский интерфейс jquery. Если вы говорите, что когда он «возвращает div в его состояние перед инициализацией», он присоединяется к концу тела (как «нижний колонтитул»), тогда в вашей функции remakeit после $ (data) .show (); оператор, добавить оператор для перемещения div на его первоначальное место: 

remakeit = function(data,maximize,minimize)
            {
                $(maximize).show();
                $(minimize).hide();
                $(data).dialog("destroy");
                $(data).appendTo("#originalDialogContainer");
                $(data).show();
            }

Где # originalDialogContainer " - это div, который изначально содержит ваш div: 

<div id="originalDialogContainer">
    <div class="theory">
          ...
    </div>
</div>

Вот ссылка, объясняющая перемещение элементов DOM в jQuery. http://www.elated.com/articles/jquery-removing-replacing-moving-elements/

2) Для начала имейте 2 «теоретических» дива - один будет для показа «теоретического» дива, когда он «свернут», а другой - «теоретический диалог» для отображения теоретического дива в виде диалога. Когда пользователь нажимает «максимизировать», вы скрываете обычный «теоретический» div и делаете $ (".istryDiv"). Dialog (); , а когда пользователь нажимает "минимизировать" внутри диалогового окна, вы будете уничтожить \ закрыть диалог и показать обычный раздел "теория".

Надеюсь, это поможет ...

0 голосов
/ 20 июля 2012

Если вы хотите минимизировать / максимизировать опыт, такой как Windows, попробуйте мой подход здесь:

https://stackoverflow.com/a/11561470/335514

и скрипка:

http://jsfiddle.net/jasonday/ZSk6L/

...