Настройка параметров Colobox из тега Anchor - PullRequest
Новая
       21

Настройка параметров Colobox из тега Anchor

1 голос
/ 06 октября 2011

У меня есть сайт .Net 4, MVC 3, который использует плагин jquery Colorbox. Все работает, как и ожидалось, однако я хочу позволить отдельным тегам <a> настраивать параметры colorbox.

На веб-странице есть тег <a>: 

    <a class="AddNewItem" 
       href="@Url.Action("Create", "Phone", new { masterSID = ViewData["MasterSID"] })"
       cboxOptions='transition: "fade", scrolling: false, overlayClose: false, height: "100%"'>
        Add Phone
    <a>

В js-файле у меня есть следующий код: 

$(document).ready(function () {

    $(".AddNewItem").colorbox($.extend({ title: "Add New Item" },
                                   SetCboxOptions($(this))
                             )
    );
});

function SetCboxOptions(obj) {
    var options = {};

    if ($(obj).attr("cboxOptions") != undefined) {
        var hash;
        var hashes = $(obj).attr("cboxOptions").replace(' ', '').split(',');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split(':');
            options[hash[0]] = hash[1];
        }
    }

    return options;
}

Когда я нажимаю на ссылку, появляется всплывающее окно с правильной формой, созданной путем вызова / Phone / Create? MasterSID = #. Валидация работ и сдача работ.

Вот проблема

Ни одна из опций, установленных в атрибуте cboxOptions тега <a>, не влияет на Colorbox. Я использую код с сайта Colorbox, который утверждает, что это должно работать. Кто-нибудь может указать, почему это не так?

Ответы [ 2 ]

2 голосов
/ 07 октября 2011

Я предлагаю использовать атрибут данных HTML5 для создания атрибута для сохранения желаемого объекта настроек в формате JSON.Пример: 

<a class="AddNewItem" href="@Url.Action("Create", "Phone", new { masterSID = ViewData["MasterSID"] })" data-cbox='{"transition":"fade", "height":"100%"}'>Add Phone<a>

$(".AddNewItem").each(function(){
    var settings = $(this).attr('data-cbox');

    if (settings) {
        settings = $.parseJSON(settings);
    }

    $(this).colorbox(settings || {});
});
0 голосов
/ 07 октября 2011

Чтобы еще больше ответить на вопрос Джека, я изменил его код, чтобы параметры по умолчанию могли быть определены и переопределены значениями, установленными в атрибуте data-cbox: 

        $(".AddNewItem").each(function () {
            var settings = $(this).attr('data-cbox');
            var defaults = $.parseJSON('{"transition":"fade","overlayClose":false,"scrolling":false,"initialWidth":"200","initialHeight":"200"}');

            if (settings) {
               settings = $.parseJSON(settings);
               settings = $.extend(defaults, settings);
            }        

            $(this).colorbox(settings || defaults);
       });

Метод $.extend заменяет значенияустановить в defaults из тех, которые определены settings.Еще раз спасибо, Джек, за аккуратный и лаконичный ответ.Я планирую использовать этот шаблон много.

...