jQuery यूआई मॉडल डायलॉग केवल दूसरे लोड (बाहरी फ़ाइल से सामग्री) पर केंद्रित है?

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

ऐसा लगता है कि यह हमेशा एक कदम पीछे है: पहला भार यह नहीं बता सकता कि फ़ाइल की चौड़ाई/ऊंचाई क्या लोड हो रही है, फिर उसी फ़ाइल के बाद के लोड पर, यह पूरी तरह से स्थित है। है कुछ नमूना HTML (हालांकि फ़ाइल #modify में लोड नहीं रह जाता है)

$(".editMe").button({ 
    icons: { 
     primary: 'ui-icon-document' 
    }, 
    text: false 
}).click(function() { 
    var eventLink = $(this).attr("name"); 
    var dialogOpts = { 
     title: "Make Modifications or Delete This Event", 
     modal: true, 
     autoOpen: false, 
     height: "auto", 
     width: "auto", 
     open: function() { 
      //The height of the file below can vary, and in the 
      //JS Bin environment the dialog loads just fine blank 
      $("#modify").load("themes_edit.asp?id=" + eventLink); 
     }, 
     close: function() { 
      oTable.fnDraw(); 
     } 
    }; 
    $("#modify").dialog(dialogOpts).dialog("open"); 
    return false; 
});

और यहाँ:

मैं निम्नलिखित कोड एक डेटा तालिका के लिए एक मॉडल के रूप में उपयोग कर रहा हूँ संपादित करें। मैंने इसे JS Bin पर भी सेट किया है।

<html> 
    <head> 
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> 
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
     <button class="editMe" name="2810">edit</button> 
     <button class="editMe" name="2811">edit</button> 
     <button class="editMe" name="2812">edit</button> 
     <button class="editMe" name="2813">edit</button> 
     <div id="modify"></div> 
    </body> 
</html>

स्रोत

2010-07-07 Paul

'एक कदम है पीछे 'होगा क्योंकि आपके संवाद में खुली घटना में आप डेटा लोड करने का प्रयास करेंगे। तो जब संवाद दिखाता है कि यह पुरानी सामग्री दिखाएगा और फिर अचानक नई सामग्री दिखाई देगी।

इस पर पहुंचने का एक तरीका संवाद खोलना है, लेकिन पहले मौजूदा सामग्री को साफ़ करें और लोडिंग gif दिखाएं, जबकि आप डेटा के साथ जवाब देने के लिए AJAX कॉल की प्रतीक्षा करते हैं, जिसे आप तब संवाद में लोड करते हैं।

नायब आप स्क्रीन झटका के बारे में चिंतित हैं, तो जब संवाद का आकार बदलता है तो आप एक div कि स्क्रीन बंद रखा जाता है तो आयाम मिल में ajax प्रतिक्रिया डाल सकता है, तो अच्छी तरह से में fading जबकि संवाद का आकार बदलने चेतन नई सामग्री

var dialogOpts = { 
     title: "Make Modifications or Delete This Event", 
     modal: true, 
     autoOpen: false, 
     height: "auto", 
     width: "auto", 
     close: function() { 
      oTable.fnDraw(); 
     } 
}; 

var $editDialog = $('#modify').dialog(dialogOpts); 

$(".editMe").button({ 
    icons: { 
     primary: 'ui-icon-document' 
    }, 
    text: false 
}).click(function() { 

    var eventLink = $(this).attr("name"); 

    //clear existing dialog content and show an ajax loader 
    $editDialog.html('<div class="loading" />'); 

    //show the dialog 
    $editDialog.dialog("open"); 

    //get dynamic content and load it into the dialog and resize 
    $.get("themes_edit.asp?id=" + eventLink, function(response){ 

     //fade out ajax loader 
     $editDialog.find('div.loading').fadeOut(500, function(){ 

       $editDialog.html(response) 
         .dialog('option', 'position', 'center'); 

     }); 

    }); 

    return false; 

});

स्रोत

2010-07-08 00:02:46 redsquare

यह होगा हालांकि प्रत्येक संवाद में एक अनावश्यक अर्ध-सेकंड देरी जोड़ें, मैं अधिकांश अनुप्रयोगों के लिए इसकी अनुशंसा नहीं करता, हमेशा डेटा ASAP प्रदर्शित करता हूं, जितना तेज़ अनुभव करता हूं। –

@ निकक्रैवर उपयोगकर्ता नोटिस नहीं करेगा क्योंकि यह त्वरित चेहरे की थप्पड़ सामग्री उपस्थिति की तुलना में बहुत आसान काम करता है, खासकर जब से ui संवाद खोलने से खुले/बंद एनीमेशन एक्स-ब्राउजर का समर्थन नहीं होता है + ओप ने चीजों पर झुकाव पर अपनी घृणा का उल्लेख किया है;) – redsquare

