javascript - Translate the following jQuery code to YUI 2.x code -
अस्वीकरण: मुझे YUI का उपयोग करने का कोई अनुभव नहीं है।
< पी> मैं सोच रहा था कि कैसे यूआईआई में लिखे गए jQuery कोड की निम्नलिखित पंक्तिएं दिखेगी इसके अलावा, चूंकि YUI पदानुक्रमित निर्भरता प्रणाली का उपयोग कर रहा है, जो कोड को काम करने के लिए
.js फ़ाइलों को शामिल करने की आवश्यकता है? 1। HTML तत्व के आईडी को देखते हुए तत्व पर कई शैली नियम लागू होते हैं।
$ ('# foo')। सीएसएस ({color: 'पीला', पृष्ठभूमि: 'काला'}); 2 चेनिंग: एक HTML तत्व का एक आईडी दिया गया है, उस पर एक शैली नियम लागू करें, बार की एक कक्षा जोड़ें, और उसकी सामग्री को '!' के लिए सेट करें।
$ ('# foo')। सीएसएस ('रंग', 'लाल')। AddClass ('बार')। Html ('!'); 3 LI तत्व को # मेन्यू में जोड़ें।
$ ('# मेनू')। ऐपेंड ('& lt; li & gt; ; एक अतिरिक्त आइटम & lt; / li & gt; '); 4 मूल घटना बाध्यकारी: जब भी LI तत्व पर क्लिक किया जाता है, तब एक चेतावनी दिखाएं।
$ ('li')। क्लिक करें (फ़ंक्शन () {अलर्ट ('क्लिक-क्लिक!');});
अस्वीकरण: मैं एक YUI विशेषज्ञ नहीं हूं, ऐसा करने के लिए बेहतर तरीके हो सकते हैं इन चीजों को भी।
इसके अलावा, jQuery को जो भी आपने रखा है उसे करने में अच्छा है। वाईयूआई अपने विगेट्स के लिए और अधिक बनाया गया है, इसलिए आप इसकी मुख्य कार्यक्षमता jQuery के (यानी, यह सब कुछ नहीं बदलते हैं, जो आप कभी भी फ़ंक्शन कॉल्स के साथ DOM करना चाहते हैं) की तुलना में थोड़ा कम व्यापक पा सकते हैं। मुझे लगता है जैसे कि यूआई 2.x का उपयोग करता है क्योंकि वे विगेट्स चाहते हैं (मैं उनके मेन्यू का उपयोग काफी कुछ कर रहा हूं)।
# 1: आपको इसे शामिल करना होगा:
& Lt; स्क्रिप्ट प्रकार = "टेक्स्ट / जावास्क्रिप्ट" src = "http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" & gt; & lt; / स्क्रिप्ट & gt; & Lt; स्क्रिप्ट प्रकार = "टेक्स्ट / जावास्क्रिप्ट" src = "http://yui.yahooapis.com/2.7.0/build/dom/dom-min.js" & gt; & lt; / स्क्रिप्ट & gt; कोड होगा:
var el = YAHOO.util.Dom.get ('foo'); YAHOO.util.Dom.setStyle (एल, 'रंग', 'पीला'); YAHOO.util.Dom.setStyle (एल, 'पृष्ठभूमि', 'काला'); वैकल्पिक रूप से ...
<पूर्व> YAHOO.util.Dom.setStyle ('foo', 'color', 'yellow'); YAHOO.util.Dom.setStyle ('foo', 'पृष्ठभूमि', 'काला'); # 2: YUI 2.x में कोई चैनिंग नहीं है, इसलिए आपका समाधान लगभग समान नहीं होगा:
var el = YAHOO। util.Dom.get ( 'foo'); YAHOO.util.Dom.setStyle (एल, 'रंग', 'लाल'); YAHOO.util.Dom.addClass (एल, 'बार'); // सुनिश्चित नहीं है कि YUI के साथ सामग्री कैसे सेट करें ... केवल इसका उपयोग करेगा: el.innerHTML = "!"; मुझे वैसे भी चिल्लाने की कोई परवाह नहीं है, मुझे लगता है कि यह कोड बहुत अधिक पठनीय है। (संपादकीयकरण के लिए क्षमा करें।)
# 3: फिर भी, सुनिश्चित नहीं है कि HTML को सीधे HTML के उपयोग के साथ कैसे सेट करना है ... मुझे लगता है कि यह बस होगा:
< कोड> var el = YAHOO.util.Dom.get ('मेनू'); El.inner HTML + = '& lt; li & gt; एक अतिरिक्त आइटम & lt; / li & gt;'; # 4: आपको इस समाधान के लिए विभिन्न वर्गों को शामिल करना होगा:
& lt; script type = "text / javascript" src = "http : //yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js "& gt; & lt; / स्क्रिप्ट & gt; & Lt; स्क्रिप्ट प्रकार = "टेक्स्ट / जावास्क्रिप्ट" src = "http://yui.yahooapis.com/2.7.0/build/event/event-min.js" & gt; & lt; / स्क्रिप्ट & gt; और यहां कोड है:
var lis = document.getElementsByTagName ("li"); YAHOO.util.Event.addListener (lis, 'click', फ़ंक्शन () {चेतावनी ('क्लिक करें क्लिक करें!');}); दोबारा, खेद है कि ये पूर्ववर्ती वाईयूआई समाधान नहीं हो सकते हैं। इसके अलावा, यदि आप "YAHOO.util.longname.method" के निरंतर उपयोग के बारे में चिंतित हैं, तो आप आसानी से बस अपना खुद का स्थानीय चर बना सकते हैं। YUI अपने पुस्तकालयों में हर समय यह करता है:
(फ़ंक्शन () {var इवेंट = YAHOO.util.Event; // अपने सभी कोड को यहां सम्मिलित करें ...}) ();
Comments
Post a Comment