Mar 31

জেকোয়েরি এর বিভিন্ন প্রক্রিয়া ।

জেকোয়েরি এর বিভিন্ন প্রক্রিয়া ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।

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

প্রক্রিয়ার নামঃ data()
প্রক্রিয়ার বর্ণনাঃ বিভিন্ন উপাদানের সাথে ডাটা যোগ করতে অথবা এসব উপাদান থেকে ডাটা সংগ্রহ করতে ব্যবহার করা হয় ।

প্রক্রিয়ার নামঃ each()
প্রক্রিয়ার বর্ণনাঃ সকল সদৃশ উপাদান থেকে ফাংশন তৈরি করে ।

প্রক্রিয়ার নামঃ get()
প্রক্রিয়ার বর্ণনাঃ সিলেক্টর দ্বারা DOM elements কে সদৃশ করতে ব্যবহৃত হয় ।

প্রক্রিয়ার নামঃ index()
প্রক্রিয়ার বর্ণনাঃ কোনো তথ্য দেয়া থাকলে তার অনুরুপ উপাত্ত গুলো খুঁজে বের করে থাকে ।

প্রক্রিয়ার নামঃ $.noConflict()
প্রক্রিয়ার বর্ণনাঃ $ ভেরিয়েবলস এর ক্ষেত্রে জেকোয়েরি এর নিয়ন্ত্রণ করে ।

প্রক্রিয়ার নামঃ $.param()
প্রক্রিয়ার বর্ণনাঃ কোনো শ্রেণীবিন্যাস অথবা কোনো উপাদান থাকলে তাদের একটা সিরিয়াল তৈরি করে প্রদর্শন করে ।

প্রক্রিয়ার নামঃ removeData()
প্রক্রিয়ার বর্ণনাঃ পূর্বের সংগ্রহকৃত ডাটা মুছে ফেলে ।

প্রক্রিয়ার নামঃ size()
প্রক্রিয়ার বর্ণনাঃ জেকোয়েরি সিলেক্টর দ্বারা DOM elements গুলোকে সদৃশ করে থাকে ।

প্রক্রিয়ার নামঃ toArray()
প্রক্রিয়ার বর্ণনাঃ জেকোয়েরি তে থাকা শ্রেণীবিন্যাসকৃত সকল DOM elements গুলো কে আলাদা করে ।

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

Mar 31

jQuery এবং অন্যান্যJavaScript অবকাঠামো

jQuery এবং অন্যান্যJavaScript অবকাঠামো

ইতিমধ্যে আপনি যেনেছেন , jQuery তে $ চিহ্ন ব্যবহার করা হয় শর্টকাট হিসাবে।
অন্যান্য অনেক জনপ্রিয় জাভাস্ক্রিপ্ট অবকাঠামো আছে যেমন Angular, Backbone, Ember, Knockout আরও অনেক।
তাছারা কিভাবে অন্যান্য জাভাস্ক্রিপ্ট অবকাঠামো $ চিহ্ন ব্যবহার করা হয় শর্টকাট হিসাবে।
দুটি আলাদা অবকাঠামো একই শর্টকাট ব্যবহার করে থাকে, তাদের মধ্যে একটি কাজ বন্ধ হতে পারে ।
ইতিমধ্যে JQuery এর টিম এই সম্পর্কে চিন্তা আছে, এবং noConflict() পদ্ধতি প্রয়োগ করা।

JQuery এর noConflict() পদ্ধতি
noConflict()পদ্ধতি, $ শর্টকাট পরিচিতি ধরে রিলিজ, তাই অন্য যে কোন স্ক্রিপ্টের ব্যবহার করতে পারেন।
আপনি অবশ্যই এখনও jQuery ব্যবহার করতে পারেন।
উদাহরন
$.noConflict();
jQuery(document).ready(function(){
jQuery(“button”).click(function(){
jQuery(“p”).text(“jQuery is still working!”);
});
});

আপনি খুব সহজেই আপনার নিজের শর্টকাট তৈরি করতে পারেন। noConflict() পদ্ধতিতে jQuery এর রেফারেন্স প্রদান করে, তাছারা একতি variable save করতে পারেন, পরে ব্যবহারের জন।

এখানে একটি উদাহরণ:

var jq = $.noConflict();
jq(document).ready(function(){
jq(“button”).click(function(){
jq(“p”).text(“jQuery is still working!”);
});
});

যদি আপনার ব্যবহার করা jQuery code ব্লক থাকে এবং পরিবর্তন করতে না চান, আপনি পারেন $ সাইন পারামিটার হিসাবে ব্যবহার করতে।
আপনি jQuery $ ব্যবহার করে অ্যাক্সেস করতে পারবেন, এই ফাংশন ভিতরে – এটা বাইরে ব্যবহার করতে যাবে “jQuery”:

উদাহরণ

$.noConflict();
jQuery(document).ready(function($){
$(“button”).click(function(){
$(“p”).text(“jQuery is still working!”);
});
});

নাম :: মাহবুবুর রহমান

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);
});