Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

PHP और AJAX के साथ एक मजेदार To-Do लिस्ट कैसे कोड करें

by
Difficulty:IntermediateLength:LongLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

इस सप्ताह के Tuts+ प्रीमियम ट्यूटोरियल के लिए, हम कई अलग-अलग तकनीकों के साथ काम करेंगे। आखिरकार, हम एक To-Do लिस्ट तैयार करेंगे जो आपको, या आपके यूजर को असिंक्रोनोसली रूप से आइटम बनाने, अपडेट करने और हटाने की अनुमति देगा। हमारे कार्य को पूरा करने के लिए, हम PHP और jQuery की AJAX क्षमताओं का उपयोग करेंगे। मुझे लगता है कि आप पाएंगे कि यह उतना कठिन नहीं है जितना आप शुरू में सोचते हैं। मैं आपको बिल्कुल दिखाऊंगा कि कैसे!

इस ट्यूटोरियल में Tuts+ प्रीमियम सदस्यों के लिए उपलब्ध एक स्क्रीनकास्ट शामिल है।



स्टेप 1: एक नया डेटाबेस बनाना

जैसा कि आप कल्पना कर सकते हैं, हम स्टेटिक एनवायरनमेंट में रिकॉर्ड्स को सेव, डिलीट और अपडेट नहीं कर सकते हैं। इसलिए, हमें एक MySQL डेटाबेस बनाना होगा जो जानकारी संग्रहीत करेगा।

यदि आप PHPMyAdmin का उपयोग कर रहे हैं, तो http://localhost/phpmyadmin पर जाकर कंट्रोल पैनल तक पहुंचें।


"Create New Database" टेक्स्टबॉक्स में, "db" टाइप करें और "Create" पर क्लिक करें। इसके बाद, आपको एक टेबल बनाने की आवश्यकता होगी। "number of fields" के लिए "todo" टाइप करें और '3' टाइप करें।


हमारे कॉलम बनाना

अब हमें उचित कॉलम जोड़ने की आवश्यकता होगी।

  • id: प्रत्येक लाइन को इंडेंट करने के लिए यूनिक id।
  • title: हमारे आइटम का टाइटल।
  • description: एक विवरण बताता है कि हमें क्या करना है!

सुनिश्चित करें कि प्रत्येक फ़ील्ड के ऑप्शन निम्न इमेज में दिखाए गए से मेल खाते हैं।


टेस्ट rows डालें

अब जब हमने अपना डेटाबेस बनाया है, चलो कुछ टेस्ट rows को जल्दी से जोड़ें। अपने "db" डेटाबेस पर क्लिक करें; फिर "Browse" चुनें। आपको एक स्क्रीन पर लाया जाएगा जो आपके डेटाबेस में प्रत्येक row के कंटेंट को लिस्ट में करता है। जाहिर है, यह सेक्शन अभी खाली है। "Insert" चुनें और कुछ कॉलम जोड़ें। जो भी आप यहां चाहते हैं टाइप करें।




पूर्ण स्क्रीनकास्ट



स्टेप 2: Db क्लास


हालांकि किसी भी माध्यम से जरूरी नहीं है, मुझे लगता है कि क्लास में उन्हें ग्रुपिंग करते समय मेरे फंक्शन्स को प्रबंधित करना सबसे आसान है। इसे ध्यान में रखते हुए, हम अब एक "Db" क्लास बनायेंगे जिसमें कई फंक्शन्स होंगे।

  • __construct: ऑब्जेक्ट इंस्टनशियेट होने पर ही यह फ़ंक्शन आटोमेटिक रूप से चलता है।
  • delete_by_id(): row की यूनिक id में पास करके आवश्यक row को हटा देता है।
  • update_by_id(): अपनी यूनिक id में पास करके row को अपडेट करता है।

पसंद के अपने कोड एडिटर को खोलें, और "db.php" नामक एक नई फ़ाइल बनाएं। इस ब्लेंक डॉक्यूमेंट के भीतर, कोड की निम्न लाइन्स को पेस्ट करें।

एक नई क्लास बनाने के लिए, हम नीचे दिखाए गए सिंटेक्स का उपयोग करते हैं।

उपर्युक्त कोड का उपयोग करके, हमने सफलतापूर्वक एक नई क्लास बनाई है। यह अभी तक कुछ भी नहीं करता है, लेकिन फिर भी यह एक क्लास है!

