জেকুয়েরি ইভেন্টের মাধ্যমে সার্চ বার তৈরির পদ্ধতি

এই টিউটোরিয়ালে আমরা জেকুয়েরি দিয়ে সার্চ বার বা সার্চ অপশন তৈরি করার পদ্ধতি সম্পর্কে জানবো।

জেকুয়েরি হচ্ছে জাভাস্ক্রিপ্টের লাইব্রেরী। জেকুয়েরি দিয়ে একটি ওয়েবসাইটে বিভিন্ন ফাংশন যোগ করা যায়। ধরা যাক, আমরা এমন একটি  সার্চ বার তৈরি করতে চাই, যা শুধু মাত্র একটি  সার্চ বাটনের মধ্যে সীমাবদ্ধ থাকবে। একজন ইউজার যখন ওই সার্চ বাটনটিতে ক্লিক করবে, কেবলমাত্র তখনই সার্চের নির্দিষ্ট ফরমটি দেখা যাবে।

তাছাড়া, অন্যান্য সময়ে ওই সার্চ ফরমটি লুকিয়ে থাকবে। যদিও এটা এইচটিএমএল এর এডভান্স টেকনিক। কিন্তু আমরা এখানে বিষয়টিকে সহজভাবে উপস্থাপন করব যাতে প্রত্যেকেই বুঝতে পারে।

তাহলে চলুন কিভাবে এই ধরণের একটি ফরম তৈরি করা যায় তা দেখি।

প্রথমেই  একটি নতুন ফোল্ডার তৈরি করুন। ফোল্ডারটির নাম যা খুশি তাই রাখতে পারেন। তবে এই টিউটোরিয়ালের জন্য এর নাম রাখলাম টেস্ট সার্চ বার। (অবশ্যই ইংরেজিতে) এবার আপনার পছন্দের টেক্সট এডিটরে নীচের কোডগুলো লিখে এইচ টি এম এল ইনডেক্স পেইজ হিসেবে সেভ করুন।

<!doctype html>
<html lang="en-US">

<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html">
	<title>টেস্ট সার্চ বার</title>
</head>

<body>
	<nav id="topbar">
		<ul class="navigation">
			<li class="threebar"><a href="#">মেনু</a>
			</li>
			<li><a href="#">নীড়পাতা</a>
			</li>
			<li><a href="#">আমাদের সম্পর্কে</a>
			</li>
			<li><a href="#">প্রজেক্ট বিবরণী</a>
			</li>
			<li><a href="#">যোগাযোগ</a>
			</li>
		</ul>
		<div class="searchlink" id=" searchlink”>
      <div class=" searchform ">
        <form id="search ">
          <input type="text " class="s " id="s " placeholder="এখানে খুঁজুন… ">
          <button type="submit " class="sbtn ">সার্চ</i></button>
        </form>
      </div>
    </div>
  </nav>
</body>
</html>

এবার ফাইলটি সেভ করে কোনও ব্রাউজারে খুললে নীচের ছবির মত দেখাবেঃ

এই ফাইলটি একটি প্লেইন এইচটিএমএল ফাইল যার সাথে কোনও সি এস এস স্টাইল শিট যোগ করা হয় নি। তাই এবার আমরা একটি নতুন সিএসএস ফাইল তৈরি করে এই ডকুমেন্টের সাথে যোগ করব।এজন্য টেস্ট সার্চ বার ফোল্ডারে নতুন একটি ফাইল তৈরি করি। তারপর সেই ফাইলটিকে স্টাইল ডট সি এস এস নামে সেভ করি। খেয়াল রাখতে হবে এটি যেন টেক্সট ফাইল হিসেবে সেভ না হয়।

এবার পুনরায় এইচটিএমএল ফাইলটি খুলুন এবং শেষের হেড ট্যাগের পূর্বে নীচের কোডটি যোগ করুন।

এর মাধ্যমে সিএসএস ফাইল ও এইচটিএমএল ফাইলের মধ্যে যোগসূত্র তৈরি করা হলো। এবার আমরা এইচ টি এম এল ফাইলটির ডিজাইনের জন্য কিছু রুলস যোগ করব। যাতে এইচ টি এম এল ফাইলটির সৌন্দর্য বাড়ে এবং ব্যাবহার করাও সোজা মনে হয়।

এজন্য স্টাইল ফাইলটি একটি নোট প্যাডে খুলুন। আমার প্রিয় টেক্সট এডিটর হচ্ছে নোটপ্যাড++। চাইলে এখান থেকে ডাউনলোড করে নিতে পারেনঃ

