• From: Klaipėda
  • Registered: 2006-10-31
  • Posts: 432

Topic: jQuery UI Dialog Responsive

Jei kam reikės jQuery UI Dialog Responsive.
Kažkada radau stackoverflow duotą funkciją, bet su nauja jQuery UI versija neveikė, dabartinė tikrai veikia nuo 1.10.x+ versijos.

$(window).resize(function () {
        fluidDialog();
});
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
        fluidDialog();
});
function fluidDialog() {
        var $visible = $(".ui-dialog");
        $visible.each(function () {
            var $this = $(this);
            var dialog = $this.find(".ui-dialog-content").data("ui-dialog");
            if (dialog.options.fluid) {
                var wWidth = $(window).width();
                if (wWidth < dialog.options.maxWidth + 50) {
                    $this.css("max-width", "90%");
                } 
                else {
                    $this.css('width',dialog.options.maxWidth);
                    $this.css("max-width", dialog.options.maxWidth);
                }
                dialog.option("position", dialog.options.position);
            }
        });
}

Kaip naudoti:

$("#dialog").dialog({
    maxWidth: 500,
    width: 'auto',
    fluid: true,
});

Atsirado naujas parametras fluid. Jeigu dialogas telpa į langą, naudojamas maxWidth, kitu atveju automatiškai mažinamas langas.

Tikiuso kam nors pravers.

Vizitų Registracija Internetu, Unixtime

Min2liz's Website