জেকোয়েরি দিয়ে রিলোড ছাড়া কনটেন্ট দেখানো

বন্ধুরা, আশা করি সবাই ভালো আছেন। আজ আমরা ছোট একটি টিউটোরিয়াল দেখবো। jQuery, Ajax ও PHP ব্যবহার করে একটি পেইজকে সম্পূর্ণরূপে রিলোড না করে পেইজের লেখা কিভাবে দেখানো যায় তা শিখবো।

একাধিক কনটেন্টকে একই স্থানে দেখানোর জন্য প্রথমে আমরা একাধিক লিঙ্ক তৈরি করবো। এরপর ঐ লিঙ্কের মাঝে কনটেন্টগুলো রাখবো। ইউজার যে লিঙ্কে ক্লিক করবে ঐ লিঙ্কের মাঝে রাখা কনটেন্টটি প্রদর্শন করবে। কিন্তু পেইজটি রিলোড নিবে না। এটির জন্য আমরা jQuery ব্যবহার করবো। আপনি চাইলে jQuery এর ফাইলটি ডাউনলোড করে নিতে পারেন অথবা jQuery ফাইলের অফিসিয়াল লিঙ্ক ব্যবহার করতে পারেন।

চলুন তবে শুরু করা যাক। এই টিউটোরিয়ালে মোট তিনটি ফাইল ব্যবহার করা হয়েছে:

মূল পেইজ:

<html>
<head>
<script
 type="text/javascript" 
src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
function swapContent(cv) {
    $("#myDiv").html('<img src="loader.gif"/>').show();
    var url = "phpscript.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $("#myDiv").html(data).show();
    });
}
//-->
</script>
<style type="text/css"> 
#myDiv{
    width:200px; height:150px; padding:12px; 
    border:#A426DA 1px solid; background-color:#B9FDD2; 
    font-size:18px;
} 
</style> 
</head>
<body>
<a href="#" onClick="return false" 
onMouseDown="javascript:swapContent('con1');">Content1</a> ° 
<a
 href="#" onClick="return false" 
onMouseDown="javascript:swapContent('con2');">Content2</a> ° 
<a
 href="#" onClick="return false" 
onMouseDown="javascript:swapContent('con3');">Content3</a>
<div id="myDiv">
My default content for this page element when the 
page initially loads</div>
</body>
</html>

একটি এনিমেটেড gif ফাইল। আপনি যদি গ্রাফিকের কাজ পারেন তবে নিজে একটি এনিমেটেড gif ফাইল তৈরি করে নিতে পারেন অথবা “এনিমেটেড লোডিং gif ফাইল” লিখে সার্চ দিলে হাজার হাজার ওয়েবসাইট পাবেন।

আজ এই পর্যন্তই পরবর্তীতে নতুন কিছু নিয়ে আবার হাজির হবো। আল্লাহ হাফেজ।

জেকোয়েরি দিয়ে রিলোড ছাড়া কনটেন্ট দেখানো

একটি মন্তব্য পোস্ট করুন Blogger Facebook

একটি মন্তব্য পোস্ট করুন

জেকোয়েরি দিয়ে রিলোড ছাড়া কনটেন্ট দেখানো

Next

নবীনতর পোস্ট

Previous

পুরাতন পোস্ট

একটি মন্তব্য পোস্ট করুন Blogger Facebook

একটি মন্তব্য পোস্ট করুন