তাই, আমি পাশাপাশি এইচ টি এম এল এবং সি এস এস দুটি ফাইলই খুলে রাখলাম। আমরা জানি সি এস এসের রুলস নির্ধারণ করা হয় এইচ টি এম এল সিলেক্টর দিয়ে। তাই এইচ টি এম এল ডকুমেন্ট থেকে সিলেক্টর গুলো আলাদা করা দরকার, যাতে আমরা এগুলোর ডিজাইন নির্ধারণ করে দিতে পারি।

আমাদের ডকুমেন্টের সিলেক্টরগুলো হচ্ছেঃ

topbar, navigation, threebar, searchlink, searchform, search, s, sbtn

এগুলো সবগুলোই এইচটিএমএল ডিভিশন সিলেক্টর। তবে, যে ডিভিশন গুলো আইডি হিসেবে ব্যবহার করা হয়েছে সেগুলো চিহ্নিত করতে শুরুতে হ্যাশট্যাগ ব্যবহার করতে হবে। এবং যেগুলো ক্লাস হিসেবে আছে সেগুলো চিহ্নিত করতে ফুলস্টপ ব্যবহার করা হয়।

তাহলে, এবার স্টাইল শিটে ডিভিশন আইডি ও ক্লাসগুলোকে সাজাই।

#topbar
.navigation
.searchlink
.searchform
#search
#s
.sbtn

এবার এইচটিএমএল ডকুমেন্টের জন্য কিছু সাধারন রুলস যোগ করি যেগুলো প্রায় প্রত্যেক এইচটিএমএল ডকুমেন্টেই লাগে। মনে রাখা দরকার যে, এই রুলসগুলো প্রত্যেক এইচটিএমএল ডকুমেন্টের শুরুতে অবশ্যই যোগ করতে হবে। এতে একই রুলসের বারংবার ব্যবহার করার দরকার হয় না।

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	outline: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html {
	overflow-y: scroll;
}
body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 62.5%;
	line-height: 1;
	color: #555;
}
br {
	display: block;
	line-height: 1.6em;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}
ol,
ul {
	list-style: none;
}
input,
textarea {
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
}
blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}
strong,
b {
	font-weight: bold;
}
em,
i {
	font-style: italic;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	border: 0;
	max-width: 100%;
	height: auto;
	width: 100%;
}

ব্যাস, এবার মুল স্টাইল শুরু করি। আমাদের পেজ স্ট্রাকচার হবে নিচের মতঃ

/** page structure **/

#topbar {
	display: block;
	height: 40px;
	background: #75de89;
}
.navigation {
	display: block;
	float: left;
}
.navigation li {
	display: block;
	float: left;
}
.navigation li a {
	display: block;
	float: left;
	font-size: 1.4em;
	line-height: 40px;
	padding: 0 25px;
	text-decoration: none;
	font-weight: bold;
	color: #000;
}
.navigation li a:hover {
	color: #dedede;
}
.navigation li.threebar {
	display: none;
	font-size: 1.8em;
}
.navigation li.threebar a {
	position: relative;
	padding: 0 30px;
}
.navigation li.threebar a:hover {
	padding: 0 30px;
	color: #bababa;
	background: #75de89;
}
.searchlink {
	display: block;
	float: right;
	position: relative;
	padding: 0 20px;
	right: 0;
	font-size: 16px;
	cursor: pointer;
	height: 40px;
	line-height: 40px;
}
.searchlink:hover,
.searchlink.open {
	color: #;
	background: #75d120;
}
.searchlink.open > .searchform {
	display: block;
	

এবার সার্চ ফিল্ডের কাজ শুরু করি।

/** search field **/
.searchform {
display: none;
position: absolute;
width: 300px;
height: 50px;
line-height: 40px;
top: 40px;
right: 0;
padding: 0 15px;
cursor: default;
background: #75d120;
}
.searchlink.open .searchform {
display: block;
}
#search {
display: block;
position: relative;
}
#s {
width: 270px;
background: #75de89;
padding: 8px 11px;
border: 0;
color: #eee;
}
.sbtn {
display: block;
position: absolute;
right: 5px;
top: 13px;
background: none;
border: none;
color: #000;
font-size: 0.8em;
cursor: pointer;
}

 

এবার আমাদের ডকুমেন্টটি রেস্পন্সিভ করতে মিডিয়া কুয়েরি যোগ করিঃ

