ब्राउज़र का आकार बदलने के लिए ऑटो-सेंटर jQuery यूआई संवाद कैसे करें?

Question

जब आप jquery UI संवाद का उपयोग करते हैं, तो एक चीज को छोड़कर, सभी अच्छी तरह से काम करते हैं। जब ब्राउज़र का आकार बदल दिया जाता है, तो संवाद केवल प्रारंभिक स्थिति में रहता है जो वास्तव में कष्टप्रद हो सकता है।

आप इसका परीक्षण कर सकते हैं: http://jqueryui.com/demos/dialog/

"मोडल संवाद" उदाहरण पर क्लिक करें और अपने ब्राउज़र का आकार बदलें।

मुझे लगता है कि ब्राउज़र के आकार बदलने पर मैं संवादों को ऑटो-सेंटर करने में सक्षम होना चाहूंगा। क्या यह मेरे ऐप में मेरे सभी संवादों के लिए एक कुशल तरीके से किया जा सकता है?

आपका बहुत बहुत धन्यवाद!

Answer 1

positionविकल्प सेट करने से यह बाध्य हो जाएगा, इसलिए अपने सभी संवादों को कवर करने के लिए एक ही चयनकर्ता का उपयोग #dialogकरें जहां मैं यहां उपयोग करता हूं (यदि यह नहीं पाता है कि कोई कार्रवाई नहीं की गई है, जैसे सभी jQuery):

1.10 से पहले jQuery UI

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

jQuery UI 1.10 या उच्चतर

$(window).resize(function() {
    $("#dialog").dialog("option", "position", {my: "center", at: "center", of: window});
});

यहाँ वही jQuery यूआई डेमो पेज है जो केवल ऊपर दिए गए कोड को जोड़ रहा है , हम विंडो के resizeईवेंट के साथ केवल एक हैंडलर जोड़ रहे हैं .resize(), इसलिए यह उचित समय पर री-सेंटर को ट्रिगर करता है।

Comments

धन्यवाद, जो बहुत अच्छा लग रहा है। शायद मुझे बताया जाना चाहिए कि मुझे हमेशा नहीं पता कि मेरे संवाद की आईडी क्या है, इस तरह (मैं उस संवाद को कैसे लक्षित कर सकता हूं?): Var $ संवाद = $ ('<div> <a href = "#" शीर्षक = "रद्द करें"> रद्द करें </a> </a> </ div> ')। Html (एसेटब्रोसर) .dialog ({autoOpen: false, शीर्षक:' Assets Manager ', modal: true, closeOnEscape: true, बटन: बटन, चौड़ाई: 840, ऊँचाई: 500}); $ dialog.dialog ( 'खुला');

— जोरे

: - @Jorre वे सभी एक ही कक्षा जब आप एक संवाद बनाने मिलता है, यह सामान्य आप ऐसा कर सकते हैं बनाने के लिए $(".ui-dialog-content").dialog("option", "position", "center");यह किसी भी संवाद के लिए :) की जाँच करेगा,

— निक Craver

दुर्भाग्य से प्रस्तावित जवाब संवाद के बुरी तरह से आकार बदलने को प्रभावित करता है। जब आप इसे एसई हैंडल के साथ आकार बदलने की कोशिश करते हैं, तो संवाद सभी 4 पक्षों पर आकार बदल जाता है।

मैं थ्रॉटलिंग या आकार बदलने की घटना की चर्चा करता हूं। मैंने देखा है कि IE7 और IE8 ने कई बार डायलॉग को "हैंड आउट" किया है, जिसके कारण रिसायकल हैंडलर को कई बार निष्पादित किया गया है।

— BStruthers

JQuery UI के नए संस्करणों पर, मुझे "केंद्र" के बजाय {window:} के केंद्र ":", "केंद्र" का उपयोग करने की आवश्यकता थी। मैं 1.11.0 का उपयोग कर रहा हूं।

— माइक डॉटर

Answer 2

वैकल्पिक रूप से एल्सडिल के उत्तर के लिए,

