jQuery UI और ThemeRoller

• मई 18, 2024

यदि आप किसी वेबसाइट या वेब एप्लिकेशन के लिए यूजर इंटरफेस डिजाइन करने का आसान और त्वरित तरीका चाहते हैं और इसमें jQuery भी शामिल है, तो jQuery UI देखें। वहाँ आपको एक टर्नकी सीएसएस और jQuery फ़ंक्शंस कॉम्बो पैकेज मिलेगा जो इन सुविधाओं को आपके नए प्रोजेक्ट स्नैप में जोड़ता है।

चलो साइट के माध्यम से टहलने। डेमो और डॉक्स लिंक के तहत आपको jQuery इंटरेक्टिव प्लगइन्स की एक सूची मिलेगी जैसे कि ड्रैग एंड ड्रॉप, टैब और ट्रांज़िशन। प्रत्येक प्लगइन के लिए एक डेमो, प्रलेखन और परीक्षण के लिए नमूना कट-एंड-पेस्ट कोड है।

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

आपके पास थीम ट्वीट करने के लिए कई विकल्प हैं।

• फ़ॉन्ट सेटिंग्स: आप फ़ॉन्ट परिवार, वजन और आकार बदल सकते हैं।
  
  
• कॉर्नर रेडियस: आप कॉर्नर त्रिज्या को बदल सकते हैं। प्रत्येक थीम में एक डिफ़ॉल्ट गोल टैब शैली होती है, लेकिन यहां आप कोने के आकार को बदल सकते हैं या इसे वर्ग टैब के लिए शून्य पर सेट कर सकते हैं। (टैब CSS3 पर बनाया गया है, जो इस समय IE द्वारा समर्थित नहीं है।)
  
  
• हैडर / टूलबार: आप टैब के पीछे के क्षेत्र और कैलेंडर प्लगइन जैसे शीर्ष लेख क्षेत्रों के लिए रंग मान सेट कर सकते हैं।
  
  
• सामग्री: यहां आप मुख्य सामग्री क्षेत्र के लिए रंग सेट कर सकते हैं। आप अपनी पसंद की सीमा या कोई सीमा के आधार पर बहुत अलग डिज़ाइन प्राप्त कर सकते हैं।
  
  
• क्लिक करने योग्य डिफ़ॉल्ट स्थिति: यह टैब और बटन की डिफ़ॉल्ट (निष्क्रिय) उपस्थिति को नियंत्रित करता है।
  
  
• क्लिक करने योग्य हॉवर स्थिति: ये नियंत्रण हॉवर स्थिति में टैब और बटन की उपस्थिति के लिए हैं।
  
  
• क्लिक करने योग्य सक्रिय स्थिति: सक्रिय पृष्ठ के लिए टैब और बटन की उपस्थिति को नियंत्रित करता है।
  
  
• हाइलाइट: हाइलाइट किए गए क्षेत्रों के लिए पृष्ठभूमि, सीमा, पाठ और आइकन रंग।
  
  
• त्रुटि: पृष्ठभूमि, सीमा, पाठ और त्रुटि संदेशों के लिए आइकन रंग।
  
  
• ओवरले के लिए मोडल स्क्रीन: पृष्ठभूमि के रंग और बनावट को नियंत्रित करता है।
  
  
• ड्रॉप शैडो: ड्रॉप शैडो इफेक्ट के लिए शैडो अपारदर्शिता, मोटाई, ऑफसेट और कोनों के लिए नियंत्रण।
  
  

जब आप jquery-ui-x.x.xx.custom.zip डाउनलोड करते हैं और पैकेज को बढ़ाते हैं, तो आपको तीन फ़ोल्डर (सीएसएस, विकास-बंडल, और js) और एक index.html फ़ाइल दिखाई देगी। Index.html फ़ाइल आपकी थीम के साथ स्टाइल किए गए प्लगइन्स के लिए एक डेमो है। आप अपने मुख्य निर्देशिका में सीएसएस और जेएस फ़ोल्डर डालना चाहते हैं और उस स्थान पर अपनी साइट के लिए कोड में index.html फ़ाइल से कोड कॉपी / पेस्ट करें, जहां आप प्लग इन दिखाना चाहते हैं।

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/

वीडियो निर्देश: Fixing jQuery Mobile Preview with a Meta Tag (मई 2024).