Как программно вызвать плагин simplemodal osx?

Я реализовал простой модальный плагин для JQuery. Кстати, очень мило! Проблема в том, что у меня есть список ссылок, которые генерируются из базы данных. Когда я щелкаю по одной из них, я делаю вызов «load» и добавляю результаты в свой div osx-modal-content. Как мне вызвать плагин osx после завершения загрузки? Если я добавлю class = osx в свой href, модальное окно откроется до того, как содержимое попадет в div.

Моя функция для загрузки html:

function loadContent(id) {
        $("#osx-modal-dialog").load("Item.cfm?ID="+id+"");
        // call OSX here????
        $('#osx-modal-dialog').modal();
    }

Мой DIV:

<div id="osx-modal-dialog">
  <div id="osx-modal-content">
<div id="osx-modal-title">Title</div>
<div id="osx-modal-data">
    <h2>Summary</h2>
    <p>Description</p>
    <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
  </div>
</div>

В настоящее время плагин osx ищет ввод или событие щелчка. Я не уверен, как создать сценарий события «щелчок» для моей нагрузки. Или, может быть, есть способ лучше вызвать плагин.

Включает:


person dallasweb    schedule 23.09.2009    source источник


Ответы (2)


Вот что бы я сделал:

Измените содержимое OSX (я удалил большую часть содержимого и добавил заполнитель):

       

<div id="osx-modal-content">
               <div id="osx-modal-title">OSX Style Modal Dialog</div>
               <div id="osx-modal-data">
                       <div id="osx-data-placeholder"></div>
                       <p><button class="simplemodal-close">Close</button> <span>(or press
ESC or click the overlay)</span></p>
               </div>
       </div>

Ваша функция loadContent:

       

function loadContent(id) {
               var d = $('#osx-modal-content');

               // load your page
               $.get("Item.cfm?ID=" + id, function(data) {

                       // replace the placeholder with the results
                       $('#osx-data-placeholder', d[0]).html(data);

                       // open the osx modal
                       d.modal({
                               overlayId: 'osx-overlay',
                               containerId: 'osx-container',
                               closeHTML: '<div class="close"><a href="#"
class="simplemodal-close">x</a></div>',
                               minHeight:80,
                               opacity:65,
                               position:['0',],
                               overlayClose:true,
                               onOpen:OSX.open,
                               onClose:OSX.close
                       });
               });
       }

Я не тестировал его, но уверен, что это должно помочь.

-Эрик

person Eric Martin    schedule 23.09.2009
comment
Спасибо за понимание. Я получаю сообщение об ошибке: OSX не определен. Загружаются все необходимые файлы js, а также osx.css. OSX не определена, потому что плагин osx.js не запущен? - person dallasweb; 24.09.2009
comment
Я предполагал, что вы использовали js-файл, который пришел с загрузкой OSX, где определена переменная OSX. Убедитесь, что файл загружен, или добавьте этот код в этот файл. - person Eric Martin; 24.09.2009
comment
Спасибо за помощь Эрику. Я вытащил код Var OSX ... из плагина и добавил его в свой скрипт на вызывающей странице ... работает нормально ... не идеально, но работает. - person dallasweb; 24.09.2009

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

function loadContent(id) {
    $("#osx-modal-dialog").load("Item.cfm?ID="+id+"", function() {
        $('input.show-info').unbind('click') // remove any existing handlers
                            .click( function() { // bind click on button to show dialog
             $('#osx-modal-dialog').modal();
        });
    });
}

Обновление: я обновил это, чтобы показать, как добавить обработчик кликов в обратный вызов load (), но я не знаю, какое событие вы хотите обработать, и на каком элементе событие запускается. . Я предполагаю, что вы хотите отображать диалог, когда вы нажимаете кнопку с классом "show-info".

person tvanfosson    schedule 23.09.2009
comment
Спасибо за быстрый ответ. Я могу открыть модальное окно, моя проблема заключается в вызове плагина для открытия модального окна. В примере osx есть ссылка ex: ‹a href='#' class='osx'› Demo ‹/a› и в плагине osx.js: $ (input.osx, a.osx) .click (function .. Мне нужно смоделировать щелчок для «a» с помощью class = osx. - person dallasweb; 23.09.2009
comment
Вы имеете в виду, как вы вызываете метод loadContent ()? Код, на который вы ссылаетесь, не имитирует щелчок, а скорее добавляет обработчик, который реагирует на щелчок и открывает диалоговое окно. У вас уже есть часть обработчика - функция loadContent (). Все, что вам нужно, это способ вызвать loadContent () с правильным идентификатором на основе какого-либо действия пользователя. Я могу добавить пример определения обработчика кликов, но без дополнительной информации о вашем HTML это может не сильно помочь. - person tvanfosson; 23.09.2009
comment
У меня есть ссылка, по которой идентификатор передается в функцию loadcontent (‹a href=javascript:loadContent('1234');›). Все работает как есть. Вместо вызова $ ('# osx-modal-dialog'). Modal (); Я хотел бы использовать плагин osx, но я не уверен, как его вызвать после загрузки моих данных. Если я добавляю class = osx в свою ссылку, плагин osx запускается до того, как данные загружаются в div, и я на один щелчок впереди отображаемых данных. Итак, мне нужно либо смоделировать щелчок a.osx ... либо изменить тест плагина на то, что я могу вызвать из load.callback () - person dallasweb; 24.09.2009
comment
Когда вы хотите, чтобы диалоговое окно отображалось? Когда они нажимают на что-нибудь еще? Что это еще за штука? - person tvanfosson; 24.09.2009
comment
Если вы покажете больше своего html, я смогу вам больше помочь. - person tvanfosson; 24.09.2009
comment
Я ценю вашу готовность помочь. Страница находится в интранете, сегодня вечером я выложу все на общедоступный сайт и пришлю ссылку. Еще раз спасибо. - person dallasweb; 24.09.2009