Mar 31

jQuery এর – AJAX এর ভূমিকা

jQuery এর – AJAX এর ভূমিকা

মোঃ আরিফুল ইসলাম

 

পুরো পৃষ্ঠা রিলোড না করে সার্ভারের সাথে তথ্য বিনিময় করা এবং সেটি ওয়েব পেজ এর একটি অংশে আপডেট করা AJAX এর কাজ।

 

AJAX কি?

AJAX =JavaScript এবং XML এর সমন্বয়।

সংক্ষেপে, AJAX ওয়েব পেজ এর ব্যাকগ্রাউন্ড থেকে ডাটা লোড করে এবং সেটি ওয়েব পেজ এ প্রদর্শন করে। পুরো ওয়েব পেজকে রিলোড না করে।

AJAX ব্যবহার করে তৈরি করা কিছু ওয়েব অ্যাপ্লিকেশন এর উদাহরণ- Gmail, Google Maps, Youtube, and Facebook

 

JQuery এবং Ajax

Ajax এর ফাংশন Jquery এর কিছু মেথড ব্যাবহার করে।

jQuery AJAX মেথড থেকে আমরা যেকোন রিমোট সার্ভার ব্যাবহার করে যেকোন text, HTML, XML, অথবা JSON ফাইল কল করতে পারি। এছাড়াও বহিরাগত কোন নির্বাচিত HTML এলিমেন্টকে লোড করিয়ে ওয়েব পেজ এ প্রদর্শন করাতে পারি।

 

JQuery ছাড়া কি, AJAX এর কোডিং সুশৃঙ্খলভাবে কাজ করতে পারে

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

 

jQuery AJAX মেথড

পরবর্তী টিউটোরিয়াল এ আমরা jQuery AJAX মেথড সম্পর্ক এ জানবো।

 

Mar 31

jQuery এর মাত্রা সঙ্গে কাজ করার জন্য বেশ কিছু গুরুত্বপূর্ণ পদ্ধতি আছে

