ওয়েব পেইজে সিম্পল ফোল্ডেবল সেকশন যোগ করা (জাভাস্ক্রিপ্ট)
আপনি আপনার ওয়েবপেইজে আপনি কিছু সেকশন যোগ করতে চাচ্ছেন যেগুলো মাউস-ক্লিক করে ভাঁজ করে রাখা যাবে বা প্রয়োজনমত খুলে রাখা যাবে। এরকম কিছুই আজকে দেখাবো আমার এই টিউটোরিয়ালে। আপনাদের বোঝার স্বার্থে আউটপুটের কিছু স্ক্রীণশট দিচ্ছি:
সব সেকশন কলাপস্ড:
প্রথম সেকশনটি এক্সপান্ডেড:
প্রথম ও দ্বিতীয় সেকশনগুলো এক্সপান্ডেড:
তৃতীয় সেকশনটি এক্সপান্ডেড:
আসুন শুরু করি। একটি নতুন এইচটিএমএল ফাইল নেই:
head ট্যাগের মাঝখানে আমাদের সেকশনগুলোর collapsed ও expanded অবস্থার জন্য স্টাইল ডিফাইন করি:
এখানে আমরা collapsed ও expanded উভয় অবস্থাতেই টাইটেলের ফন্ট বোল্ড, ব্যাকগ্রাউন্ড জলপাই রংয়ের এবং কার্সর পয়েন্টার আকারে রাখছি। কার্সর পয়েন্টার আকারে (cursor: pointer;) রাখার কারণে ইউজার ওখানে মাউস নিলে সহজেই বুঝতে পারবে যে এখানে ঘটনা আছে, মানে এটা ক্লিকেবল। দুই অবস্থার জন্য শুধুমাত্র ফন্ট কালারটাই ভিন্ন ভিন্ন রাখছি আমরা (যথাক্রমে নীল ও কালো)।
উপরোক্ত স্টাইল ডেফিনিশন ফোল্ডিং ফাংশনালিটির জন্য অপরিহার্য নয়। আপনারা চাইলে অন্য স্টাইল ব্যবহার করতে পারেন, কিংবা আদৌ না ব্যবহার করলেও পারেন।
যাকগে, আসুন এবারে প্রয়োজনীয় জাভাস্ক্রীপ্টটি লিখি:
এখানে আমরা "expand_collapse(parentDiv)" ফাংশনটিতে প্যারামিটার হিসেবে "parentDiv" নিয়েছি যা আমরা পরবর্তীতে নির্দিষ্ট <div>টিতে ক্লিক করে প্যারামিটার হিসেবে ফাংশনটির কাছে পাস করাব।
ফাংশনের প্রথম ৩ লাইনে ভেরিয়েবলে আমরা আমাদের তিনটি সেকশনের জন্য কনটেন্ট মজুদ করলাম।
পরবর্তী লাইনে "var parent_div = document.getElementById(parentDiv);" এর মাধ্যমে আমরা ক্লিক করা টাইটেলটির প্যারেন্ট ডিভটিকে খুঁজে এনে "parent_div" ভেরিয়েবলটিতে স্টোর করলাম। এখানে প্যারামিটার "parentDiv" হিসেবে আমরা "this.parentNode.id" ব্যবহার করবো প্যারামিটার পাস করার সময় যা আপনার পরবর্তীতে দেখবেন।
পরের লাইনে আমরা "title_div" নামক ভেরিয়েবলে টাইটেল <div> টিকে তুলে আনলাম। পরবর্তীতে <body> সেকশনের কোডটি দেখলে বুঝতে পারবেন এখানে টাইটেল হলো প্যারেন্ট কন্টেইনারটির প্রথম চাইল্ড (childNodes[0]) এবং মূল কনটেন্ট হবে দ্বিতীয় চাইল্ড (childNodes[1])।
পরবর্তীতে if .. else ব্লকে মূল কাজ করবে content_div.style.display = "block"; ও content_div.style.display = "none"; এই দুটি লাইন। তবে আগে-পরের লাইনগুলোও গুরুত্বপূর্ণ ভূমিকা পালন করে। সেগুলোর ব্যাখ্যা প্রয়োজনে (কেউ যদি জানতে চান) পরে দেয়া যাবে।
এবারে আসুন <body> জন্য কোডিং যোগ করি।
এখানে divXX এক একটি সেকশনের প্যারেন্ট বা মূল কন্টেইনার যা টাইটেল ও কনটেন্টকে ধারণ করবে। এরপরে আছে টাইটেল <div> যাতে ক্লিক করলে ফাংশনটিতে প্যারেন্ট ডিভটির আইডি ("this.parentNode.id" এর মাধ্যমে) পাস হবে ও ফাংশনটি এক্সিকিউটেড হবে।
এখানে আমি কিছু প্রয়োজনীয় ইনলাইন স্টাইলও ডিফাইন করেছি। যেমন: বাই-ডিফল্ট, মানে পেইজটি লোড হওয়ার সময় কনটেন্ট না দেখানোর জন্য, অর্থাৎ সেকশনটিকে ঐ সময়ে কলাপস্ড রাখার জন্য style = "display: none" ব্যবহার করেছি।
আউটপুটের এনিমেটেড স্ক্রীণশট:
সব সেকশন কলাপস্ড:
প্রথম সেকশনটি এক্সপান্ডেড:
প্রথম ও দ্বিতীয় সেকশনগুলো এক্সপান্ডেড:
তৃতীয় সেকশনটি এক্সপান্ডেড:
আসুন শুরু করি। একটি নতুন এইচটিএমএল ফাইল নেই:
<html>
<head>
</head>
<body>
</body>
</html>
head ট্যাগের মাঝখানে আমাদের সেকশনগুলোর collapsed ও expanded অবস্থার জন্য স্টাইল ডিফাইন করি:
<html>
<head>
<style type = "text/css">
.title_at_collapsed
{
color: #0000FF;
font-weight: bold;
background-color: #999944;
cursor: pointer;
}
.title_at_expanded
{
color: #000000;
font-weight: bold;
background-color: #999944;
cursor: pointer;
}
</style>
</head>
<body>
</body>
</html>
এখানে আমরা collapsed ও expanded উভয় অবস্থাতেই টাইটেলের ফন্ট বোল্ড, ব্যাকগ্রাউন্ড জলপাই রংয়ের এবং কার্সর পয়েন্টার আকারে রাখছি। কার্সর পয়েন্টার আকারে (cursor: pointer;) রাখার কারণে ইউজার ওখানে মাউস নিলে সহজেই বুঝতে পারবে যে এখানে ঘটনা আছে, মানে এটা ক্লিকেবল। দুই অবস্থার জন্য শুধুমাত্র ফন্ট কালারটাই ভিন্ন ভিন্ন রাখছি আমরা (যথাক্রমে নীল ও কালো)।
উপরোক্ত স্টাইল ডেফিনিশন ফোল্ডিং ফাংশনালিটির জন্য অপরিহার্য নয়। আপনারা চাইলে অন্য স্টাইল ব্যবহার করতে পারেন, কিংবা আদৌ না ব্যবহার করলেও পারেন।
যাকগে, আসুন এবারে প্রয়োজনীয় জাভাস্ক্রীপ্টটি লিখি:
<html>
<head>
<style type = "text/css">
.title_at_collapsed
{
color: #0000FF;
font-weight: bold;
background-color: #999944;
cursor: pointer;
}
.title_at_expanded
{
color: #000000;
font-weight: bold;
background-color: #999944;
cursor: pointer;
}
</style>
<script type = "text/javascript">
function expand_collapse(parentDiv)
{
var content01_content = "Here are the todos......Here are the todos";
var content02_content = "<iframe src = 'http://forum.projanmo.com' width = '1000px' height = '700px'></iframe>";
var content03_content = "<iframe src = 'http://bdnews24.com/bangla/' width = '1000px' height = '700px'></iframe>";
var parent_div = document.getElementById(parentDiv);
var title_div = parent_div.childNodes[0];
var content_div = parent_div.childNodes[1];
if (content_div.style.display == "none")
{
title_div.className = "title_at_expanded";
content_div.style.display = "block";
if (content_div.innerHTML == "")
{
content_div.innerHTML = eval(content_div.id + "_content");
}
}
else
{
title_div.className = "title_at_collapsed";
content_div.style.display = "none";
}
}
</script>
</head>
<body>
</body>
</html>
এখানে আমরা "expand_collapse(parentDiv)" ফাংশনটিতে প্যারামিটার হিসেবে "parentDiv" নিয়েছি যা আমরা পরবর্তীতে নির্দিষ্ট <div>টিতে ক্লিক করে প্যারামিটার হিসেবে ফাংশনটির কাছে পাস করাব।
ফাংশনের প্রথম ৩ লাইনে ভেরিয়েবলে আমরা আমাদের তিনটি সেকশনের জন্য কনটেন্ট মজুদ করলাম।
পরবর্তী লাইনে "var parent_div = document.getElementById(parentDiv);" এর মাধ্যমে আমরা ক্লিক করা টাইটেলটির প্যারেন্ট ডিভটিকে খুঁজে এনে "parent_div" ভেরিয়েবলটিতে স্টোর করলাম। এখানে প্যারামিটার "parentDiv" হিসেবে আমরা "this.parentNode.id" ব্যবহার করবো প্যারামিটার পাস করার সময় যা আপনার পরবর্তীতে দেখবেন।
পরের লাইনে আমরা "title_div" নামক ভেরিয়েবলে টাইটেল <div> টিকে তুলে আনলাম। পরবর্তীতে <body> সেকশনের কোডটি দেখলে বুঝতে পারবেন এখানে টাইটেল হলো প্যারেন্ট কন্টেইনারটির প্রথম চাইল্ড (childNodes[0]) এবং মূল কনটেন্ট হবে দ্বিতীয় চাইল্ড (childNodes[1])।
পরবর্তীতে if .. else ব্লকে মূল কাজ করবে content_div.style.display = "block"; ও content_div.style.display = "none"; এই দুটি লাইন। তবে আগে-পরের লাইনগুলোও গুরুত্বপূর্ণ ভূমিকা পালন করে। সেগুলোর ব্যাখ্যা প্রয়োজনে (কেউ যদি জানতে চান) পরে দেয়া যাবে।
এবারে আসুন <body> জন্য কোডিং যোগ করি।
<html>
<head>
<style type = "text/css">
.title_at_collapsed
{
color: #0000FF;
font-weight: bold;
background-color: #999944;
cursor: pointer;
}
.title_at_expanded
{
color: #000000;
font-weight: bold;
background-color: #999944;
cursor: pointer;
}
</style>
<script type = "text/javascript">
function expand_collapse(parentDiv)
{
var content01_content = "Here are the todos......Here are the todos";
var content02_content = "<iframe src = 'http://forum.projanmo.com' width = '1000px' height = '700px'></iframe>";
var content03_content = "<iframe src = 'http://bdnews24.com/bangla/' width = '1000px' height = '700px'></iframe>";
var parent_div = document.getElementById(parentDiv);
var title_div = parent_div.childNodes[0];
var content_div = parent_div.childNodes[1];
if (content_div.style.display == "none")
{
title_div.className = "title_at_expanded";
content_div.style.display = "block";
if (content_div.innerHTML == "")
{
content_div.innerHTML = eval(content_div.id + "_content");
}
}
else
{
title_div.className = "title_at_collapsed";
content_div.style.display = "none";
}
}
</script>
</head>
<body>
<div id = "div01" style = "border: 1px solid #000000"><div id = "title01" class = "title_at_collapsed" onclick = "expand_collapse(this.parentNode.id)">To Do</div><div id = "content01" style = "display: none"></div></div>
<div id = "div02" style = "border: 1px solid #000000"><div id = "title02" class = "title_at_collapsed" onclick = "expand_collapse(this.parentNode.id)">Projanmo Forum</div><div id = "content02" style = "display: none"></div></div>
<div id = "div03" style = "border: 1px solid #000000"><div id = "title03" class = "title_at_collapsed" onclick = "expand_collapse(this.parentNode.id)">BD News 24</div><div id = "content03" style = "display: none"></div></div>
</body>
</html>
এখানে divXX এক একটি সেকশনের প্যারেন্ট বা মূল কন্টেইনার যা টাইটেল ও কনটেন্টকে ধারণ করবে। এরপরে আছে টাইটেল <div> যাতে ক্লিক করলে ফাংশনটিতে প্যারেন্ট ডিভটির আইডি ("this.parentNode.id" এর মাধ্যমে) পাস হবে ও ফাংশনটি এক্সিকিউটেড হবে।
এখানে আমি কিছু প্রয়োজনীয় ইনলাইন স্টাইলও ডিফাইন করেছি। যেমন: বাই-ডিফল্ট, মানে পেইজটি লোড হওয়ার সময় কনটেন্ট না দেখানোর জন্য, অর্থাৎ সেকশনটিকে ঐ সময়ে কলাপস্ড রাখার জন্য style = "display: none" ব্যবহার করেছি।
আউটপুটের এনিমেটেড স্ক্রীণশট:
1 comments:
-
zelal on ২৮ এপ্রিল, ২০১২ এ ১২:৪৬ AM বলেছেন...
-
এই টিউটোরিয়ালটিতো ভাই আমি লিখেছিলাম এখানে:
http://forum.projanmo.com/topic28244.html
কারো অনুমতি না নিয়ে এভাবে কপি পেস্ট করা কি ঠিক?
ধন্যবাদ।
জেলাল -
এতে সদস্যতা:
মন্তব্যগুলি পোস্ট করুন (Atom)
