Настройка JQuery на аккордеонной вкладке ведет себя странно - PullRequest
Новая
       6

Настройка JQuery на аккордеонной вкладке ведет себя странно

1 голос
/ 23 июня 2011

Итак, у меня есть div, что я делаю аккордеон здесь: 

<div id="accordion">
        <h3><a href="#">Process Details</a></h3>
        <div>
            <span style="display:none;" id="dialogProcessId"></span>
            <b>Process:</b> <span id="dialogProcess"></span><br />
            <b>Run Time:</b> <span id="dialogRunTime"></span><br />
            <b>Running:</b> <span id="dialogRunning"></span><br />
            <b>Percent Completed:</b> <span id="dialogPercent"></span><br />
            <b>Status:</b> <span id="dialogStatus"></span><br />
            <b>Start Time:</b> <span id="dialogStart"></span><br />
            <b>Finish Time:</b> <span id="dialogFinish"></span><br />
            <b>Errors:</b> <span id="dialogErrors"></span><br />
            <b>Messages:</b> <span id="dialogMessages"></span><br />
            <b>Parameters:</b> <span id="dialogParameters"></span><br />
            <b>Dependencies:</b> <span id="dialogDependencies"></span>
        </div>
        <h3><a href="#">Edit Parameters</a></h3>
        <div>
            <table id="paramsTable">
                <tr>
                    <th style="display:none;"></th>
                    <th>Name</th>
                    <th>Value&nbsp;<span id="editParamValues" style="color:Blue; cursor:pointer; font-size:smaller;">Edit</span></th>
                    <th>Type</th>
                </tr>
            </table>
        </div>
        <h3><a href="#">View Dependencies</a></h3>
        <div>
            <table id="dependenciesTable">
                <tr>
                    <th>Run ID</th>
                    <th>Process Name</th>
                </tr>
            </table>
        </div>
        <h3><a href="#">View Messages</a></h3>
        <div style="overflow:scroll;">
            <table id="messagesTable">
                <tr>
                    <th>Time Stamp</th>
                    <th>Message</th>
                    <th>Message Type</th>
                    <th>Exception</th>
                    <th>Inner Exception</th>
                    <th>Email</th>
                </tr>
            </table>
        </div>
    </div>

Я превращаю это в аккордеон так: 

$("#accordion").accordion();

Этот аккордеон div, однако, находится в другом div, который превращается в JQuery UI Dialog примерно так: 

<div id="detailsDialog">
    <div id="accordion">

$("#detailsDialog").dialog({
        autoOpen: false,
        title: 'Details',
        height: 550,
        width: 800,
        modal: true,
        buttons: {
            "Clear History": function () {
                clearHistory($('#dialogProcessId').text());
            },
            "Close": function () {
                $(this).dialog("close");
            }
        }
    });

И я открываю диалог в моем приложении следующим способом: 

function openDialog(id) {
      //$("#accordion").accordion("option", "active", 0);
      refreshDialog(id);
      $("#detailsDialog").dialog("open");
      $('#accordion').mask('Loading...');
  }

Метод refreshDialog просто вызывает AJAX и заполняет все различные значения div, span и text в аккордеоне div, а затем открывает диалоговое окно.

Я пытался установить индекс аккордеона в этом методе openDialog(), но когда я делаю, он делает все это маленьким и наполовину открытым, и это выглядит очень странно, и когда я пытаюсь переключиться на другой индекс аккордеона они все очень маленькие и прочее. Я сделал это, поместив эту строку кода в openDialog: 

$( "#accordion" ).accordion( "option", "active", 1 );

Я что-то не так делаю?

Ответы [ 2 ]

1 голос
/ 23 июня 2011

Я нашел решение.Мне приходилось каждый раз уничтожать и заново создавать аккордеон в openDialog, иначе он воссоздает аккордеон внутри другого аккордеона.

В основном что-то столь же простое, как это работает:

0 голосов
/ 23 июня 2011

Я думаю, вам нужно вызвать accordion после открытия диалогового окна.Взгляните на этот jsfiddle и скажите мне, если это решит вашу проблему или поможет.Дайте мне знать, если я неправильно понял.

...