कैसे अनुकूलित करें और थेमिंग jQuery यूआई Datepicker

jQuery यूआई बस कमाल है और उपयोग में आसानी के कारण, यह लगभग किसी भी वेबसाइट में लोकप्रिय और व्यापक रूप से उपयोग किया जाता है, जिसे इंटरैक्टिव सुविधाओं की आवश्यकता होती है.

और, इस पोस्ट में, हम दिए गए फीचर्स में से एक पर नज़र डालेंगे, Datepicker विजेट.

हम यह सीखने का प्रयास करेंगे कि कैलेंडर थीम को कैसे कस्टमाइज़ किया जाए, ताकि आप अपनी खुद की थीम बना पाएंगे जो आपके समग्र डिजाइन के अनुरूप होगी। हालाँकि, आपको इस ट्यूटोरियल को फॉलो करने से पहले जावास्क्रिप्ट में थोड़ी समझ और CSS से परिचित होना चाहिए.

• डेमो
• स्रोत डाउनलोड करें

यदि आप तैयार हैं, तो आरंभ करें.

संपत्तियाँ

चलो कैलेंडर के लिए कुछ आवश्यक संपत्ति तैयार करते हैं.

सबसे पहले, कैलेंडर डिज़ाइन प्रीमियम पिक्सेल से इस PSD फ़ाइल को संदर्भित करेगा। इसलिए हम बेहतर यह चाहते हैं कि हम उन रंगों का नमूना लेने में हमारी मदद करें, जिन्हें हम चाहते हैं। फिर, दो पैटर्न डाउनलोड करें सूक्ष्म पैटर्न्स कि हम अपने कैलेंडर की पृष्ठभूमि के रूप में उपयोग करेंगे। इस उदाहरण में, हमने निम्नलिखित पैटर्न का उपयोग करने का फैसला किया: काले डेनिम और काले चमड़े.

हमें jQuery UI द्वारा निर्मित तत्व वर्गों / आईडी का निरीक्षण करने के लिए फायरबग जैसे वेब डेवलपमेंट टूल की भी आवश्यकता होगी.

खैर, मुझे लगता है कि हमारे पास पर्याप्त तैयारी है। अब पहले कदम पर चलते हैं.

चरण 1: jQuery UI Datepicker

सबसे पहले, jQuery UI डाउनलोड पेज पर जाएं। इस पृष्ठ में आपको कुछ विकल्पों के साथ प्रस्तुत किया जाएगा; UI कोर, विजेट्स, सहभागिता और प्रभाव.

हमें सभी घटकों को अचयनित करें, जैसा कि हम उन सभी की जरूरत नहीं है.

फिर, में विजेट अनुभाग केवल दिनांक सूची चुनें। JQuery यूआई आवश्यक निर्भरता का चयन स्वचालित रूप से करेगा, और फिर डाउनलोड फ़ाइल.

सभी डाउनलोड की गई फ़ाइलों को लिंक करें - सीएसएस को छोड़कर - आपके HTML रिक्त दस्तावेज़ में निम्नानुसार है:

चरण 2: दिनांक निर्धारण को अनुकूलित करना

इस चरण में, हम निम्नलिखित विकल्पों के साथ एक तारीख को कॉन्फ़िगर करेंगे.

उपरोक्त कोड jQuery को एक तत्व के साथ कैलेंडर प्रदर्शित करने का निर्देश देगा खजूर बीनने वाला आईडी। तो, हम निम्नलिखित डाल की जरूरत है div कैलेंडर बनाने के लिए बॉडी सेक्शन में - डेटपिकर आईडी के साथ टैग:

अब कैलेंडर पहले ही उत्पन्न हो जाना चाहिए और इस तरह दिखाई देना चाहिए, बिना किसी शैली के सादा, लेकिन फिर भी कार्यक्षमता है.

चरण 3: शैलियाँ

अब कैलेंडर को स्टाइल करना शुरू करते हैं। हम सभी तत्वों को सामान्य करके शुरू करेंगे - हमेशा की तरह - और एक नई स्टाइलशीट बनाएं, इस उदाहरण में मैं इसे नाम देता हूं datepicker.css. फिर उन सभी को HTML डॉक्यूमेंट से लिंक करें.

फिर, हम सबसे पहले एक बैकग्राउंड को बॉडी से जोड़ेंगे ताकि हमारा HTML बहुत सादा न दिखे.

शरीर पृष्ठभूमि: url ('... /img/darkdenim3.png') 0 0 # 555 दोहराएं; 