__construct ()

__construct() मेथड ("function" के लिए क्लास टॉक है) को "magic method" के रूप में जाना जाता है। एक क्लास इंस्टनशियेट होने के तुरंत बाद यह रन हो जाएगा। हम MySQL डेटाबेस से प्रारंभिक कनेक्शन बनाने के लिए इस मेथड का उपयोग करने जा रहे हैं।

यदि आप OOP से परिचित नहीं हैं, तो यह पहले थोड़ा मुश्किल हो सकता है। सौभाग्य से, समझना बहुत मुश्किल नहीं है। हम चाहते हैं कि हमारा MySQL कनेक्शन हमारी क्लास में सभी मेथड्स के लिए उपलब्ध हो। इसे ध्यान में रखते हुए, $mysql वेरिएबल को एक विशिष्ट फ़ंक्शन के भीतर स्टोर करना एक अच्छा विचार नहीं होगा। इसके बजाय, यह एक क्लास प्रॉपर्टी होना चाहिए।

मेथड्स से प्रॉपर्टीज तक पहुंच

एक मेथड के भीतर, हम "$mysql" टाइप करके हमारी प्रॉपर्टी तक नहीं पहुंच सकते हैं। हमें पहले ऑब्जेक्ट को संदर्भित करना होगा।

इस तथ्य को ध्यान में रखना सुनिश्चित करें कि, किसी प्रॉपर्टी तक पहुंचने पर, हम डॉलर के साइन को छोड़ सकते हैं।

Mysqli


डेटाबेस से कनेक्ट करते समय पारंपरिक mysql_connect मेथड की बजाय mysql में सुधार (mysqli) का उपयोग करना बेहतर है। न केवल यह तेज़ है, बल्कि यह हमें OOP दृष्टिकोण का उपयोग करने की अनुमति देता है।

Mysqli क्लास का एक नया इंस्टैंस बनाते समय, हमें चार पैरामीटर को पास करना होगा।

  • host: 'localhost'
  • username: root
  • password: 'yourPassword'
  • database name: db

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

...हम __construct () मैजिक मेथड के लिए धन्यवाद, हमारे डेटाबेस के लिए आटोमेटिक रूप से एक कनेक्शन खोलते हैं।

मार्कअप


अब, हमें होम पेज के लिए अपना मार्कअप बनाना होगा। अपने समाधान में एक नया पेज जोड़ें, और इसे "index.php" के रूप में सेव करें। इसके बाद, निम्नलिखित को पेस्ट करें।

एनालिसिस

हमारे डॉक्यूमेंट के हेड के भीतर, मैं jQuery का उपयोग करने के लिए Google की CDN का रिफरेन्स दे रहा हूं। JQuery का उपयोग करते समय यह आसानी से पसंदीदा तरीका है। इसके बाद, मैं एक 'scripts.js' फ़ाइल का रिफरेन्स दे रहा हूं जिसे हम बाद में इस ट्यूटोरियल में बनाएंगे।

आइए जल्दी से समीक्षा करें कि प्रत्येक div क्या है।

  • container: स्टैंडर्ड रैपिंग div।
  • ul#tabs: हमारी नेविगेशन। हम अतिरिक्त टैब जोड़ने के लिए जावास्क्रिप्ट का उपयोग करेंगे। मैं जल्द ही समझाऊंगा की क्यों।
  • main: मुख्य कंटेंट को लपेटने के लिए।
  • todo: टैब 1।
  • addNewEntry: टैब 2

स्टेप 4: CSS


यह एक CSS ट्यूटोरियल नहीं है। आप जिस स्टाइलशीट का उपयोग कर चुके हैं उसकी समीक्षा करने के लिए स्वतंत्र हैं। यह डाउनलोड बंडल में है। यदि आप गहरी समीक्षा करना चाहते हैं, तो स्क्रीनकास्ट देखें।


स्टेप 5: रिकॉर्ड्स पुनर्प्राप्त करना

अब जब हमने डेटाबेस से कनेक्ट किया है, और हमारे मार्कअप/CSS को बनाया है, तो हम कुछ कोड लिखेंगे जो डेटाबेस rows को पुनर्प्राप्त करेंगे।

"Todo" div के भीतर, निम्न डालें।