jQuery এর মাত্রা সঙ্গে কাজ করার জন্য বেশ কিছু গুরুত্বপূর্ণ পদ্ধতি আছে:
যেমনঃ
• width() -প্রস্থ ()
• height() -উচ্চতা ()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()
jQuery এর প্রস্থ () এবং উচ্চতা () পদ্ধতি নিম্নে দেখানো হলঃ
প্রস্থ () মেথড সেট বা একটি উপাদান প্রস্থ কত হবে তা নির্দেশ করে (প্যাডিং, সীমানা, বা মার্জিন অন্তর্ভুক্ত রয়েছে)।
উচ্চতা () মেথড সেট বা একটি উপাদান এর উচ্চতা কত হবে তা প্রদান করে থাকে (প্যাডিং, সীমানা, বা মার্জিন অন্তর্ভুক্ত).
নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর প্রস্থ এবং উচ্চতা দেখানো হলঃ
যেমনঃ
$(“button”).click(function(){
var txt=””;
txt+=”Width: ” + $(“#div1”).width() + “</br>”;
txt+=”Height: ” + $(“#div1”).height();
$(“#div1”).html(txt);
});

jQuery এর innerWidth () এবং innerHeight () পদ্ধতি নিম্নে দেখানো হলঃ
InnerWidth () মেথড একটি উপাদান প্রস্থ (প্যাডিং বিদ্যমান রয়েছে) প্রদান করে।
InnerHeight () মেথড একটি উপাদান উচ্চতা (প্যাডিং বিদ্যমান রয়েছে) প্রদান করে।
নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর ভেতরের প্রস্থ / উচ্চতা দেখানো হল:
যেমনঃ
$(“button”).click(function(){
var txt=””;
txt+=”Inner width: ” + $(“#div1”).innerWidth() + “</br>”;
txt+=”Inner height: ” + $(“#div1”).innerHeight();
$(“#div1”).html(txt);
});

jQuery এর outerWidth () এবং outerHeight () পদ্ধতি নিম্নে দেখানো হলঃ

OuterWidth () মেথড একটি উপাদান প্রস্থ নির্দেশ করে (প্যাডিং এবং সীমানা অন্তর্ভুক্ত রয়েছে)।
OuterHeight () মেথড একটি উপাদান এর উচ্চতা নির্দেশ করে থাকে (প্যাডিং এবং সীমানা অন্তর্ভুক্ত রয়েছে)।
নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর বাইরের প্রস্থ / উচ্চতা দেখানো হল:
যেমনঃ
$(“button”).click(function(){
var txt=””;
txt+=”Outer width: ” + $(“#div1”).outerWidth() + “</br>”;
txt+=”Outer height: ” + $(“#div1”).outerHeight();
$(“#div1”).html(txt);
});

OuterWidth (এটি সত্য হতে হবে) পদ্ধতি একটি উপাদানের প্রস্থ (প্যাডিং, সীমানা, এবং মার্জিন রয়েছে) নির্দেশ করে থাকে।
OuterHeight ((এটি সত্য হতে হবে) পদ্ধতি একটি উপাদানের উচ্চতা (প্যাডিং, সীমানা, এবং মার্জিন রয়েছে) নির্দেশ করে থাকে।
যেমনঃ
$(“button”).click(function(){
var txt=””;
txt+=”Outer width (+margin): ” + $(“#div1”).outerWidth(true) + “</br>”;
txt+=”Outer height (+margin): ” + $(“#div1”).outerHeight(true);
$(“#div1”).html(txt);
});

jQuery এর আরো প্রস্থ () এবং উচ্চতা () পদ্ধতি রয়েয়ছেঃ

নিম্নলিখিত উদাহরণে আমরা (এইচটিএমএল ডকুমেন্ট) এবং উইন্ডো (ব্রাউজার ভিউপোর্ট) প্রস্থ এবং উচ্চতা দেখব:
যেমনঃ
$(“button”).click(function(){
var txt=””;
txt+=”Document width/height: ” + $(document).width();
txt+=”x” + $(document).height() + “\n”;
txt+=”Window width/height: ” + $(window).width();
txt+=”x” + $(window).height();
alert(txt);
});

নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর প্রস্থ ও উচ্চতা দেখানো হল:
যেমনঃ
$(“button”).click(function(){
$(“#div1”).width(500).height(500);
});

Mar 31

jQuery এ এইচটিএমএল এলিমেন্টস দূর করা

লেখকঃ মোস্তাফিজুর ফিরোজ ।

জেকোয়েরিতে খুব সহজে আগে থেকে থাকা এইচটিএমএল এলিমেন্টস দূর করা যায় ।

 

এলিমেন্টস বা উপাদান দূর করা

এলিমেন্টস বা উপাদান দূর করার জন্য দুই ধরণের জেকোয়েরি মেথডস আছে ।

  1. remove() : এটি এর সাব ক্যাটাগরি সহ সকল সিলেক্ট করা এলিমেন্টস দূর করে ।
  2. empty() : সাব ক্যাটাগরি এর সকল উপাদানকে দূর করে ।

 

jQuery remove() Method

jQuery remove() Method এর সাব ক্যাটাগরি সহ সকল সিলেক্ট করা এলিমেন্টস দূর করে ।

$(“#div1”).remove();

ফলাফল : remove()

 

jQuery empty() Method

jQuery empty() Method এর সাব ক্যাটাগরি এর সকল উপাদানকে দূর করে ।

$(“#div1”).empty();

ফলাফল : empty()

 

দূরকৃত এলিমেন্টস এর ফিল্টার করা

jQuery remove() method একটি প্যারামিটার সাপোর্ট করে তাই এটি দূরকৃত এলিমেন্টস এর ফিল্টার করতে পারে ।

এই প্যারামিটার টি যেকোন জেকোয়েরি সিলেক্টর হবে ।

নিচের উদাহরণ class=”italic”: ক্লাসের সকল <p> উপাদানগুলোকে দূর করবে ।

$(“p”).remove(“.italic”);

ফলাফল : দূরকৃত এলিমেন্টস এর ফিল্টার

 

জেকোয়েরি এইচটিএমএল রেফারেন্স

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

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

Mar 31

জেকোয়েরি মোবাইল দিয়ে ফিল্টার লিস্ট তৈরি করে সার্চ ফিল্ড তৈরি

জেকোয়েরি মোবাইল দিয়ে ফিল্টার লিস্ট তৈরি করে সার্চ ফিল্ড তৈরি
লেখকঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me

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

ফিল্টার যোগ্য উপাদান সমূহঃ
যে সকল উপাদানের একটি সাব উপাদান লিস্ট বা বাচ্চা ক্যাটাগরি থাকে তাদের ফিল্টার লিস্ট তৈরি করা যাবে ।

কিভাবে একটি সার্চের জায়গা তৈরি করবো?
১। যে সকল উপাদান সমূহকে ফিল্টার করবো তাদের data-filter=”true” এট্রিবিউট দ্বারা অবশ্যই অন্তর্ভূক্ত থাকতে হবে ।

২। একটি <input> উপাদান তৈরি করতে হবে এবং এর সাথে data-type=”search” এট্রিবিঊট যোগ করতে হবে । এটা একটি সার্চের জায়গা তৈরি করবে । <input> কে একটি ফর্মের সাথে জড়াতে হবে এবং এই <form> element এর সাথে “ui-filterable” ক্লাস যোগ করতে হবে । এটা সার্চ ফিল্ড এবং সার্চের তথ্যের মাঝে একটা ভাগ দেখাবে ।

৩। তারপর data-input এট্রিবিউট কে ফিল্টারযোগ্য উপাদানের সাথে যোগ করতে হবে । এর ভেলু অবশ্যই <input> উপাদানের সাথে মিলতে হবে । তা না হলে কিন্তু সার্চ করা হলে কিছুই খুঁজে পাবে না ।

নিচে আমরা একটি উদাহরণ দেখাচ্ছিঃ

<form class=”ui-filterable”>
<input id=”myFilter” data-type=”search”>
</form>

<ul data-role=”listview” data-filter=”true” data-input=”#myFilter”>
<li><a href=”#”>Adele</a></li>
<li><a href=”#”>Billy</a></li>
<li><a href=”#”>Calvin</a></li>
</ul>

আপনি এর জন্য একটা স্থান ধারক তৈরি করতে পারেন যেটা সার্চ ফিল্ডে কিছু সাজেশান হিসেবে দেখাতে পারে ।
উদাহরণ হিসেবে নিচের কোডটি দেখতে পারেনঃ
<input id=”myFilter” data-type=”search” placeholder=”Search for names..”>

নিজের মত করে ফিল্টার তৈরিঃ
চাইল্ড এলিমেন্টে যেটা থাকবে সুধু সার্চ রেজাল্টে সেটাই দেখাবে । কিন্তু আপনি চাইল্ড এলিমেন্টে data-filtertext এট্রিবিউট যোগ করে নিজের মত করে ফিল্টার তৈরি করতে পারবেন ।
কোডের উদাহরণঃ
<li data-filtertext=”fav”><a href=”#”>Adele</a></li>

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

তাহলে দেখলেন তো কত সহজে আমরা একটা সার্চ ফিল্ড তৈরি করে ফেললাম । আসলেই খুব সহজ এবং অনেক মজার ।

Mar 31

জেকোয়েরি এর কলব্যাক ফাংশন ।

লেখকঃ মোস্তাফিজুর ফিরোজ ।

 

কেমন আছেন সবাই? আজ আমি আপনাদের সাথে জেকোয়েরি এর কলব্যাক ফাংশন সমূহ আলোচনা করবো ।

জেকোয়েরি এর কলব্যাক ফাংশন

যখন কোনো পেজের ইফেক্ট ১০০% শেষ হয় তখন কলব্যাক ফাংশন তার কাজ সম্পাদন করে থাকে ।
সাধারণত জাভাস্ক্রিপ্ট এর বিবৃতি গুলো লাইন বাই লাইন সম্পাদিত হয় । আর যখন ইফেক্ট ব্যবহার করা হয় তখন ইফেক্ট শেষ না হলেও পরের লাইন সম্পাদিত হতে পারে । আর এই সমস্যা দূর করার জন্য কলব্যাক ফাংশন তৈরি করা হয় ।

চলমান ইফেক্ট শেষ হলে কলব্যাক ইফেক্ট চালু হয় ।

কলব্যাক ইফেক্ট টিতে সাধারণত এমন কোড থাকে :

$(selector).hide(speed,callback);

 

 

কলব্যাক ফাংশনসহ উদাহরণঃ

$("button").click(function(){
    $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
    });
});

ফলাফল : কলব্যাক ফাংশন

 

এটায় hide effect শেষ হলে কলব্যাক ফাংশন কাজ করবে ।

কলব্যাক ফাংশনবিহীন উদাহরণঃ

$("button").click(function(){
    $("p").hide(1000);
    alert("The paragraph is now hidden");
});

ফলাফল : কলব্যাক ফাংশনবিহীন

এটায় কোনো কলব্যাক ফাংশন ব্যবহার করা হয়নি । তাই hide effect শেষ হলেই alert box হাজির হবে ।

 

তাহলে কলব্যাক ফাংশনের কাজ বুঝলেন তো? না বুঝতে পারলে কমেন্ট করবেন আমি বুঝতে সাহায্য করবো ।

Mar 31

জে- কুয়ারী ইফেক্ট – অ্যানিমেশন

জে- কুয়ারী ইফেক্ট – অ্যানিমেশন :
Query animate() method ব্যবহার করে কাস্টম অ্যানিমেশন তৈরী করার পদ্ধতি :
সিনট্যাক্স:
$(selector).animate({params},speed,callback);
সিনট্যাক্স এর মধ্যে যে {params}, parameter আছে তাকে যার অ্যানিমেশন তৈরী করতে তার CSS property এর মধ্যে define করতে হবে.
অন্য parameter (speed parameter) টি অপশনাল এবং এটি ব্যাবহার করা হয় ইফেক্ট আর সময়কাল (duration) সেট করার জন্য . “slow”, “fast”, অথবা মিলি সেকেন্ড এ ও ভ্যালু দেয়া যায়
অন্য আর অপশনাল একটি parameter callback যা অ্যানিমেশন সমাপ্ত হওয়ার পরে কার্যকর করা হয়.
একটি খুব ছোট উদাহরণ নীচে দেওয়া হলো
$(“button”).click(function(){
$(“div”).animate({left:’250px’});
});

এবার jQuery animate() method একাধিক Properties এর উদাহরণ নীচে দেওয়া হলো যার মাধ্যমে একাধিক Properties একই সময়ে animate করা যেতে পারে

$(“button”).click(function(){
$(“div”).animate({
left:’250px’,
opacity:’0.5′,
height:’150px’,
width:’150px’
});
});

এখন প্রশ্ন হতে পারে animate() method দিয়া কি CSS Properties animate করা সম্ভব?
উত্তর প্রায়, হ্যাঁ!

এখন আমরা দেখব কিভাবে animate() method Relative Values ব্যবহার করে |
যেমন নিচের example দেখুন
$(“button”).click(function(){
$(“div”).animate({
left:’250px’,
height:’+=150px’,
width:’+=150px’
});
});

পূর্ব নির্ধারিত (Pre-defined) Values ব্যবহার করেও animate() method use করা যায় |
যেমন নিচের উধাহরণ দেখুন
$(“button”).click(function(){
$(“div”).animate({
height:’toggle’
});
});

এবার আমার দেখব কিভাবে Queue Functionality ব্যবহার করে animate() method use করা যায়
যেমন নিচের উধাহরণ দুটি লক্ষ করুন
উধাহরণ 1 .
আপনি যদি একে অপরের পর বিভিন্ন অ্যানিমেশন সম্পাদন করতে চান , তখন Queue Functionality ar সুবিধা গ্রহণ করতে পারেন
$(“button”).click(function(){
var div=$(“div”);
div.animate({height:’300px’,opacity:’0.4′},”slow”);
div.animate({width:’300px’,opacity:’0.8′},”slow”);
div.animate({height:’100px’,opacity:’0.4′},”slow”);
div.animate({width:’100px’,opacity:’0.8′},”slow”);
});

উধাহরণ 2
এটা প্ৰথম এ <div> এলিমেন্ট কে ডান দিকে মুভ করে এবং তারপর ফন্ট সাইজ বাড়ায়
$(“button”).click(function(){
var div=$(“div”);
div.animate({left:’100px’},”slow”);
div.animate({fontSize:’3em’},”slow”);
});

Mar 31

জেকোয়েরি মোবাইল বাটনে আইকন সাজানো ।

জেকোয়েরি মোবাইল বাটনে আইকন সাজানো ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।

জেকোয়েরি মোবাইল এক ঝাঁক আইকন প্রদান করে যা আপনার বাঁটনকে করে তোলে আরো আকর্ষণীয় ।

জেকোয়েরি মোবাইল বাটোনে আইকন যোগ করাঃ
বাটনে আইকন যোগ করার জন্য ui-icon ক্লাস ব্যবহার করতে হবে এবং একে পজিশন করার জন্য ui-btn-icon-pos ক্লাস ব্যবহার করতে হবে ।
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left”>Search</a>

অন্যান্য বাটোনের জন্য যেমন লিস্ট বাটন এবং ফর্ম বাটনের জন্য আপনাকে data-icon এট্রিবিউট ব্যবহার করতে হবে । এটা পরে আমরা আরো বিস্তারিত আলোচনা করবো ।

নিচে আমরা জেকয়েরি মোবাইলের কিছু আইকন সম্পর্কে আলোচনা করবো ঃ

আইকন ক্লাসঃ ui-icon-arrow-r
আইকনের বর্ণনাঃ ডানমূখী তীর ।

আইকন ক্লাসঃ ui-icon-arrow-l
আইকনের বর্ণনাঃ বামমূখী তীর ।

আইকন ক্লাসঃ ui-icon-delete
আইকনের বর্ণনাঃ ডিলিট আইকন ।

আইকন ক্লাসঃ ui-icon-info
আইকনের বর্ণনাঃ ইনফরমেশন আইকন ।

আইকন ক্লাসঃ ui-icon-audio
আইকনের বর্ণনাঃ স্পীকার আইকন ।

আইকন ক্লাসঃ ui-icon-back
আইকনের বর্ণনাঃ ব্যাক আইকন ।

আইকন ক্লাসঃ ui-icon-search
আইকনের বর্ণনাঃ সার্চ আইকন ।

আইকন ক্লাসঃ ui-icon-lock
আইকনের বর্ণনাঃ তালার আইকন ।

আইকন ক্লাসঃ ui-icon-grid
আইকনের বর্ণনাঃ গ্রিড আইকন ।

আইকন ক্লাসঃ ui-icon-alert
আইকনের বর্ণনাঃ সংকেত আইকন ।

আইকন ক্লাসঃ ui-icon-home
আইকনের বর্ণনাঃ হোম আইকন ।

আইকনের পজিশন করাঃ
আপনি চার জায়গায় আইকন বসাতে পারবেন তা হলো সবার উপরে, সবার নিচে , সবার বামে এবং সবার ডানে । এজন্য আপনাকে ui-btn-icon ক্লাস ব্যবহার করতে হবে ।

বাটনে লিংক যোগ করাঃ
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-top”>Top</a>
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-right”>Right</a>
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-bottom”>Bottom</a>
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left”>Left</a>

আপনি উল্লেখিত স্থানে লিংক বসাতে পারবেন । মনে রাখবেন, আপনি যদি আইকনের পজিশন যদি না বলে দেন তাহলে কিন্তু আইকনকে দেখাবে না ।

শুধু আইকন দেখানোঃ
আপনি ইচ্ছা করলে লেখা না দেখিয়ে শুধু আইকন দেখাতে পারেন । এজন্য আপনাকে আইকন পজিশন করার জন্য “notext” ভেলু ব্যবহার করতে হবে ।
a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-notext”>Search</a>

এভাবে “notext” ভেলু ব্যবহার করে শুধু আইকন দেখাতে পারবেন ।

বেষ্টনী দূর করাঃ
ডিফল্টভাবে সকল আইকনের চারিদিকে ধূসর বেষ্টনী থাকে । এই বেষ্টনী দূর করার জন্য আপনাকে “ui-nodisc-icon” ক্লাস ব্যবহার করতে হবে ।

<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left”>With circle (default)</a>
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon”>Without circle</a>

সাদা আইকনকে কালো করাঃ
ডিফল্টভাবে সকল আইকন সাদা রঙের হয় । এই সাদা আইকনকে কালো করার জন্য আপনাকে “ui-alt-icon” এলিমেন্ট যোগ করতে হবে ।

<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left”>White</a>
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon”>Black</a>

এভাবে আপনার ইচ্ছা খুশি মত আইকনকে সাজাতে পারবেন । খুবই সহজ তাই নাহ? 😉

Mar 31

jQuery এর ফেইড পদ্ধতি নিম্নে দেয়া হল

jQuery এর ফেইড পদ্ধতি নিম্নে দেয়া হলঃ
JQuery দিয়ে আপনি একটি লেখাকে দৃশ্যমানতা এবং এই উপাদানটি আউট/বিবর্ণ করতে পারেন.
jQuery এর নিম্নলিখিত বিবর্ণ পদ্ধতি আছে:
• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()
jQuery এর FadeIn () পদ্ধতি নিম্নে দেয়া হলঃ
JQuery তে FadeIn () মেথডটি লুকানো উপাদান দেখতে ব্যবহার করা হয়।
ইহার Syntax: $(selector).fadeIn(speed,callback); এভাবে লেখা হয়ে থাকে।
আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড।
অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।
নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে FadeIn () মেথড দেখানো হলঃ
যেমনঃ
$(“button”).click(function(){
$(“#div1”).fadeIn();
$(“#div2”).fadeIn(“slow”);
$(“#div3”).fadeIn(3000);
});
jQuery এর fadeout () পদ্ধতি নিম্নে দেয়া হলঃ
JQuery এর fadeout () মেথড দিয়ে একটি দৃশ্যমান উপাদানকে আউট করতে ব্যবহার করা হয়।
ইহার Syntax: $(selector).fadeOut(speed,callback); এভাবে লেখা হয়ে থাকে।
এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড।
অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।
নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeout () মেথড দেখানো হলঃ
যেমনঃ
$(“button”).click(function(){
$(“#div1”).fadeOut();
$(“#div2”).fadeOut(“slow”);
$(“#div3”).fadeOut(3000);
});
jQuery এর fadeToggle () পদ্ধতি নিম্নে দেয়া হলঃ
JQuery এর fadeToggle () মেথড হচ্ছে FadeIn () এবং fadeout () পদ্ধতির মধ্যে পার্থক্য।
উপাদান কে হাইড করে দেয়,এবং fadeToggle () তাদের আবার বিবর্ণ করে দেয়।

উপাদান কে হাইড করে দেয়,এবং fadeToggle () তাদের আবার দৃশ্যমান করে দেয়।
ইহার Syntax: $(selector).fadeToggle(speed,callback); এভাবে লেখা হয়ে থাকে।
এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড।
অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।
নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeToggle () মেথড দেখানো হলঃ
যেমনঃ

$(“button”).click(function(){
$(“#div1”).fadeToggle();
$(“#div2”).fadeToggle(“slow”);
$(“#div3”).fadeToggle(3000);
});
jQuery এর fadeTo () পদ্ধতি নিম্নে দেখানো হলঃ
JQuery এর fadeTo () মেথড (0 এবং 1 এর মধ্যে মান) একটি প্রদত্ত অস্বচ্ছতা ফেইড দেখাতে পারবেন।
ইহার Syntax: $(selector).fadeTo(speed,opacity,callback); এভাবে লেখা হয়ে থাকে।
এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড।
FadeTo () মেথড প্রয়োজন অস্বচ্ছতা করতে প্যারামিটারের মান দিয়ে দিতে পারবেন। অস্বচ্ছতা ফেইড নির্দিষ্ট (0 মধ্যে মান 1) এর মধ্যে।
অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।
নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeTo () মেথড দেখানো হলঃ
$(“button”).click(function(){
$(“#div1”).fadeTo(“slow”,0.15);
$(“#div2”).fadeTo(“slow”,0.4);
$(“#div3”).fadeTo(“slow”,0.7);
});

Mar 31

ASP.NET টিউটোরিয়াল :[পর্বঃ ২০]:: ASP.NET Web Forms এর HTML Server Control ট্যাগের বর্ণনা . ASP.NET Web Forms – HTML Controls

ASP.NET টিউটোরিয়াল :[পর্বঃ ২০]:: ASP.NET Web Forms এর HTML Server Control ট্যাগের বর্ণনা
লেখকঃ মোস্তাফিজুর ফিরোজ ।

শিখতে শিখতে আমরা কিন্তু প্রায় শেষ পর্যায়ে । আজ আমরা শিখবো ASP.NET Web Forms এর HTML Server Control ট্যাগের বর্ণনা করা ।

HTML Server Controls
HTML সার্ভার কনট্রোল হলো HTML ট্যাগ যেটা সার্ভারকে বুঝাতে সাহায্য করে ।
HTML ইলিমেন্টস গুলো ASP.NET এর ভিতর সাধারণ টেক্সট আকারেই থাকে । এটাকে প্রোগামেবল করার জন্য এতে runat=”server” এলিমেন্ট যোগ করা হয়ে থাকে । এখানে runat=”server” এলিমেন্ট প্রকাশ করে এটা একটা সার্ভার কনট্রোল ।

উল্লেখ্য, সকল এইচটিএমএল সার্ভার কনট্রোল গুলো runat=”server” এট্রিবিউটের সাথে <form> ট্যাগ আকারে থাকতে হবে ।
ASP.NET এর ভিতরকার সকল এইচটিএমএল এলিমেন্টস গুলো ভালভাবে ট্যাগ দ্বারা শেষ হতে হবে ।

HTML Server Control ট্যাগের বর্ণনা

HtmlAnchor = <a> HTML element কনট্রোল করে ।
HtmlButton = <button> HTML element কনট্রোল করে ।
HtmlForm = <form> HTML element কনট্রোল করে ।
HtmlGeneric = <body>, <div>, <span> প্রভৃতি HTML server কনট্রোল করে ।
HtmlImage = <image> HTML element কনট্রোল করে ।
HtmlInputButton = <input type=”button”>, <input type=”submit”>, এবং <input type=”reset”> HTML elements কনট্রোল করে ।
HtmlInputCheckBox = <input type=”checkbox”> HTML element কনট্রোল করে ।
HtmlInputFile = <input type=”file”> HTML element কনট্রোল করে ।
HtmlInputHidden = <input type=”hidden”> HTML element কনট্রোল করে ।
HtmlInputImage = <input type=”image”> HTML element কনট্রোল করে ।
HtmlInputRadioButton = <input type=”radio”> HTML element কনট্রোল করে ।
HtmlInputText = <input type=”text”> এবং <input type=”password”> HTML elements কনট্রোল করে ।
HtmlSelect = <select> HTML element কনট্রোল করে ।
HtmlTable = <table> HTML element কনট্রোল করে ।
HtmlTableCell = <td> এবং <th> HTML elements কনট্রোল করে ।
HtmlTableRow = <tr> HTML element কনট্রোল করে ।
HtmlTextArea = <textarea> HTML element কনট্রোল করে ।

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

Mar 31

জেকোয়েরি ইফেক্টস ব্যবহার করে টেক্সট হাইড এবং শো করা

লেখকঃ মোস্তাফিজুর ফিরোজ

 

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

তাহলে আগে চলুন এখান থেকে দুইটি উদাহরণ দেখে আসি ।

উদাহরণ ১ঃ jQuery hide()

একটি সহজ jQuery hide() মেথড প্রদর্শন করে

উদাহরণ ২ঃ jQuery hide()

আরেকটি সহজ jQuery hide() মেথড প্রদর্শন করে। কিভাবে টেক্সট এর কিছু অংশ লুকায়।

 

jQuery hide() এবং show() ট্যাগের ব্যবহার

jQuery তে hide() and show() মেথড ব্যবহার করে এইচটিএমএল এলিমেন্ট লুকাতে এবং প্রদর্শন করতে পারি:

$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});

ফলাফল : Hide এবং Show

Syntax

এটাতে কিন্তু আমরা কিছু Syntax যোগ করে স্পিড বাড়াতে কমাতে পারি । তাহলে দেখুন Syntax গুলো কেমন ।

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

এই অপশনাল প্যারামিটার গুলো নির্দেশ করে দেখাতে এবং বন্ধ করতে কেমন সময় নিবে। এর মান “slow”, “fast”, বা milliseconds হতে পারে।

উদাহরণ:

$("button").click(function(){
    $("p").hide(1000);
});

ফলাফল : স্পিড নিয়ন্ত্রণ

 

jQuery toggle() মেথড এর ব্যবহার

jQuery toggle() মেথডটি আপনি hide() এবং show() মেথডের মাঝে ব্যবহার করতে পারেন। তাহলে বন্ধ তথ্যগুলো দেখাবে, আর দেখানোগুলো বন্ধ করবে ।

$("button").click(function(){
    $("p").toggle();
});

ফলাফল : Toggle

Syntax

এখানেও আমরা একটা স্পিড Syntax যোগ করে এর স্পীড নিয়ন্ত্রণ করতে পারি ।

$(selector).toggle(speed,callback);

এই স্পীড প্যারামিটার এটিকে দ্রুত, আস্তে এবং মিলিসেকেন্ডে পরিবর্তন করতে পারে ।

 

কোথাও না বুঝতে পারলে কমেন্ট করুন।