इसके बाद, हम तारीख की चौड़ाई को निर्दिष्ट करेंगे, इसे केंद्र में स्थिति देंगे और कैलेंडर में प्रोमिनस प्रभाव देने के लिए ड्रॉप शैड को जोड़ेंगे।.

.ui-datepicker चौड़ाई: 216px; ऊंचाई: ऑटो; मार्जिन: 5 पीएक्स ऑटो 0; फ़ॉन्ट: 9pt एरियल, संस-सेरिफ़; -webkit- बॉक्स-छाया: 0px 0px 10px 0px rpx (0, 0, 0, .5); -मोज़-बॉक्स-छाया: 0px 0px 10px 0px rpx (0, 0, 0, .5); बॉक्स-छाया: 0px 0px 10px 0px rpx (0, 0, 0, .5); 

हम हर एंकर टैग से डिफ़ॉल्ट अंडरलाइन सजावट को भी हटा देंगे.

.ui-datepicker एक पाठ-सजावट: कोई नहीं; 

JQuery UI में कैलेंडर एक के साथ बनता है तालिका. तो, चलो जोड़ते हैं 100% के लिए चौड़ाई तालिका, तो यह ऊपर के रैपर के समान ही अधिकतम चौड़ाई होगी; अर्थात् 216px

.ui-datepicker तालिका चौड़ाई: 100%; 

हेडर अनुभाग स्टाइलिंग

डेटपिकर में हेडर सेक्शन होता है महीना वर्ष कैलेंडर का। इस खंड में चमड़े की बनावट होगी जिसे हमने पहले सफेद फ़ॉन्ट रंग के साथ डाउनलोड किया था 1px शीर्ष पर सफेद छाया.

.ui-datepicker- हेडर बैकग्राउंड: url ('... /img/dark_leather.png') 0 0 # 000 दोहराएं; रंग: # e0e0e0; फोंट की मोटाई: बोल्ड; -webkit- बॉक्स-छाया: इनसेट 0px 1px 1px 0px rpxba (250, 250, 250, 2); -मोज़-बॉक्स-छाया: इनसेट 0px 1px 1px 0px rpxba (250, 250, 250, .2); बॉक्स-छाया: इनसेट 0px 1px 1px 0px rgba (250, 250, 250, .2); पाठ-छाया: 1px -1px 0px # 000; फ़िल्टर: ड्रॉपशेडो (रंग = # 000, ऑफेक्स = 1, ऑफी = -1); लाइन-ऊँचाई: 30 पीएक्स; सीमा-चौड़ाई: 1px 0 0 0; सीमा-शैली: ठोस; सीमा-रंग: # 111; 

अगला, चलो केंद्र महीना पद.

 .ui-datepicker- शीर्षक पाठ-संरेखण: केंद्र; 

बदलो आगामी तथा पिछला PSD से कटा हुआ स्प्राइट तीर छवियों के साथ पाठ.

.ui-datepicker- प्रचलित, .ui-datepicker-next प्रदर्शन: इनलाइन-ब्लॉक; चौड़ाई: 30 पीएक्स; ऊंचाई: 30 पीएक्स; पाठ-संरेखण: केंद्र; कर्सर: सूचक; पृष्ठभूमि-छवि: url ('... /img/arrow.png'); बैकग्राउंड-रिपीट: नो-रिपीट; लाइन-ऊँचाई: 600%; छिपा हुआ सैलाब; 

फिर, क्रमशः तीर की स्थिति को समायोजित करें.

.ui-datepicker- प्रचलित फ्लोट: बाएं; पृष्ठभूमि-स्थिति: केंद्र -30 पीएक्स;  .ui-datepicker-next फ्लोट: सही; पृष्ठभूमि-स्थिति: केंद्र 0px; 

जबकि दिन के नाम अनुभाग एक के भीतर लपेटा जाता है thead, हमारे डिजाइन संदर्भ के आधार पर, इसमें थोड़ा सफेद ढाल होगा। और, अपने कार्य को सरल बनाने के लिए, हम इस टूल का उपयोग ग्रेडिएंट कोड उत्पन्न करने के लिए करेंगे:

