आज मैं आपको Clone के बारे में बताने जा रहा हूं. Clone फ़ंग्शन jQuery में किसी भी एलिमेंट का हू ब हू हमशक्ल बना देता है. यहां तक कि उसकी प्रापर्टीज़, इवेंट्स आदि को भी कापी कर देता है.
निम्नलिखित कोड को अपने HTML पेज में कापी पेस्ट कीजिये:
<html>
<head>
<title>Learning jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<button type="button" id="btn_clickme">Clone Me</button>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(this).clone().insertAfter(this);
});
});
</script>
</body>
</html>
अब इसमें जो लाइन मोटे अक्षरों में लिखी है उसमें ध्यान दीजिये.
$(this).clone().insertAfter(this);
this: यानि कि वो बटन जिसमें क्लिक किया जा रहा है.
clone(). यानि कि एक डुप्लीकेट बनाया जा रहा है
insertAfter(this): यानि कि जिस बटन में क्लिक किया जा रहा है उसी के बगल में clone को जोड़ दिया जाए.
इस पेज को जब आप ब्राउजर में देखेंगे तो केवल एक बटन दिखेगा. लेकिन जब आप उसमें क्लिक करेंगे तो उसके डुप्लिकेट बनना शुरू हो जायेंगे. कु़छ इस तरह:
लेकिन अभी एक दिक्कत है. अभी केवल एक ही बटन पर क्लिक करने से क्लोन बन रहे हैं. जो बटने क्लोन बन चुकी हैं उनमें क्लिक करने से कुछ नही होता है. इसका मतलब है कि बटन या यूं कहें कि एलिमेंट तो क्लोन हो रहा है पर उसका व्यवहार नही.
उसके व्यवहार को भी क्लोन करने के लिये केवल इतना करना है कि clone() फ़ंग्शन में true पैरामीटर को गुजारना है:
$(this).clone(true).insertAfter(this);
अब फ़िर से अपने पेज को देखिये. क्लोन बनी हुई बटने अपना भी क्लोन बनाने में सक्षम हो जायेंगी.
अभी तक वेब डेवलपमेंट अथवा प्रोग्रामिंग आदि से संबंधित जानकारी पर अंग्रेजी का एकाधिकार रहा है. भारत में इतने आई टी गुरू होने के बावजूद भारतीय भाषाओं में इस विषय पर लेखन नगण्य है. इस ब्लाग के माध्यम से मैं हिन्दी भाषिओं तक वेब डेवलपमेंट का ज्ञान पहुंचाने की कोशिश कर रहा हूं. अत: आप सभी से अनुरोध है कि
अंकुरजी नया ब्लॉग शुरू करने के लिए हार्दिक बधाई ।
जवाब देंहटाएंधन्यवाद
जवाब देंहटाएंyou are Invited at http://TechMitra.koshi.co.in to contribute as Premium/Guest writer.
जवाब देंहटाएंinteresting...
जवाब देंहटाएं