एनालिसिस

  • हमारी Db क्लास तक पहुंचने के लिए 'require' का प्रयोग करें।
  • Db क्लास का एक नया इंस्टैंस बनाएँ।
  • एक क्वेरी बनाएँ। यह "todo" टेबल से सभी रिकॉर्ड्स पुनर्प्राप्त करेगा, और उन्हें असेंडिंग आर्डर में क्रमबद्ध करेगा।
  • अब हमें अपनी क्वेरी एक्सेक्यूट करनी होगी। $Db->mysql->query($query)। $db ऑब्जेक्ट का रिफरेन्स देता है। $mysql mysqli क्लास को रेफेर करता है। $query mysqli क्लास का एक मेथड है जो हमें एक क्वेरी में पास करने की अनुमति देती है। यहां, हम उस स्ट्रिंग में गुज़र रहे हैं जिसे हमने अभी बनाया है।
  • $results->num_rows डेटाबेस से पुनर्प्राप्त rows की कुल संख्या वापस कर देगा। यदि एक या अधिक लौटाए जाते हैं, तो हम rows के माध्यम से लूप की while स्टेटमेंट का उपयोग करेंगे।
  • $row नामक एक अस्थायी वेरिएबल बनाएँ जो प्रत्येक पुनरावृत्ति के लिए जानकारी का रिफरेन्स देगा। फिर हम तीन वेरिएबल बनाते हैं जो डेटाबेस के भीतर अपने संबंधित काउंटरपार्ट को रिफरेन्स करते हैं।
  • प्रत्येक आइटम को "item" के क्लास के साथ एक div के भीतर लपेटा जाएगा।
  • इसके बाद, हम अपने To-Do आइटम को फॉर्मेट करने के लिए heredocs का उपयोग करते हैं। Heredocs HTML और PHP मिश्रण करने के लिए एक आसान, और संगठित तरीका की अनुमति देता है। और जानने के लिए, इस स्क्रीनकास्ट की समीक्षा करना सुनिश्चित करें।
  • h4 टैग के भीतर टाइटल को लपेटें; p  टैग के भीतर डिस्क्रिप्शन को।
  • यूजर को प्रत्येक आइटम को एडिट और डिलीट का तरीका चाहिए। इसलिए, हमने दो एंकर टैग बनाए हैं जो हमें ऐसा करने की अनुमति देंगे। हम बाद में इस पर वापस आ जाएंगे।
  • हमारी heredocs जानकारी को echo करें, और ".item" div को बंद करें।
  • यदि डेटाबेस से शून्य लाइन्स लौटा दी गई हैं, तो "There are zero items. Add one now!" को echo करें।

उम्मीद है कि, इस सब का मतलब आप समझ गए। इस बिंदु पर, आपके पास निम्न की तरह कुछ होना चाहिए:


स्टेप 6: एक नया आइटम जोड़ें


हम यह भी चाहते हैं कि यूजर के पास नए रिकॉर्ड डालने की क्षमता हो। आइए एक ऐसा फॉर्म बनाएं जो इस चीज़ को अनुमति देगा।

यह आपका स्टैण्डर्ड 'रन-ऑफ-द-मिल' फॉर्म है। हमने टाइटल और डिस्क्रिप्शन के लिए इनपुट जोड़ा है। जब सबमिट बटन क्लिक किया जाता है, तो दर्ज की गई जानकारी "addItem.php" पर पोस्ट की जाएगी। चलिए अब उस पेज को बनाते हैं।


स्टेप 7: AddItem.php

नया डॉक्यूमेंट बनाएं, और इसे "addItem.php" के रूप में सेव करें। निम्नलिखित कोड में पेस्ट करें:

  • हमारे db क्लास को रेफेर करें।
  • क्लास का इंस्टैंस बनाएं।
  • यदि "addEntry" के नाम से सबमिट बटन मौजूद है, तो निम्न कोड चलाएं।
  • एक नई क्वेरी बनाएँ। आप देखेंगे कि मैं प्रश्न चिह्नों का उपयोग वैल्यूज के रूप में कर रहा हूं। हमारे डेटाबेस को अपडेट करते समय प्रीपेड स्टेटमेंट का उपयोग करना पसंदीदा तरीका है। SQL इंजेक्शन के खिलाफ खुद को बचाने के लिए यह एक शानदार तरीका है।
  • हमारे द्वारा बनाई गई क्वेरी में गुजरकर हमारे mysql वेरिएबल तैयार करें।
  • यदि इसे सफलतापूर्वक तैयार किया गया था, तो उपयुक्त पैरामीटर बाइन्ड करें। पहला पैरामीटर प्रत्येक आइटम के लिए डेटा टाइप्स के लिए पूछता है। मैंने "स्ट्रिंग" का रिफरेन्स देने के लिए उपयोग किया है। दूसरे दो पैरामीटर POST सुपर ग्लोबल array से टाइटल और डिस्क्रिप्शन वैल्यू प्राप्त करता हैं।
  • स्टेटमेंट को एक्सेक्यूट करें।
  • अंत में, यूजर को वापस होम पेज पर रीडायरेक्ट करें।