उस समाधान ने मेरे लिए सीधे काम नहीं किया, इसलिए मैंने निम्नलिखित कार्य किया जो कि गतिशील लेकिन छोटा संस्करण है:

$( window ).resize(function() {
    $(".ui-dialog-content:visible").each(function () {
        $( this ).dialog("option","position",$(this).dialog("option","position"));
    });
});

हालांकि एल्सडिल के लिए +1

संपादित करें:

बहुत छोटा संस्करण जो एकल संवादों के लिए बहुत अच्छा काम करता है:

$(window).resize(function(){
    $(".ui-dialog-content").dialog("option","position","center");
});

यह आवश्यक नहीं है कि .each () का उपयोग किया जाए, यदि आपके पास कुछ अद्वितीय संवाद हैं, जिन्हें आप स्पर्श नहीं करना चाहते हैं।

Comments

कक्षा का उपयोग करना। रुई-संवाद-सामग्री सभी संवादों के लिए है, स्वीकृत उत्तर एक विशिष्ट संवाद के लिए है

— पियरे

ठीक है। माफ़ करना। एडिट में पहली नज़र में भेद नहीं देखा।

— एल्सडिल

मैं इस दृष्टिकोण का अर्ध-सफलतापूर्वक उपयोग कर रहा हूं। यह विज्ञापित के रूप में करता है, लेकिन आईओएस 7 मोबाइल सफारी वास्तव में चोक हो जाता है यदि कीबोर्ड ऊपर है। मैंने इनपुट को धुंधला () करने का प्रयास किया है, लेकिन जिंजरब्रेड कीबोर्ड को एक आकार बदलने वाली घटना के रूप में देखता है और एक लूप में फंस जाता है जो कभी भी समाधान प्रविष्टि नहीं करता है। किसी और को यह सामना करना पड़ रहा है?

— जोसेफ जुहानेके

हो सकता है कि .resize()अंदर और बाहर एक काउंटर जोड़ें अगर काउंटर पहुंचता है 10या 20फिर break;, मुझे यह समस्या नहीं हुई है, तो मैं उन उपकरणों / ब्राउज़रों के लिए पूरा नहीं करता हूं। आपको एक समाधान की कोशिश करनी चाहिए कि अगर यह फंस गया है, तो आप इससे बाहर निकल सकते हैं

— पियरे

आपके पहले सुझाव पर काम हुआ और @Ellesedil का जवाब नहीं आया।

— अकस्मात

Answer 3

एक अधिक व्यापक उत्तर, जो निक के उत्तर का अधिक लचीले तरीके से उपयोग करता है, यहां पाया जा सकता है ।

उस धागे से प्रासंगिकता कोड का एक अनुकूलन नीचे है। यह एक्सटेंशन अनिवार्य रूप से एक नया डायलॉग सेटिंग बनाता है जिसे ऑटोपेपिशन कहा जाता है जो एक सही या गलत को स्वीकार करता है। जैसा कोड लिखा गया है, वह विकल्प को सत्य में बदल देता है। इसे अपनी परियोजना में .js फ़ाइल में रखें ताकि आपके पृष्ठ इसका लाभ उठा सकें।

    $.ui.dialog.prototype.options.autoReposition = true;
    $(window).resize(function () {
        $(".ui-dialog-content:visible").each(function () {
            if ($(this).dialog('option', 'autoReposition')) {
                $(this).dialog('option', 'position', $(this).dialog('option', 'position'));
            }
        });
    });

यह आपको इस नई सेटिंग के लिए "सही" या "गलत" की आपूर्ति करने की अनुमति देता है जब आप अपने पृष्ठ पर अपना संवाद बनाते हैं।

$(function() {
    $('#divModalDialog').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        width: 435,
        height: 200,
        dialogClass: "loadingDialog",
        autoReposition: true,    //This is the new autoReposition setting
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            }
        }
    });
});

