2011-03-28 11 views
9

मैं एक jquery संवाद का उपयोग कर रहा हूं। इस संवाद की सामग्री गतिशील है इसलिए संवाद खुला होने पर ऊंचाई बदल जाती है।jquery ui संवाद स्थिति ताज़ा करें

$("#a_div").dialog({ width: 400 }); 

संवाद प्रारंभ में पृष्ठ में केंद्र दिखाई देता है। लेकिन जब ऊंचाई परिवर्तन कोई और केंद्र नहीं है।

मैं बिना किसी संवाद के संवाद की स्थिति को रीफ्रेश कैसे कर सकता हूं?

धन्यवाद

उत्तर

21

आप ऐसा करके स्थिति को फिर से निर्धारित करने की आवश्यकता:

$("#a_div").dialog({ 
    position: { 'my': 'center', 'at': 'center' } 
}); 

स्थिति एक बार जब संवाद बनाने के लिए निर्धारित है, लेकिन बाद में बदल दिया जा सकता है (या एक ही मूल्य पर सिर्फ फिर से निर्धारित करते हैं, jQuery के लिए मजबूर पुनर्कलन करने के लिए)।

इस डेमो देखें: आप के रूप में प्रारंभिक स्थिति के लिए jQuery ui द्वारा इस्तेमाल किया सही स्थिति सेटिंग्स उपयोग करना चाहते हैं http://jsfiddle.net/petermorlion/3wNUq/2/

+9

'स्थिति' का स्ट्रिंग फॉर्म बहिष्कृत किया गया है। आपको 'स्थिति: {my: "center" का उपयोग करना चाहिए: "केंद्र", का: विंडो}' इसके बजाय। – cdmckay

+1

@cdmckay समाधान के लिए वर्तमान सर्वोत्तम अभ्यास जोड़ने के लिए स्वतंत्र महसूस करें! :) –

+0

अंत में 'विंडो' जोड़ने के लिए चाल चल रही थी: '$ (" # a_div ")। संवाद ({स्थिति: {'my': 'center', 'at': 'center', का: विंडो }}); ' – dikirill

1

आप JQuery के द्वारा अपने वर्गों का उपयोग संवाद आकार बदलने के लिए कोशिश कर सकते हैं सीधे (documentation here)

jQueryUI संवाद की बुनियादी संरचना यह है:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"> 
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
     <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span> 
     <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a> 
    </div> 
    <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog"> 
     <p>Dialog content goes here.</p> 
    </div> 
</div> 

तो, शायद आपको सर्वश्रेष्ठ सेट करने के लिए कक्षाओं की चौड़ाई और ऊंचाई के साथ खेलना चाहिए।

$("#a_div").dialog({ width: 400 }); 

$.get('my_url.php',function(data){ 

    $('#a_div .ui-dialog').css('width','400px'); 

    // Or... 

    $('#a_div').css('width','400px'); 
}); 

मुझे आशा है कि यह आप में मदद करता है:

एक अन्य समाधान से पहले खुला (जब आपका डेटा सफलतापूर्वक लोड किया जाता है) सीधे संवाद की चौड़ाई सेट करने के लिए है।

1

, आप jQuery ui कोड से विकल्प प्राप्त कर सकते हैं और उन्हें फिर से किसी भी समय आप चाहते हैं का उपयोग करें अपने संवाद को पुनर्स्थापित करने के लिए।

function refreshDialogPosition(id) { 
    $("#" + id).position({ 
         my: "center", 
         at: "center", 
         of: window, 
         collision: "fit", 
         // Ensure the titlebar is always visible 
         using: function (pos) { 
          var topOffset = $(this).css(pos).offset().top; 
          if (topOffset < 0) { 
           $(this).css("top", pos.top - topOffset); 
          } 
         } 
        }); 
} 

उपयोग:

refreshDialogPosition("YourDialogId"); 

यह भी सुनिश्चित करें कि आपके शीर्षक पट्टी हमेशा दिखाई है कर देगा। अन्यथा बड़ी सामग्री वाले संवाद का उपयोग करते समय आपकी शीर्षक पट्टी आपकी स्क्रीन के बाहर होगी। (सामग्री ऊंचाई> खिड़की की ऊंचाई)

एक अच्छा दिन है।

संबंधित मुद्दे