.ui-datepicker thead पृष्ठभूमि-रंग: # f7f7f7; पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # f7f7f7 0%, # f1f1f1 100%); बैकग्राउंड-इमेज: -webkit-gradient (लीनियर, लेफ्ट टॉप, लेफ्ट बॉटम, कलर-स्टॉप (0%, # f7f7f7), color-stop (100%, # f1f1f1)); पृष्ठभूमि-छवि: -webkit-linear-gradient (शीर्ष, # f7f7f7 0%, # f1f1f1 100%); पृष्ठभूमि-छवि: -o-linear-gradient (शीर्ष, # f7f7f7 0%, # f1f1f1 100%); पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, # f7f7f7 0%, # f1f1f1 100%); पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, # f7f7f7 0%, # f1f1f1 100%); फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); बॉर्डर-बॉटम: 1px सॉलिड #bbb; 

दिन के नाम पाठ में गहरे भूरे रंग का रंग होगा # 666666 और उनके पास एक पतला सफेद रंग भी होगा पाठ की छाया यह दबाया प्रभाव देने के लिए.

.ui-datepicker वें पाठ-परिवर्तन: अपरकेस; फ़ॉन्ट-आकार: 6pt; गद्दी: 5px 0; रंग: # 666666; पाठ-छाया: 1px 0px 0px #fff; फ़िल्टर: ड्रॉपशेडो (रंग = # fff, offx = 1, offy = 0); 

इस बिंदु पर, कैलेंडर इस तरह दिखाई देगा:

स्टाइलिंग द डेट्स

कैलेंडर तिथियों के भीतर लपेटा जाता है टीडी या तालिका डेटा। इसलिए, हम पैडिंग सेट करेंगे 0 के बीच रिक्त स्थान को दूर करने के लिए टीडी और इसे 1px की सही सीमा दें.

.ui-datepicker tbody td गद्दी: 0; बॉर्डर-राइट: 1px सॉलिड #bbb; 

सिवाय आखिरी के टीडी, जिसके पास सही सीमा नहीं होगी। हमने इसके लिए सही सीमा निर्धारित की है.

.ui-datepicker tbody td: अंतिम-बच्चा बॉर्डर-राइट: 0px; 

तालिका पंक्ति लगभग समान होगी। अंतिम पंक्ति को छोड़कर इसमें 1px सीमा तल होगा.

.ui-datepicker tbody tr बॉर्डर-बॉटम: 1px ठोस #bbb;  .ui-datepicker tbody tr: अंतिम बच्चे सीमा-तल: 0px; 

डिफ़ॉल्ट, हॉवर और सक्रिय स्थिति को स्टाइल करना

इस चरण में हम दिनांक हॉवर और सक्रिय शैलियों को परिभाषित करेंगे। हम पहले आयाम को निर्दिष्ट करके दिनांक डिफ़ॉल्ट स्थिति को परिभाषित करेंगे; दिनांक पाठ स्थिति को केंद्र में रखें, ढाल रंग और आंतरिक सफेद छाया जोड़ें.

.ui-datepicker td स्पैन, .ui-datepicker td a डिस्प्ले: इनलाइन-ब्लॉक; फोंट की मोटाई: बोल्ड; पाठ-संरेखण: केंद्र; चौड़ाई: 30 पीएक्स; ऊंचाई: 30 पीएक्स; लाइन-ऊँचाई: 30 पीएक्स; रंग: # 666666; पाठ-छाया: 1px 1px 0px #fff; फ़िल्टर: ड्रॉपशेडो (रंग = # fff, offx = 1, offy = 1);  .ui-datepicker- कैलेंडर .ui-राज्य-डिफ़ॉल्ट पृष्ठभूमि: #ededed; पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, #ededed 0%, #dedede 100%); पृष्ठभूमि: -webkit- ग्रेडिएंट (रैखिक, बाएं शीर्ष, बाएं नीचे, रंग-स्टॉप (0%, # संपादित), रंग-रोक (100%, # डीड); पृष्ठभूमि: -webkit- रैखिक-ढाल (शीर्ष, #eded 0%, # समर्पण 100%); बैकग्राउंड: -ओ-लीनियर-ग्रेडिएंट (शीर्ष, #ededed 0%, # डेड 100%); पृष्ठभूमि: -ms-रैखिक-ढाल (शीर्ष, #eded 0%, # समर्पण 100%); पृष्ठभूमि: लीनियर-ग्रेडिएंट (शीर्ष, #ededed 0%, # डेड 100%); फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit- बॉक्स-छाया: इनसेट 1px 1px 0px 0px rpxba (250, 250, 250, .5)। -मोज़-बॉक्स-छाया: इनसेट 1px 1px 0px 0px 0px rgba (250, 250, 250, .5); बॉक्स-छाया: इनसेट 1px 1px 0px 0px 0px rgba (250, 250, 250, .5);  .ui-datepicker-unselectable .ui-state-default पृष्ठभूमि: # f4f4f4; रंग: # b4b3b3; 