स्टेप 7: अपडेट आइटम


JQuery की AJAX क्षमताओं का उपयोग करके, यूजर को प्रत्येक आइटम को पोस्टबैक के बिना अपडेट करने दें। "js" फ़ोल्डर में एक नई फ़ाइल बनाएं, और इसे "scripts.js" पर कॉल करें। याद रखें, हमने पहले ही इस फाइल को हमारे मार्कअप में रेफेर कर दिया है।

यदि आप index.php पर हमारे मार्कअप पर वापस आ जाएंगे, तो आप देखेंगे:

प्रत्येक लाइन को डिकोड करें

JQuery का उपयोग करके, हमें यह सुनना होगा कि "editEntry" की क्लास के साथ एंकर टैग क्लिक किया गया है।

इसके बाद, हम $(this) कैशिंग कर रहे हैं - जो एंकर टैग को रेफेर करता है जिसे क्लिक किया गया था।

हमें ओरिजिनल डिस्क्रिप्शन को स्टोर करने की आवश्यकता है। हम पैरेंट div को खोजने के लिए एंकर टैग को बताते हैं, और p  टैग की खोज करते हैं - जिसमें डिस्क्रिप्शन टेक्स्ट होता है। हम "text()" का उपयोग करके उस वैल्यू को पकड़ते हैं।

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

एक बार फिर, हम इस छिपे हुए इनपुट तक पहुंचने के लिए "find" का उपयोग करते हैं, और उसके बाद इसकी वैल्यू लेते हैं।

अब, हमें यूजर को एक नया डिस्क्रिप्शन एंटर करने की अनुमति देनी होगी। यही कारण है कि उन्होंने "Edit Entry" पर क्लिक किया, है ना ?? हमें डिस्क्रिप्शन p  टैग मिलता है, इसे खाली करें, और उसके बाद textarea को संलग्न (append) करें। हम यह सुनिश्चित करने के लिए "empty()" का उपयोग करते हैं कि हम सभी टेक्स्ट से छुटकारा पाएं; अब इसकी आवश्यकता नहीं है। सुविधा के रूप में - इस textarea की वैल्यू पुराने टेक्स्ट के बराबर होगी।


इस नए textarea को ढूंढें, और जब यूजर टेक्स्टबॉक्स छोड़ देता है, तो फ़ंक्शन चलाएं।

नए टेक्स्ट को कैप्चर करें जिसमे यूजर textarea में प्रवेश करते हैं।

.Ajax फ़ंक्शन को कॉल करें, और कुछ पैरामीटर में पास करें। टाइप "POST" होगा। एक्सेस करने के लिए URL "updateEntry.php" है। इस पेज पर जाने के लिए डेटा नया टेक्स्ट है जिसे यूजर द्वारा एंटर किया गया है, और डेटाबेस में उस रॉ से यूनिक id है। जब अपडेट सफलतापूर्वक किया जाता है, तो एक फ़ंक्शन चलाएं, और पुराने टेक्स्ट को नए टेक्स्ट के साथ अपडेट करें!

यह सुनिश्चित करने के लिए false को रीटर्न करें कि एंकर टैग पर क्लिक करने से यूजर कहीं और डायरेक्ट नहीं होता है।


स्टेप 7b: The PHP

याद रखें, हमने jQuery के साथ हमारे 'updateEntry' PHP पेज को कॉल किया है, लेकिन हमने वास्तव में इसे नहीं बनाया है! चलिए अब करते हैं। "UpdateEntry.php" नामक एक नया पेज बनाएं और निम्न में पेस्ट करें।

