Несколько модальных оверлеев jQuery с уникальными идентификаторами - PullRequest
Новая
       10

Несколько модальных оверлеев jQuery с уникальными идентификаторами

1 голос
/ 02 апреля 2012

Я немного застрял в этом - я использую шорткод Wordpress с плагином для модального наложения, чтобы вставить несколько наложений в редактор содержимого.Тем не менее, я стараюсь не повторять мой код jQuery несколько раз для каждого идентификатора.

Как вы можете видеть в шорткоде, я могу установить идентификатор наложения в редакторе Wordpress следующим образом:

Шорткод 

[osu_overlay linktext="Text for link" oid="1"] ... content for overlay ... [/osu_overlay]

Это создает следующую разметку HTML:

HTML 

<a id="overlaylink-1" class="overlaybox" rel="overlaybox-1" href="javascript:void(0);">Text for link</a>
<div id="overlaybox-1" class="overlaybox" style="display:none;"> ... content for overlay ...</div>

Это jQueryЯ не хочу повторять для каждого идентификатора, т.е. для оверлейной ссылки-1, оверлейной связи-2 и т. Д.

jQuery 

// Check if .overlaylink exists first
if($("#overlaylink-1").length == 0) {
    // #overlay-link-1 doesn't exist
} else {
    // Start overlay
    $('#overlaylink-1').click(function(){
        function dialogFadeIn() {
            dialogFadeIn.data.fadeIn('slow');
        }
        $("#overlaybox-1").modal({
            persist: true,
            onOpen: function(dialog) {
                dialog.overlay.fadeIn('medium', function () {
                    dialog.data.hide();
                    dialog.container.show()
                    dialog.data.fadeIn('medium');
                });
            }
        });
    });
}

Есть ли способписать код jQuery выше, чтобы он учитывал все идентификаторы, т.е. «overlaylink-x» и overlaybox-x », где x - любое число?

Спасибо за любую помощь

Osu

- * - РЕДАКТИРОВАТЬ - * -

Вот окончательный код jQuery - я обновилHTML и Shortcode также включают rel = "", который необходим для работы этого кода плагина jQuery.Спасибо @DingoEatingFuzz за это решение (ниже).

Новый jQuery 

// Check if .overlaylink exists first
if($(".overlaylink").length == 0) {
    // nada bc doesn't exist
} else {

    // Get Box to overlay from link rel
    var link = $('overlay-link-1'),
        box = $('#' + link.attr('rel'));

    // Plugin for showing overlay
    (function($) {
        $.fn.osuModal = function(options) { 
            // $.fn is the jQuery plugin object
            // make sure to loop in case the selector specified returns more than one object
            // make sure to return to support function chaining
            return this.each(function() {
                var $this = $(this);
                $this.click(function() {
                    function dialogFadeIn() {
                        dialogFadeIn.data.fadeIn('slow');
                    }
                    $('#' + $this.attr('rel')).modal({
                        persist: true,
                        onOpen: function(dialog) {
                            dialog.overlay.fadeIn('medium', function() {
                                dialog.data.hide();
                                dialog.container.show();
                                dialog.data.fadeIn('medium');
                            });
                        }
                    });
                }); // End '$this.click(function()'
            }); // End 'return this.each(function()'
        }
    })(jQuery);

    // Run the plugin
    $('.overlaylink').osuModal();

}

WP Shortcode PHP

Thisв случае, если кто-то хочет сделать то же самое в Wordpress (вы помещаете это в свой файл functions.php): 

// Shortcode for overlays
function osu_overlay($atts, $content = null) {
    extract(shortcode_atts(array('linktext' => '#', 'oid' => '#'), $atts));
    return '<a class="overlaylink" id="overlaylink-' . $oid . '" rel="overlaybox-' . $oid . '" href="javascript:void(0);">' . $linktext . '</a><div class="overlaybox" id="overlaybox-' . $oid . '" style="display:none;">' . do_shortcode($content) . '</div>';
}
add_shortcode('osu_overlay', 'osu_overlay');

Ответы [ 2 ]

2 голосов
/ 02 апреля 2012

Хотя есть способы сделать то, что вы просите, я думаю, что вы создаете для себя проблему, которую можно избежать с помощью разметки.

Я бы сослался на div в теге aкак это:

<a href='#' id='overlay-link-1' rel='overlaybox-1'>Text For Link</a>

Таким образом, селектор для коробки может быть получен из ссылки. 

var link = $('overlay-link-1'),
    box = $('#' + link.attr('rel'))
;

Теперь id из div и id и rel тега привязки не важны, если они совпадают.Последний шаг - абстрагирование модальной функции в плагин для простого интерфейса. 

(function($) {
    $.fn.osuModal = function(options) { // $.fn is the jQuery plugin object
        // make sure to loop in case the selector specified returns more than one object
        // make sure to return to support function chaining
        return this.each(function() {
            var $this = $(this);
            $this.click(function() {
                function dialogFadeIn() {
                    dialogFadeIn.data.fadeIn('slow');
                }
                $('#' + $this.attr('rel')).modal({
                    persist: true,
                    onOpen: function(dialog) {
                        dialog.overlay.fadeIn('medium', function() {
                            dialog.data.hide();
                            dialog.container.show();
                            dialog.data.fadeIn('medium');
                        });
                    }
                });
            }
        }
})(jQuery);

И, наконец, вызовите модалы, как вам хочется. 

$('.generic-class-for-all-modals').osuModal();
$('#specific-modal').osuModal();
$('#generated-modal-1').osuModal();
$('#generated-modal-1 #generated-modal-2').osuModal();
1 голос
/ 02 апреля 2012

Чтобы найти элемент с id, который начинается с заданной строки: 

$('a[id^="overlaylink"]')
$('div[id^="overlaybox"]')

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

Учитывая, что эти функции обязательно возвращают массивы элементов, вам придется перебирать этот массив с each(), а затем использовать индекс (each(function(index){ /*...*/})) для нацеливания на конкретные элементы, если само число является релевантным (я предполагаю, что #overlaylink-1, вероятно, должно показать / действовать #overlaybox-1).

Ссылки:

...