जब आप तारीख पर मंडराते हैं, तो यह थोड़ा सफेद हो जाएगा.

 .ui-datepicker- कैलेंडर .ui-State-hover पृष्ठभूमि: # f7f7f7; 

जब तारीख एक सक्रिय स्थिति में होती है, तो इसमें निम्नलिखित शैलियाँ होंगी.

 .ui-datepicker- कैलेंडर। उई-राज्य-सक्रिय पृष्ठभूमि: # 6eafbf; -webkit- बॉक्स-छाया: इनसेट 0px 0px 10px 0px rpxba (0, 0, 0, .1)। -मोज़-बॉक्स-छाया: इनसेट 0px 0px 10px 0px rpxba (0, 0, 0, .1); बॉक्स-छाया: इनसेट 0px 0px 10px 0px rpx (0, 0, 0, .1); रंग: # e0e0e0; पाठ-छाया: 0px 1px 0px # 4d7a85; फ़िल्टर: ड्रॉपशेडो (रंग = # 4d7a85, offx = 0, offy = 1); बॉर्डर: 1px ठोस # 55838f; स्थिति: रिश्तेदार; मार्जिन: -1 पीएक्स; 

अब, कैलेंडर को बहुत बेहतर दिखना चाहिए.

स्थिति ठीक करना

इस बिंदु पर, तारीख को ध्यान से देखें। जब आप पहले या अंतिम कॉलम में तारीख पर क्लिक करते हैं, तो आप देखेंगे कि सक्रिय स्थिति कैलेंडर किनारे से पिक्सेल को ओवरफ्लो कर रही है.

तो यहाँ, हम कुछ छोटे सुधार करेंगे.

पहले हम तारीख की चौड़ाई घटाएँगे 29px, और अंतिम कॉलम के दाएं और पहले कॉलम के बाएं हिस्से को सेट करें 0 उल्टा करना -1px मार्जिन जो हमने पहले सक्रिय राज्य के लिए निर्धारित किया है.

.ui-datepicker- कैलेंडर td: पहला-बच्चा। रुई-राज्य-सक्रिय चौड़ाई: 29px; मार्जिन-वाम: 0;  .ui-datepicker- कैलेंडर td: अंतिम संतान .ui-राज्य-सक्रिय चौड़ाई: 29px; मार्जिन-सही: 0;  

कैलेंडर की अंतिम पंक्ति की तारीख में भी एक समान उपचार होगा.

.ui-datepicker- कैलेंडर tr: अंतिम-बच्चा .ui-राज्य-सक्रिय ऊँचाई: 29px; मार्जिन-तल: 0; 

अब, परिणाम देखें। खैर, कैलेंडर अब सुंदर लग रहा है और हमारे डिजाइन संदर्भ के रूप में पूरी तरह से फिट बैठता है। और, आप डेमो देख सकते हैं और छवि के नीचे दिए गए लिंक से कोड की जांच करने के लिए स्रोत डाउनलोड कर सकते हैं.

• डेमो
• स्रोत डाउनलोड करें

बोनस: कैलेंडर बढ़ाएँ

खैर, आज हमने jQuery UI Datepicker के लिए एक कस्टम थीम बनाने के तरीके पर काफी कुछ सीखा है। लेकिन आपको यहां रुकना नहीं चाहिए, क्योंकि अभी भी कई चीजें हैं जो इस तारीख से बढ़ाई जा सकती हैं। अपने jQuery और सीएसएस प्रवीणता के आधार पर आप कैलेंडर को इस तरह बढ़ाते हैं - ओवरले डेटपिकर के साथ टेक्स्ट इनपुट.

• डेमो
• स्रोत डाउनलोड करें

आगे की पढाई

JQuery UI पर आगे पढ़ने के लिए। आप यहाँ पूरा प्रलेखन पढ़ सकते हैं:

• JQuery UI के साथ आरंभ करना
• जिंगरी यू.के.
• jQuery UI: थीमिंग एपीआई कक्षाएं

अंतिम विचार

इस ट्यूटोरियल को पढ़ने और अनुसरण करने के लिए धन्यवाद, मुझे आशा है कि आपको यह उपयोगी लगेगा। और, यदि आपके पास कोई प्रतिक्रिया है या इस ट्यूटोरियल से गायब होने वाली चीजों को जोड़ना चाहते हैं, तो नीचे टिप्पणी अनुभाग में इसे इंगित करने के लिए स्वतंत्र महसूस करें। एक बार फिर धन्यवाद).