HTML5 डेटा- * विशेषताओं का उपयोग करके पृष्ठों के अनुवाद के लिए JQuery प्लगइन

आपका दिन शुभ हो!

मैं सरलतम jQuery प्लगइन और डेटा के रूप में एक अच्छा नया html5 गोले का उपयोग करके साइट पृष्ठों के अनुवाद के लिए अपनी सर्वोत्तम प्रथाओं को साझा करना चाहता हूं- * विशेषताएँ।

तो, लक्ष्य: विकसित वेब अनुप्रयोग के लिए आसानी से और जल्दी से कई भाषाओं के लिए सहायता प्रदान करने की क्षमता।

अब थोड़ा कोड। मान लें कि हमारे पास इस तरह से सरल HTML मार्कअप है:

<h1 data-translate-key="HEADING-ONE">Heading 1</h1> <p data-translate-key="SOME-TEXT">Some text in tag P</p> <p data-translate-key="ANOTHER-TEXT">another text</p> 

जैसा कि आप ऊपर दी गई सूची में देख सकते हैं, हमारे पास कई html तत्व हैं जो अनुवाद के लिए डेटा-ट्रांसलेट-की विशेषता का उपयोग करते हुए घोषित किए गए हैं, जिसके द्वारा हम पाठ को शब्दकोश से ही प्राप्त करेंगे। टैग के अंदर भी पाठ "डिफ़ॉल्ट" है।

शब्दकोश का संगठन मानक जावास्क्रिप्ट वस्तुओं का उपयोग करके लागू किया जाएगा:

 var dict = { en: { 'SITE-TITLE': 'Site title', 'HEADING-ONE': 'Heading 1', 'SOME-TEXT': 'Some text in tag P', 'ANOTHER-TEXT': 'another text1' }, ru: { 'SITE-TITLE': ' ', 'HEADING-ONE': ' ', 'SOME-TEXT': '     P', 'ANOTHER-TEXT': ' ' } }; 

जैसा कि आप इस उदाहरण में देख सकते हैं, हमारे पास दो शब्दकोश हैं। रूसी और अंग्रेजी के लिए।

अब सबसे महत्वपूर्ण बात। वास्तव में प्लगइन ही। इसमें कोड की कुछ लाइनें हैं:

 $.html5Translate = function(dict, lang){ $('[data-translate-key]').each(function(){ $(this).html( dict[ lang ][ $(this).data('translateKey') ] ); }); }; 

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

प्लगइन का उपयोग करने के लिए, बस निम्नलिखित करें:

1. jQuery लाइब्रेरी कनेक्ट करें।
2. प्लगइन ही कनेक्ट करें।
3. आवश्यक तत्वों के लिए डेटा-अनुवाद-कुंजी विशेषताओं को सेट करके HTML दस्तावेज़ को चिह्नित करें।
4. एक शब्दकोश बनाएं (यह अनुशंसा की जाती है कि आप इसे एक अलग जेएस फ़ाइल से भी जोड़ दें)।
5. दस्तावेज़ के डोम तैयार होने पर अनुवाद फ़ंक्शन को कॉल करें और फ़ंक्शन के लिए आवश्यक पैरामीटर निर्दिष्ट करें:

 $(document).ready(function(){ $.html5Translate(dict, 'en'); }); 

यहां, जैसा कि आप देख सकते हैं, हम अनुवाद फ़ंक्शन को कॉल करते हैं, यह दर्शाता है कि हमें डिक्शनरी डिक्शनरी ऑब्जेक्ट का उपयोग करने और सभी तत्वों के पाठ का अंग्रेजी में अनुवाद करने की आवश्यकता है।

आपका ध्यान देने के लिए धन्यवाद।