पहले की तरह, हम अपने db क्लास को रेफेर कर रहे हैं, और फिर हम इसे तुरंत चालू करते हैं। इसके बाद, हम एक नया वेरिएबल बना रहे हैं, जिसे $response कहा जाता है, और इसे "update_by_id()" मेथड से जो कुछ भी रीटर्न किया जाता है उसके बराबर बना रहा है। हमने अभी तक इस मेथड को नहीं बनाया है। अब ऐसा करने का अच्छा समय है।

हमारी क्लास में एक नया मेथड जोड़ना

अपने db.php पेज पर वापस आएं और नीचे एक नए मेथड को जोड़ें।

यह मेथड दो पैरामीटर्स को स्वीकार करता है: id, और आइटम का डिस्क्रिप्शन। इसलिए, जब हम इस मेथड को कॉल करते हैं, तो हमें उन दो पैरामीटर्स को पास करना याद रखना चाहिए! हम अपनी क्वेरी बनाकर शुरू करते हैं: "todo" टेबल अपडेट करें और जो कुछ भी पारित किया गया है उसे बदलें - लेकिन केवल उस रॉ को अपडेट करें जहां id पास पैरामीटर के बराबर है।

पिछली बार की तरह, हम अपने डेटाबेस को अपडेट करने के लिए प्रीपेयर्ड स्टेटमेंट का उपयोग करेंगे। यह सबसे सुरक्षित तरीका है! हमारी क्वेरी तैयार करें, पैरामीटर (स्ट्रिंग और इन्टिजर, या 'si') को बाइंड करें, और एक्सेक्यूट करें। हम एक सामान्य स्ट्रिंग रीटर्न कर रहे हैं, लेकिन वास्तव में इसकी आवश्यकता नहीं है। अब हमारा अपडेट पूरी तरह से काम करना चाहिए!


स्टेप 8: आइटम को डिलीट करना


चलिए यूजर को एंट्रीज को हटाने के लिए एक अच्छा असिंक्रोनोस तरीका भी बनाते हैं। जब वे किसी आइटम के लिए डिलीट बटन पर क्लिक करते हैं, तो हम हटाए जाने को रिफ्लेक्ट करने के लिए div को फेड और डेटाबेस को अपडेट करेंगे। अपनी जावास्क्रिप्ट फ़ाइल खोलें और निम्न को जोड़ें:

डिकोडिंग

जब "deleteEntryAnchor" की क्लास के साथ एंकर टैग क्लिक किया जाता है, तो फ़ंक्शन चलाएं।

$(this) को thisparam के रूप में कैश करें।

डिस्क्रिप्शन के टेक्स्ट को "Please Wait" में बदलें। हमें यूजर को कुछ फीडबैक देने के लिए ऐसा करना होगा, बस अगर अपेक्षा से अधिक समय लगता है।

आखिरी बार की तरह, हम कुछ पैरामीटर में पास करते हैं जो "delete.php" तक पहुंचते हैं। URL की वैल्यू में पेज को हार्डकोड करने की बजाय, मैं attr('href') तक पहुंच रहा हूं - जो 'delete.php?id=$id' के बराबर है।

हमें "DATA" पैरामीटर की आवश्यकता नहीं है, क्योंकि सभी उचित जानकारी URL के क्वेरीस्ट्रिंग के भीतर है। एक बार डिलीट को सफलतापूर्वक एक्सेक्यूट करने के बाद, हम पैरेंट '.item' div पाते हैं, और धीरे-धीरे इसे बाहर निकाल देते हैं।

Delete.php

हमने jQuery के साथ अपना डिलीट पेज कॉल किया है, लेकिन हमने अभी तक PHP नहीं बनाया है। अपना नया पेज बनाएं और निम्न कोड जोड़ें।

अब तक इन प्रोसीजर में आपको इस्तेमाल किया जाना चाहिए। हमारी क्लास का एक नया इंस्टैंस बनाएं, और "delete_by_id" मेथड को कॉल करें। एक बार यह सफलतापूर्वक पूरा हो जाने के बाद, यूजर को "index.php" पर रीडायरेक्ट करें। जैसा कि आपने अनुमान लगाया होगा, हमें अपने db क्लास के भीतर एक नया मेथड बनाने की जरूरत है। Db.php पर वापस आएं और अपना नया फ़ंक्शन जोड़ें।

Delete_by_id () मेथड