संवाद स्वयं ही होगा, याद रखें कि आपका समाधान अभी भी एक नए आकार के लिए झटकेगा, फिर फीका होगा (देरी * * लोड होने के बाद, यह अनावश्यक हिस्सा है, यह उपयोग होने पर बहुत कम अवधि होनी चाहिए), मेरे लिए यह संयोजन अधिक है मूल रूप से सही आकार/स्थिति पर सामग्री को दिखाने से जारिंग। - आपके संपादन के लिए: मुझे लगता है कि प्रभाव महान क्रॉस ब्राउज़र काम करते हैं, उदाहरण के लिए मैं संवाद छिपाने के लिए ड्रॉप पसंद करता हूं। क्या आपको अन्य मुद्दे हैं? –

आप एक फिर से केंद्र एक बार सामग्री भरी हुई है (ताकि आप आकार में जानते हैं), इस तरह को गति प्रदान कर सकते हैं:

var dialogOpts = { 
    title: "Make Modifications or Delete This Event", 
    modal: true, 
    autoOpen: false, 
    height: "auto", 
    width: "auto", 
    open: function() { 
     $("#modify").load("themes_edit.asp?id=" + eventLink, function() { 
      $(this).dialog('option', 'position', 'center'); 
     }); 
    }, 
    close: function() { 
     oTable.fnDraw(); 
    } 
};

यह सिर्फ .load() के लिए कॉलबैक का उपयोग करता है और position option सेट करता है, जो उचित समय पर फिर से केंद्र को ट्रिगर करता है ... जैसे ही आप जानते हैं कि सही आकार क्या है।

एक तरफ ध्यान दें के रूप में, के बाद से आप बना रहे हैं और उसके बाद संवाद खोलने में, आप दोनों autoOpen: false, संपत्ति और .dialog("open") निकाल सकते हैं, डिफ़ॉल्ट व्यवहार तुरंत खोलने के लिए :)

स्रोत

2010-07-07 23:48:26

धन्यवाद! मैं चाहता था वास्तव में उस विधि को पहले कोशिश की लेकिन आकार बदलने के झिलमिलाहट को पसंद नहीं आया। क्या खुले आकार के फ़ंक्शन के बाद तक संवाद छुपाया जा सकता है? – Paul

@ पॉल - आप '.load' में संपूर्ण '.dialog()' कॉल को लपेट सकते हैं () 'ओपन फ़ंक्शन के अंदर' .load() 'के बजाय कॉलबैक ... लेकिन संवाद उपयोगकर्ताओं के लिए अंतराल प्रतीत होता है, वहां एक लोडिंग छवि एक बेहतर/अधिक जानकारीपूर्ण दृष्टिकोण होगी जो मुझे लगता है। –

मुझे यकीन नहीं है कि मुझे कुछ याद आ रहा है, लेकिन यहां मैंने यह कैसे किया है। मेरे पास एक आईडी के साथ संवाद के अंदर एक div है, जब मैं संवाद खोलना चाहता हूं तो मैं एक ऐसा फ़ंक्शन चलाता हूं जो सामग्री को पहले संवाद में div में लोड करता है, फिर लोड पूर्ण होने पर मैं संवाद खोलता हूं। (उदा: $ ("# foo") लोड ("/ filepath.html", फ़ंक्शन() {$ ("# संवाद")। संवाद ("खुला");});

स्रोत

2012-08-11 01:32:23 Migs

jQuery यूआई मॉडल डायलॉग केवल दूसरे लोड (बाहरी फ़ाइल से सामग्री) पर केंद्रित है?

उत्तर

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