शनिवार, 26 सितंबर 2009

आइये jQuery सीखें - 5 – Manipulation(4)

आज मैं आपको 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 को जोड़ दिया जाए.

इस पेज को जब आप ब्राउजर में देखेंगे तो केवल एक बटन दिखेगा. लेकिन जब आप उसमें क्लिक करेंगे तो उसके डुप्लिकेट बनना शुरू हो जायेंगे. कु़छ इस तरह:

image

लेकिन अभी एक दिक्कत है. अभी केवल एक ही बटन पर क्लिक करने से क्लोन बन रहे हैं. जो बटने क्लोन बन चुकी हैं उनमें क्लिक करने से कुछ नही होता है. इसका मतलब है कि बटन या यूं कहें कि एलिमेंट तो क्लोन हो रहा है पर उसका व्यवहार नही.

उसके व्यवहार को भी क्लोन करने के लिये केवल इतना करना है कि clone() फ़ंग्शन में true पैरामीटर को गुजारना है:

$(this).clone(true).insertAfter(this);

अब फ़िर से अपने पेज को देखिये. क्लोन बनी हुई बटने अपना भी क्लोन बनाने में सक्षम हो जायेंगी.

4 टिप्‍पणियां:

इस ब्लाग में प्रकाशित सामग्री कापीराईट द्वारा सुरक्षित है. बिना अनुमति इसका किसी भी प्रकार से अन्यत्र प्रयोग/प्रकाशन मूल रूप में/बदल कर उपयोग नही किया जा सकता है.

हिंदी में तकनीकी लेखन को प्रोत्साहित करें

please donate अभी तक वेब डेवलपमेंट अथवा प्रोग्रामिंग आदि से संबंधित जानकारी पर अंग्रेजी का एकाधिकार रहा है. भारत में इतने आई टी गुरू होने के बावजूद भारतीय भाषाओं में इस विषय पर लेखन नगण्य है. इस ब्लाग के माध्यम से मैं हिन्दी भाषिओं तक वेब डेवलपमेंट का ज्ञान पहुंचाने की कोशिश कर रहा हूं. अत: आप सभी से अनुरोध है कि हिंदी में तकनीकी लेखन के लिये सहयोग करें
मैं वेबसाइटें भी बनाता हूं. यदि आपको बनवानी हो तो बताएं.

इस ब्लॉग में खोजें

फ़ॉलोअर