jquery UI इंटरफ़ेस दस्तावेज़ से पहले बदसूरत दिखता है। पहले से ही

Question

HTML तत्व पहले के बाद अधिभार या दस्तावेज़ दिखाते हैं। पहले ही निकाल दिया गया है।

सभी jQuery UI विजेट्स document.ready पर लोड होते हैं और यह पृष्ठ को कुछ पहले सेकंड के लिए बदसूरत लग रहा है।

इससे निपटने का संभावित विकल्प - jQuery UI के साथ पंप किए जाने से पहले तत्वों को छुपाएं और उन्हें लोड के बाद जेएस के साथ दिखाएं। लेकिन यदि जेएस बंद हो गया है - उपयोगकर्ता को कोई तत्व नहीं मिलेगा न तो मानक HTML और न ही jQuery UI।

इसके साथ काम करने का सबसे अच्छा अभ्यास क्या है?

Answer 1

आप jQuery यूआई प्रलेखन, let's take tabs for example को देखें, तो अगर आप थीम टैब पर नज़र डालें तो कक्षाएं unstyled सामग्री के फ्लैश से बचने के लिए लागू करने के लिए देख सकते हैं:

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs"> 
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li> 
    <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"> 
     <p>Tab one content goes here.</p> 
    </div> 
    ... 
</div> 

नोट: यह सबसे अच्छा अभ्यास नहीं है, लेकिन यदि आप सामग्री दिखाने से बचना चाहते हैं, यह एक विकल्प है, यहाँ एक और है:

आप सीएसएस के माध्यम से तत्व छिपा कर सकते हैं, उन लपेटकर <div> तत्वों एक वर्ग देने के लिए, मान लीजिए किजानेजो आपकी स्टाइलशीट में है:

.startsUgly { display: none; } 

.... और उन्हें जावास्क्रिप्ट में दिखाएं, उदा।

<noscript> 
    <style type="text/css">.startsUgly { display: block; }</style> 
</noscript> 

इस तरह से, के साथ जावास्क्रिप्ट निष्क्रिय सरल उन display: none प्रभाव नहीं मिलता है, वे अभी भी सामग्री दिखाई देगी: $(".startsUgly").show();

तब उन जावास्क्रिप्ट निष्क्रिय उपयोगकर्ताओं को कुछ <noscript> जादू को संभालने के लिए,।

Answer 2

सबसे पहले, दस्तावेज़ में jQuery UI कक्षाएं केवल document.ready के बाद लागू होती हैं। आप उन्हें अपनी पसंद की शैली बना सकते हैं, लेकिन आप अनस्टील्ड सामग्री के फ्लैश से छुटकारा नहीं पाएंगे। कक्षा यूआई को थीम देने के लिए उपयोगी हैं, यूआई से पहले चीजें कैसे दिखती हैं, इस पर असर डालने के लिए नहीं।

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

आप अपनी मूल पोस्ट में सबसे अच्छे अभ्यास के करीब थे। यह चाल छिपाने और जावास्क्रिप्ट में दिखने दोनों को करना है। सबसे पहले, अपने पेज को स्टाइल करें ताकि यह जावास्क्रिप्ट अक्षम के साथ स्वीकार्य लगे।

jQuery('html').addClass('blahblah'); 

क्योंकि: तो फिर, एचटीएमएल तत्व के लिए एक वर्ग बताए द्वारा unstyled सामग्री के फ्लैश को रोकने के लिए, document.ready (इस महत्वपूर्ण हिस्सा है) से पहले जावास्क्रिप्ट में बदसूरत तत्वों के छिपने करना एचटीएमएल तत्व पहले से मौजूद है, यह दस्तावेज़ से पहले इसके साथ काम करने के लिए मान्य है। पहले से ही। फिर, निक कहते हैं जैसे उल्लंघन तत्वों वर्ग "startsugly" के साथ एक div में डाल दिया और फिर अपने सीएसएस में एक पंक्ति है कि हमलावर तत्वों खाल डाल:

.blahblah .startsugly {display: none;} 

यहां मुद्दा यह है कि प्रदर्शन: कोई नहीं जब जावास्क्रिप्ट सक्षम होता है तो केवल खेल में आता है। अक्षम किए गए उपयोगकर्ता अभी भी आपकी सामग्री तक पहुंच पाएंगे। फिर, document.ready के बाद, अपने jQuery यूआई में डाल कार्यों "रोगी", और अपमानजनक तत्व फिर से दिखाने:

$(".startsUgly").show(); 

हालांकि अगर यह सामग्री है जो केवल सशर्त एक अकॉर्डियन या टैब की संरचना में दिखाई दे रहा है, इस अंतिम चरण शेष है अनावश्यक भी हो सकता है।

Answer 3

$('[class*=" ui-"]').remove(); 

Answer 4

निक Craver का दूसरा सुझाव के बंद बिल्डिंग - मैं उसका जवाब चोरी, बस एक और विकल्प जोड़ने का कोई इरादा नहीं है - आप Modernizr की सुंदरता का लाभ उठा सकें। यदि जावास्क्रिप्ट सक्षम है तो Modernizr HTML तत्व में एक साधारण js कक्षा जोड़ देगा।

main.js body 
{ 
    display: block; 
} 

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

<script type="text/javascript"> 
    $(function() 
    { 
     $("body").css("display", "block"); 
    } 
</script> 

यह एक अच्छा समाधान है कि अगर आप पहले से ही अन्य बातों के लिए Modernizr का उपयोग कर रहे हैं। अन्यथा, यदि आपके पास आधुनिकता के लिए कोई अन्य उपयोग नहीं है, तो मैं निक क्रेवर के सुझाव के साथ जाऊंगा।