তৈরি করুন কন্টেন্ট বক্স এবং জেকুয়েরি Show/Hide করুন…

0
36
jquery
jquery

আজকের এই ছোট টিউটোরিয়ালে আপনার শিখতে পারবেন কিভাবে খুব সহজে জেকুয়েরি দিয়ে যেকনো একটি কন্টেন্ট বক্সকে “লুকায়িত বা প্রদর্শিত” করাবেন। অনেক সাইটে দেখা যায় শুধু ক্লিক করা মাত্র লুকায়িত কনেটেন্ট গুলো স্ক্রিনে প্রদর্শিত হয়, অথবা ক্লিক করলেই কন্টেন্ট গুলো আবার হারিয়ে যায়। আমি সেই ধরনের একটা ছোট টিউটোরিয়াল দিয়ে আপনাদের বোঝানোর চেস্টা করবো কিভাবে সেটা করতে হয়।

টিউটোরিয়াল সোর্স ও লাইভ প্রিভিউ

স্লাডিং লুকায়িত বা প্রদর্শিত বক্স তৈরি করার জন্য প্রথমে আমাদের HTML হেড অংস জেকুয়েরি লাইব্রেরী যুক্ত করতে হবে। তারপর আমারা একটা ক্লাস তৈরি করবো যে ক্লাস-টা দিয়ে আপনার নির্বাচিত বক্সকে “Show and Hide” করবে। আমারা সেই ক্লাসটা একটি লিংক ট্যাগ এর মধ্যে তৈরি করবো যাতে করে সেটা ক্লিক করা যায়। এর পরে আমারা আরোও একটা ক্লাস তৈরি করবো যার মধ্যে আপনার কন্টেন্ট গুলো থাকবে এবং সিএসএস দিয়ে বক্স টাইপের ডিজাইন করা হবে। সেটা এবং সেটা আমারা DIV এর মধ্যে তৈরি করবো। এরপরে আমারা কিছু জাভাস্ক্রিপ্ট তৈরি করবো জেকুয়েরির এই রেফারেন্স অনুযায়ী।

প্রথমেই এইচটিএমএল কোডঃ

1 <a href="#" class="tfm_show_hide">Click to Show or Hide</a><br />
2 <div class="tfm_box">
3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, totam similique quod omnis saepe. Vero, repellendus, architecto voluptate sed nam repellat quidem expedita blanditiis aperiam qui velit fugit dicta illum alias nobis ipsa minus iusto nulla officiis porro illo facere excepturi saepe eaque minima dolorem debitis animi consequatur obcaecati ad! <ahref="#" class="tfm_show_hide">Click to close!</a>
4 </div>

এবার কিছু সিএসএস কোড দিয়ে ঝাকানাকা করে নেইঃ

1 .tfm_box{
2   background-color: #C6FF99;
3   padding: 20px;
4   margin-top: 10px;
5   border: 5px solid #FF3333;
6 }
7
8 .tfm_show_hide {
9   display:none;
10   background: black;
11   padding: 10px;
12   color: #FFF;
13   text-decoration: none;
14 }
15 .tfm_box a.tfm_show_hide {
16   background: blueviolet;
17   padding: 1px;
18   color: #FFF;
19   text-decoration: none;
20 }

এখন এই রেফারেন্স অনুযায়ী নিচের মত করে স্ক্রিপ্ট লিখিঃ

1 $(document).ready(function(){
2
3
4     $(".tfm_box").hide();
5   $(".tfm_show_hide").show();
6   
7   $('.tfm_show_hide').click(function(){
8   $(".tfm_box").slideToggle();
9   });
10
11 });

এখানে উপরের কোডগুলো সম্বন্ধে একটু ধারনা নেয়া নেইঃ $(“.tfm_box”).hide(); এই লাইনের কাজ হচ্ছেঃ ব্রাউজারে পেজ লোড হওয়ার পরে .tfm_box টাকে সে হাইড করে দেবে। তারপরের লাইনে $(“.tfm_show_hide”).show(); এই কোডটুকুর কাজ হচ্ছে .tfm_show_hide ব্রাউজারে দেখাবে এটা কিন্তু আমারা CSS দিয়ে হাইড করে রেখেছিলাম CSS এ লক্ষ্য করে দেখুন। $(‘.tfm_show_hide’).click(function() এই লাইনের কাজ হচ্ছে .tfm_show_hide ক্লিক করা যাবে এমন একটি বাটন যে বাটন দিয়ে আপনার বক্সকে ব্রাউজার-এ হাইড করবে এবং শো করাবে। $(“.tfm_box”).slideToggle(); এটার কাজ হচ্ছে .tfm_box এই ক্লাসটির উপরে ইফেক্ট করবে বা .tfm_box এই ক্লাসটাকে একবার শো একবার হাইড করাবে।

তাহলে সম্পুর্ন কোড দেখতে নিচের মত হবে।

1 <!DOCTYPE html>
2 <html>
3 <head>
4   <style>
5 body{
6   font-family:Verdana, Geneva, sans-serif;
7   font-size:16px;}
8
9 .tfm_box{
10   background-color: #C6FF99;
11   padding: 20px;
12   margin-top: 10px;
13   border: 5px solid #FF3333;
14 }
15
16 .tfm_show_hide {
17   display:none;
18   background: black;
19   padding: 10px;
20   color: #FFF;
21   text-decoration: none;
22 }
23 .tfm_box a.tfm_show_hide {
24   background: blueviolet;
25   padding: 1px;
26   color: #FFF;
27   text-decoration: none;
28 }
29   </style>
30   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
31 </head>
32 <body>
33     <a href="#" class="tfm_show_hide">Click to Show or Hide</a><br />
34 <div class="tfm_box">
35 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, totam similique quod omnis saepe. Vero, repellendus, architecto voluptate sed nam repellat quidem expedita blanditiis aperiam qui velit fugit dicta illum alias nobis ipsa minus iusto nulla officiis porro illo facere excepturi saepe eaque minima dolorem debitis animi consequatur obcaecati ad! <ahref="#" class="tfm_show_hide">Click to close!</a>
36 </div>
37 <script type="text/javascript">
38
39 $(document).ready(function(){
40
41
42     $(".tfm_box").hide();
43   $(".tfm_show_hide").show();
44   
45   $('.tfm_show_hide').click(function(){
46   $(".tfm_box").slideToggle();
47   });
48
49 });
50
51 </script>
52 </body>
53 </html>

তাহলে এবার নিজের ইচ্ছেমত ডিজাইন করুন, এই কোডটা আপনি যেকনো সাইটে ব্যবহার করে সাইট কে আরোও সুন্দর করতে পারেন। কোন সমস্যা হলে মন্তব্যের মাধ্যমে আমাকে জানান।

LEAVE A REPLY

Please enter your comment!
Please enter your name here