अब यह डायलॉग हमेशा खुद को रिप्रेजेंट करेगा। AutoReposition (या जिसे आप सेटिंग कहते हैं) किसी भी संवाद को संभाल सकता है जिसमें डिफ़ॉल्ट स्थिति नहीं है और खिड़की के आकार बदलने पर स्वचालित रूप से उन्हें पुन: प्रस्तुत करता है। जब आप संवाद बनाते समय इसे सेट कर रहे होते हैं, तो आपको किसी भी तरह से किसी संवाद की पहचान करने की आवश्यकता नहीं होती है क्योंकि रिपॉजिटिंग कार्यक्षमता डायलॉग में ही बन जाती है। और सबसे अच्छी बात यह है कि चूंकि यह प्रति डायलॉग सेट है, इसलिए आप कुछ डायलॉग्स खुद ही रिपोज कर सकते हैं और बाकी वे जहां हैं वहीं रहेंगे।

संपूर्ण समाधान के लिए jQuery के मंचों पर उपयोगकर्ता scott.gonzalez को क्रेडिट।

Comments

यह ऐडऑन / एडिट अब जुलाई 2014 तक काम नहीं करता है। @ पिएरे का जवाब अभी भी काम करता है।

— पतित

@ डिजेनरेट: यह संभव है कि jQuery के अपडेट के लिए सिंटैक्स में बदलाव की आवश्यकता हो। मैं अब काम नहीं कर रहा हूं या यहां तक ​​कि उस परियोजना तक पहुंच भी नहीं है जहां मैंने इसे लागू किया है (वास्तव में, मैं वर्तमान में एपीआई लिख रहा हूं), इसलिए मेरे पास यह निर्धारित करने का एक आसान तरीका नहीं है कि क्या हाल के jQuery संस्करणों के लिए किसी भी बदलाव की आवश्यकता है।

— एल्सडिल

यह उत्तर हाल के संस्करणों के लिए काम नहीं करता है। लेकिन विचार महान है। यह मेरी विंडो आकार के हैंडलर की सामग्री है: $(".ui-dialog-content:visible").each(function () { if ($(this).dialog('option', 'autoReposition')) { $(this).dialog('option', 'position', $(this).dialog('option', 'position')); } });यह बढ़िया काम करता है :)

— nacho4d

@ nacho4d: जवाब को संपादित करने के लिए बेझिझक और नीचे दिए गए कार्य में जो भी jquery संस्करण आप काम कर रहे हैं उसके लिए नया कोड जोड़ें।

— एल्सडिल

@Ellesedil मैंने आपके पहले कोड में कुछ पंक्तियों को बदल दिया है। वास्तव में यह वही है जो scott.gonzalez ने पहले धागे में लिखा था। मैं नहीं जानता कि क्यों वह बदल करते $( "#dialog" ).dialog( "option", "position" ) करने के लिए $(this).data("dialog").options.positionबाद में। वैसे भी, अब यह जवाब काम करता है!

— nacho4d

Answer 4

एक और CSS-only विकल्प जो काम करता है। नकारात्मक हाशिये आपकी ऊँचाई के आधे और आपकी चौड़ाई के आधे के बराबर होने चाहिए। तो इस मामले में, मेरा संवाद 400x लंबा द्वारा 720px चौड़ा है। यह इसे लंबवत और क्षैतिज रूप से केंद्रित करता है।

.ui-dialog {
  top:50% !important;
  margin-top:-200px !important; 
  left:50% !important;
  margin-left:-360px !important
}

Answer 5

वैकल्पिक रूप से jQuery यूआई स्थिति का उपयोग किया जा सकता है,

$(window).resize(function ()
{
    $(".ui-dialog").position({
        my: "center", at: "center", of: window
    });
});

Answer 6

सभी को नमस्कार!

वेनिला जेएस समाधान:

(function() {
  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;

  function resizeThrottler() {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
      }, 66);
    }
  }

  function actualResizeHandler() {
    $(".ui-dialog-content").dialog("option", "position", { my: "center", at: "center", of: window });
  }
}());

Comments

$.isVanillaJS == false

— एंड्रयू