यह method एक पैरामीटर स्वीकार करेगा - id। याद रखें: एक रॉ को अपडेट करने के लिए, हमें उस रॉ की यूनिक id का पता होना चाहिए। अन्यथा, यह हर रॉ को अपडेट करेगा। हम टेबल से सभी रॉस को हटा देंगे, जहां id पास की गई चीज़ के बराबर है। चूंकि प्रत्येक रॉ की अपनी यूनिक id होती है, केवल एक ही रिकॉर्ड प्रभावित होगा। इसके बाद, हम इस क्वेरी को हमारे mysql ऑब्जेक्ट में पास करते हैं। एक बार फिर, कुछ रीटर्न करना अनावश्यक है; यह सिर्फ मस्ती के लिए है।


स्टेप 9: अतिरिक्त jQuery

हमने अपने सभी PHP का काम समाप्त कर दिया हैं! अंतिम स्टेप में कुछ बेहतर काम करने के लिए थोड़ा सा jQuery जोड़ना है। अपनी जावास्क्रिप्ट फ़ाइल के शीर्ष पर, document.ready मेथड के ठीक बाद, निम्न कोड जोड़ें:

मैंने प्रत्येक स्टेप को काफी अच्छी तरह से कमेंट दिए है। तो, हमे खुद को दोहराने से बचना होगा। आपकी अंतिम scripts.js फ़ाइल इस तरह दिखनी चाहिए।


स्टेप 10: रुको! IE 6 में लेआउट अजीब है।

हम इसे अभी ख़त्म नहीं कर सकते हैं! वह मजेदार 'ole इंटरनेट एक्सप्लोरर 6 कुछ लेआउट समस्याओं का कारण बन रहा है।


  1. बैकग्राउंड pngs 24 बिट की हैं। IE6 मूल रूप से इसका समर्थन नहीं करता है। इसे ठीक करने के लिए हमें एक स्क्रिप्ट इम्पोर्ट करने की आवश्यकता होगी।
  2. नेविगेशन टैब सही जगह पर दिखाई नहीं दे रहे हैं।
  3. एक्सपैंड होने पर प्रत्येक div.item सही तरीके से प्रदर्शित नहीं हो रहा है।
  4. हमारे edit, और delete बटन हमारे div के दाईं ओर बहुत दूर हैं।

समाधान

हालांकि हम शायद ये करना चाहें, हम अभी तक इस ब्राउज़र को अनदेखा नहीं कर सकते हैं। सौभाग्य से, आप पाएंगे कि अधिकांश IE6 मुद्दों को आसानी से तय किया जा सकता है। सबसे पहले, हमें एक ऐसी स्क्रिप्ट इम्पोर्ट करने की आवश्यकता है जो हमारे अल्फा पारदर्शिता मुद्दे को ठीक करेगी। डीन मार्टिन की एक शानदार जावास्क्रिप्ट फ़ाइल है जो IE6 को स्टैंडर्ड मानकों तक लाती है। बस हमारे 24 बिट png फाइलनामों के अंत में "-trans" जोड़कर, हम अपनी समस्या को ठीक कर सकते हैं। इमेजेज फ़ोल्डर पर जाना सुनिश्चित करें, और नाम एडिट करें।

IE7 स्क्रिप्ट का एक होस्टेड संस्करण प्रदान करके Google की CDN फिर से बचाव के लिए आता है। यह हमारी पारदर्शिता समस्या को हल करता है, लेकिन हमारे पास अभी भी कुछ और क्वीरक्स (quirks) है।


ध्यान दें कि, हमारे कंडीशनल स्टेटमेंट में, हमने एक "ie.css" फ़ाइल भी इम्पोर्ट की। उस फ़ाइल को अभी बनाएं, और निम्न को पेस्ट करें:

आप पाएंगे कि "position: relative", "overflow: hidden", और "height: 100%" आपके IE6 मुद्दों का 90% तय करेगा। अब, हमारे लेआउट सभी ब्राउज़रों में पूरी तरह से काम करते है!


हो गया!


यहां कवर करने के लिए बहुत कुछ था। उम्मीद है कि, मैंने खुद को काफी एक्सप्लेन किया है। यदि नहीं, तो संबंधित स्क्रीनकास्ट यही है! किसी भी ब्लरी एरिया को साफ़ करने के लिए इसको रिव्यु करना सुनिश्चित करें। यदि आपके पास अभी भी प्रश्न हैं, तो बस मुझसे पूछो! पढ़ने के लिए बहुत - बहुत धन्यवाद।

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.