/** media queries **/
@media screen and (max-width: 515px) {
.navigation li { display: none; }
.navigation li.threebar { display: block; }
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

এবার স্টাইল ডকুমেণ্টটি সেভ করে এইচটিএমএল ডকুমেন্টটি কোন ব্রাউজারে খুলে দেখি। আমাদের সার্চ বারটি দেখা যাচ্ছে। সেই সঙ্গে আমাদের মেনুটিও দেখতে পাচ্ছি।

কিন্তু আমরা এখন এই মেনু এবং সার্চ বারটিকে লুকিয়ে ফেলবো কিছু আইকনের মধ্যে, যা ক্লিক না করা পর্যন্ত দেখা যাবে না। এজন্য আমরা জেকুয়েরি ইভেন্ট প্লাগ ইন ব্যবহার করব।

প্রথমেই আমরা জেকুয়েরি ইভেন্ট প্লাগিন ও আইকনের জন্য নির্দিষ্ট সিএস এস ফাইল, এই দুটোকে আমাদের এইচটিএমএল ডকুমেন্টে লিঙ্ক করব। এজন্য শেষের হেড ট্যাগের আগে এই দুটি লাইন যোগ করি।

এবার মেনু লেখাটির স্থানে একটি থ্রি বার আইকন ও সার্চ এর স্থলে সার্চ আইকন যোগ করব। এছারাও আরেকটি নকল সার্চ আইকন যোগ করব, যেটি জাভাস্ক্রিপ্টের ইভেন্ট বাটন হিসেবে ব্যবহৃত হবে এবং মুল সার্চ বারটিকে লুকিয়ে রাখবে। এখেত্রে ডিভিশন ক্লাস সার্চ লিঙ্কের পর পরই এই আইকনটি বসাতে হবে। এগুলো যোগ করার পর এইচটিএমএল ডকুমেন্টটি দেখতে এইরকম হবে।

<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>টেস্ট সার্চ বার</title>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
<nav id="topbar">
<ul class="navigation">
<li class="threebar"><a href="#"><i class="fa fa-bars"></i></a></li>
<li><a href="#">নীড়পাতা</a></li>
<li><a href="#">আমাদের সম্পর্কে</a></li>
<li><a href="#">প্রজেক্ট বিবরণী</a></li>
<li><a href="#">যোগাযোগ</a></li>
</ul>

<div class="searchlink" id="searchlink">
<i class="fa fa-search"></i>
<div class="searchform">
<form id="search">
<input type="text" class="s" id="s" placeholder="এখানে খুঁজুন…">
<button type="submit" class="sbtn"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</nav>
</body>
</html>

এবার, লক্ষ্য করে দেখুন সার্চ বাটনটি সার্চ লিংকটিকে আড়াল করে ফেলেছে।এবং ক্লিক করলেও সার্চ ফরমটি খুলছে না। কারন, আমরা এখনও এইচটিএমএল ডকুমেন্টে জেকুয়েরি ইভেন্ট যোগ করি নি। তাই, নিচের স্ক্রিপ্টটি শেষের বডি ট্যাগের পূর্বে যোগ করি।

<script type="text/javascript">
$(function() {
var $searchlink = $('#searchlink');

// hover effect
$searchlink.on('mouseover', function(){
$(this).addClass('open');
}).on('mouseout', function(){
$(this).removeClass('open');
});

/** on click effect
$searchlink.on('click', function(e){
var target = e ? e.target : window.event.srcElement;

if($(target).attr('id') == 'searchlink') {
if($(this).hasClass('open')) {
$(this).removeClass('open');
} else {
$(this).addClass('open');
}
}
});**/
});
</script>

লক্ষ্য করে দেখুন, এখানে দুই ধরণের কোড আছে একটি হচ্ছে মাউস কার্সর ইভেন্ট বাটনের উপর নিয়ে গেলেই বাটনটি খুলে যাবে। আর আরেকটি হচ্ছে, ক্লিক করলে তারপর খুলবে। আমি এখানে ক্লিক করলে খুলে এমন ফাংশনই ব্যবহার করব তাই, হোভার ইফেক্টটি কেটে দিলাম।

এবার কোডটি দেখতে নিচের মত হবে।

<script type="text/javascript">
$(function() {
var $searchlink = $('#searchlink');

// on click effect
$searchlink.on('click', function(e){
var target = e ? e.target : window.event.srcElement;

if($(target).attr('id') == 'searchlink') {
if($(this).hasClass('open')) {
$(this).removeClass('open');
} else {
$(this).addClass('open');
}
}
});
});
</script>

এবার আমরা ক্লিক করলেই বাটনটি খুলে যাচ্ছে আবার ক্লিক করলে বন্ধ হয়ে যাচ্ছে।

হুররে…। আমাদের কাজ শেষ। পুরো ফাইলটি নিচের লিঙ্ক থেকে ডাউনলোড করুন।

পোস্টটি ভালো লাগলে লাইক, শেয়ার এবং কমেন্ট করতে ভুলবেন না।

Leave a Reply