मैं JQuery UI का उपयोग करके UI को कैसे रोकूं?

Question

मैं यूआई ब्लॉक करने के लिए इस प्लगइन का उपयोग कर: http://jquery.malsup.com/block/

प्लगइन उत्कृष्ट काम करता है, यह सिर्फ है कि मैं यह देखते हुए कि यह करना चाहिए, अगर jQuery यूआई पहले से ही ऐसा नहीं किया था काफी आश्चर्य होगा इसके संवाद सुविधा के लिए प्रभावी रूप से एक ही चीज़।

JQuery UI का उपयोग करके यूआई को कैसे अवरुद्ध करता है?

Answer 1

आप कुछ हैकी कर सकते हैं - मोडल को कॉल करें, फिर onopen कॉलबैक पर, remove() मोडल स्वयं ही।

$("#something").dialog({ 
    open: function(event, ui) { $('.ui-dialog').remove(); } 
}); 

अरे! मैंने कहा कि यह था hacky :)

या

मोडल कोड की जाँच करें और यदि यह यूआई ब्लॉक करने के लिए एक समारोह कॉल देखते हैं। शायद आप इसके लिए एक बाहरी संदर्भ जोड़ सकते हैं ताकि आप इसे स्वयं कह सकें।

या

को आप दस्तावेज़ इस HTML जोड़ें, और उस पर show() या hide() कहते हैं।

<div class="ui-widget-overlay" style="width: 100%; height: 100%; z-index: 32767;"></div> 

या

(यदि आप अनिश्चित हैं कि वे कैसे बनाया जाता है) वे बस रहे हैं एक div (आमतौर पर) बिल्कुल तैनात और 100% height/width, एक उच्च z-index और आम तौर पर एक opacity (साथ फ़िल्टर के साथ आईई 6 में इसे कैसे करें) देखें।

आप इसे position: fixed पर भी सेट कर सकते हैं ताकि यदि आप स्क्रॉल करते हैं तो यह हमेशा वहां रहेगा। यदि आप $('body').css({ 'overflow-y': 'hidden' }) कर कर चाहते हैं तो आप स्क्रॉलबार को भी छुपा सकते हैं।

Answer 2

यूआई को "ब्लॉक" करने के लिए, आप एक उच्च जेड इंडेक्स और वांछित पृष्ठभूमि रंग और अस्पष्टता के साथ एक बिल्कुल स्थित डिवीजन div डालें जैसे कि यह पूरे पृष्ठ को कवर करता है।

Answer 3

jQuery के पास केवल एक प्रगति पट्टी है जैसा मुझे पता है। बेशक आप उपरोक्त सभी कर सकते हैं लेकिन यह प्रबंधित करने के लिए बहुत जटिल लग रहा है यदि आप पहले से उपयोग कर रहे हैं।

मेरे recommandation jQuery Block UI

सच स्वच्छ बदलने का प्रयास करें और कई सीएसएस विकल्प हैं के लिए है। किसी भी परियोजना पर उपयोग करने और लागू करने में आसान है।

Answer 4

<div id="__messageBox_wait" class="messageBoxArea" style="display: none; cursor: default"> 
       <div> 
        <label id="__messageBox_wait_text" style="vertical-align: middle"> 
         Please wait</label> 
       </div> 
</div> 

function blockUI() { 
     var boxHtml = $('#__messageBox_wait'); 
     var message = "Please wait..."; 
     $('#__messageBox_wait_text').text(message); 
     $.blockUI({ 
      theme: false, 
      title: 'Message', 
      message: boxHtml, 
      css: 'width:15%' 
     }); 
    } 


    $.unblockUI(); -- call to Unblock UI 
    blockUI(); --- call to block UI