জেকোয়েরি মোবাইল এর সংক্ষিপ্ত বর্ণনা ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।
জেকোয়েরি মোবাইল হলো জেকোয়েরি এর একটা অংশ যেটা মোবাইল প্লাটফর্মের ওয়েবসাইট এবং ওয়েব অ্যাপ্লিকেশান তৈরিতে ব্যবহার করা হয় । জেকোয়েরি মোবাইল দিয়ে তৈরি করা সকল ওয়েবসাইট এবং ওয়েব-অ্যাপ্লিকেশান প্রায় সকল ধরণের স্মার্টফোন এবং ট্যাবলেটে কাজ করে । এসব স্মার্টফোন এবং ট্যাবলেটের ভিতর আইওস, অ্যান্ডয়েড, ব্ল্যাকবেরি, উইন্ডোজ ফোন, পাম ওয়েবওস এবং সিম্বিয়ান উল্লেখযোগ্য । জেকোয়েরি মোবাইলে লেখা সাইট সকল মোবাইলে একই রকম দেখাবে । কিন্তু সেটা ডেস্কটপ কম্পিউটারের সাথে সামঞ্জস্য হবে না ।কারণ ডেস্কটপ কম্পিউটারে কিছু সংখ্যক CSS3 সাপোর্ট করে । তাই ডেস্কটপ কম্পিউটার থেকে এসব সাইট ভিজিট করতে একটু সমস্যা হবে ।
তাই আপনাকে জেকোয়েরি মোবাইলকে শুধুমাত্র মোবাইল ভিত্তিক ওয়েব-অ্যাপ্লিকেশান তৈরিতে বিবেচনায় রাখতে হবে । এটা হলো জেকোয়েরি এর একটা এক্সটেনশান যেটা এইচটিএমএল৫ এবং সিএসএস৩ ব্যবহার করে পেজের লেয়াউট তৈরি করে । এইচটিএমএল৫ এবং সিএসএস৩ জেকোয়েরিতে যৎসামান্য স্ক্রিপ্ট ব্যবহার করে । জাভাস্ক্রিপ্ট এবং অ্যাজাক্স সকল ছবিতে ব্যবহার করা হয় । এবং এটা সকল ধরণের টাচ সাপোর্ট করে, যার কারণে টাচ ফোনগুলোতে এর পরিব্যাপ্তি এত বেশি ।
জেকোয়েরি আপনার সাইট বা অ্যাপ্লিকেশনে ব্যবহারের জন্য যা প্রথম ধাপে করতে হবেঃ
আপনার সকল পেজে জেকোয়েরি লাইব্রেরি বা ফ্রেমওয়ার্ক অন্তর্ভুক্ত করতে হবে যাতে জেকোয়েরি কাজ করতে পারে । অবশ্যই এটা আপনি রেফারেন্স হিসেবে হেডারে রাখতে পারবেন এবং এই হেডার ফাইল সকল পেজে রাখতে পারেন । আপনি নিম্নোক্ত দুইভাবে জেকোয়েরি মোবাইল যোগ করতে পারেন ।
১। জেকোয়েরি মোবাইল একটি ফোল্ডারে ডাউনলোড করে রাখতে পারেন । পরে সকল পেজকে ঐ ফোল্ডারের সাথে লিঙ্ক করতে পারেন ।
২। কোথাও হোস্ট করা(CDN) জেকোয়েরি লাইব্রেরি এর সাথে আপনি লিঙ্ক করে দিতে পারেন । উদাহরণ হিসেবে বলা যায় জেকোয়েরি মোবাইল লাইব্রেরি মাইক্রোসফট এবং গুগলে হোস্ট করা আছে ।
আপনার ডাউনলোড করা জেকোয়েরি এর সাথে লিঙ্কিং এর কোডের উদাহরণঃ
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”jquery.mobile-1.4.5.css”>
<script src=”path_to_the_library_folder/jquery.js”></script>
<script src=”path_to_the_library_folder/jquery.mobile-1.4.5.js”></script>
</head>
হোস্টেড(CDN) এর সাথে জেকোয়েরি এর সাথে লিঙ্কিং এর কোডের উদাহরণঃ
<head>
<meta name=“viewport” content=“width=device-width, initial-scale=1″>
<link rel=“stylesheet” href=“http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=“http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=“http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
</head>
হোস্টেড(CDN) এর সাথে জেকোয়েরি এর সাথে লিঙ্কিং করলে সুবিধা হলো আপনার সাইটের মোবাইল ইউজারদের পেজগুলো অনেক দ্রুত লোড নেয় । এর কারণ হলো জেকোয়েরি মোবাইলে তৈরি করা অনেক সাইটে ইউজাররা ভিজিট করার পর যখন আপনার সাইটে ভিজিট করতে আসে তখন জেকোয়েরি তাদের ব্রাউজার ক্যাশ থেকে লোড নেয় । আপনি জেকোয়েরি এর কোন ভার্সনের সাথে লিংক করেছেন তার উপর নির্ভর করে কিছু কিছু অবস্থার সৃষ্টি হয় । মনে করুন আপনার লেটেস্ট ভার্সন(জেকোয়েরি তে ভার্সন উল্লেখ করে না । শুধু বলে নতুন অথবা পুরাতন ভার্সন) জেকোয়েরি লিংক করেছেন । তাহলে এর লাইব্রেরিতে অনেক বড় সমস্যা দেখা দিবে । আপনার সাইট অথবা অ্যাপ্লিকেশন পুরাপুরি অথবা এর কিছু অংশ কাজ করবে না । কিন্তু এই আপডেটের জন্য যে সবসময় একই সমস্যা দেখা দিবে তা কিন্তু নয় । এটা জাস্ট একটা মাধ্যম(দ্রুত অথবা আস্তে, অভিজ্ঞ অথবা অনভিজ্ঞ, নিরাপদ অথবা অনিরাপদ মাধ্যম)যার মাধ্যমে আপনি বুঝতে পারবেন আপনার লেটেস্ট ভার্সনে আপগ্রেড করা কিনা সেটা । তাছাড়া আপনি ম্যানুয়ালি আপডেট করে রাখতে পারেন । অনেক সময় ব্রাউজার পরিবর্তন করার জন্য এটি লাইব্রেরি আপডেট করে অধিক ব্রাউজার সহায়ক করে তোলে । সিকিউরিটি সমস্যার কারণে জেকোয়েরি মোবাইলের আপগ্রেড করা হয় । তাই লেটেস্ট ভার্সনের জন্য আপনার সফটওয়্যার আপডেট করাই ভালো মাধ্যম ।
নোটঃ এর front-end security ভাঙ্গা সহজ তাই হ্যাকারদের এটা ভাংতে খুব কম কষ্ট করাই লাগে । তাই আপনাকে জানতে হবে কিভাবে জেকোয়েরি মোবাইলকে নিরাপদ এবং বিজ্ঞভাবে ব্যবহার করতে হবে । তাই এই পোস্টটি দেখতে পারেনঃ http://resources.infosecinstitute.com/safely-and-wisely-use-jquery/
জেকোয়েরি মোবাইল হলো একটা ফ্রেমওয়ার্ক এবং জাভাস্ক্রিপ্ট এর প্রধান ফাইলস । মোবাইল ফ্রেন্ডলি করার জন্য জেকোয়েরি মোবাইল সিএসএস ক্লাসে সিএসএস ফাইলগুলো দ্বারা সকল লেয়াউট এবং ইউজার কনট্রোল বাটন এবং ফর্ম তৈরি করা হয় । এজন্য আপনাকে সকল সিএসএস ক্লাস সম্পর্কে এবং তাদের কাজ সম্পর্কে মনে রাখতে হবে। অবশ্য এজন্য আপনি গুগল সার্চ করে তাদেরকে খুব সহজে খুঁজে বের করতে পারেন । আপনি সেখান থেকে সিএসএস ক্লাসগুলোর উদাহরণ দেখতে পারেন এবং গুরুত্বপূর্ণ গুলো মনে করে রাখতে পারেন । তখন তাদের সবগুলোকে মুখস্থ না করেই সিএসএস ক্লাস দেখেই অনুমান করে ফেলতে পারবেন । যদি আপনি মুখস্থ করে থাকেন তাহলে এর উদাহরণ গুলো দেখলে আপনার অনেক দিনের জন্য মনে রাখতে সাহায্য করবে; আপনি যদি তাদের ব্যবহার না করে থাকেন তাহলে এটা আপনার মেমোরিকে সহজেই রিফ্রেশ করবে আরো তাড়াতাড়ি । চিট শিট বা রেফারেন্স শিট এর ব্যবহারও আপনাকে অনেক সাহায্য করবে ।
একটি পেজ অথবা সেকশনের বর্ণনার জন্য জেকোয়েরি মোবাইল এবং ডাটা রোলের ব্যবহার (jQuery Mobile and data-role attribute to define a page or section)ঃ
ডাটা রোল খুব গুরুত্বপূর্ণ একটি এট্রিবিউট । এটা আপনি এইচটিএমএল উপাদানের সাথে ব্যবহার করে তাদের উদ্দেশ্য বর্ণনা করতে পারেন । এতে তারা সেকশন, পেজ, কনট্রোল, কনট্রোল গুরুপ অথবা যে কনট্রোলই হলেও সমস্যা নেই তাতে ।
<div data-role=”page”> ঃ এটা একটি পেজকে নির্দেশ করে । আপন এমন একটি ফাইলের ভিতর অনেক পেজকে একসাথে রাখতে পারেন । উদাহরণ হিসেবে আপনি নিম্নোক্তভাবে দুটি পেজকে একটি ফাইলের ভিতর রাখতে পারেন ।
<div data-role=”page” id=”pageone”></div> and <div data-role=”page” id=”pagetwo”></div>
<div data-role=”header”> : এটি একটি হেডার পেজকে নির্দেশ করে ।
<div data-role=”footer”> : এটি একটি ফুটার পেজকে নির্দেশ করে ।
<div data-role=”main” class=”ui-content”> : এটি একটি পেজের প্রধান উপাদান এলাকা নির্দেশ করে ।
“ui-content”: এটি না দিলেও চলবে । কিন্তু এটা পেজের উপাদানের সাথে অতিরিক্ত প্যাডিং এবং মার্জিন যোগ করে ।
কিছু ডাটা রোল ভেলু যা মনে না রাখলেই নয় ।
data-role=”button”.
data-role=”controlgroup”
data-role=”none”
data-role=”collapsible”
data-role=”collapsibleset”
data-role=”content”
data-role=”listview”.
data-role=”list-divider”
data-role=”navbar”
data-role=”popup”
জেকোয়েরি মোবাইলে ট্রানজিশন ইফেক্ট (Transition Effect in jQuery Mobile):
<a href=”#anylink” data-transition=”slide”>Slide to Page Two</a>
ডাটা ট্রানজিশন এট্রিবিউটে আপনি এক পেজ থেকে আরেক পেজে যাওয়ার সময় ট্রানজিশন ইফেক্ট যোগ করতে পারেন ।
ডাটা ট্রানজিশনের কিছু ভেলু নিম্নরুপঃ
fade, flip, flow, pop, slide, slidefade, slideup, slidedown, turn, none
কি জেকয়েরি ট্রানজিশনের মতই একরকম তাই নাহ? সাদৃশ্যতা, উপমা, উদাহরণ এবং পার্থক্য আপনাকে খুব সহজে এগুলো বেশিদিন মনে রাখতে সাহায্য করবে ।
জেকোয়েরি মোবাইল বাটনস(jQuery Mobile buttons):
আপনি যদি জেকোয়েরি এবং এইচটিএমএল ব্যবহার করে থাকেন তাহলে নিচের কোডগুলো দেখলেই তাদের কাজ বুঝতে পারবেন । [এটাই হলো উপমা]
লিংককে বাটন হিসেবে ব্যবহার করা ঃ <a href=”index.html” data-role=”button”>Link button</a>
মনে করে দেখুন আমি আগে আপনাকে বলেছিলাম কিন্তু data-role=”button”
<input type=”button” value=”Button”>
<button class=”ui-btn”>Button</button>
এইচটিএমএল ৫ তাই নাহ ?
<a href=”#anylink” class=”ui-btn”>Button</a> : class=”ui-btn” কে মোবাইল ফ্রেন্ডলি স্টাইল তৈরির জন্য ।
বাটন সমূহের গ্রুপ (A group of Buttons):
<div data-role=”controlgroup” data-type=”horizontal”>
<a href=”#” class=”ui-btn”>Button 1</a>
<a href=”#” class=”ui-btn”>Button 2</a>
<a href=”#” class=”ui-btn”>Button 3</a>
</div>
এখানে data-type=”horizontal” এবং data-type=”vertical” দেখায় যে তারা কিভাবে অনুষ্ঠিত হবে ।
কিছু নোটঃ
<a href=”#” class=”ui-btn” data-rel=”back”>Go Back</a> : data-rel=”back”বাটনটি ব্যাক বাটন হিসেবে কাজ করে । জেকোয়েরি মোবাইল এই ফাংশনের কাজ করে থাকে ।
inline buttons: <a href=”#pagetwo” class=”ui-btn ui-btn-inline”>Go to Page Two</a>: এখানে শুধুমাত্র ক্লাসগুলো ইনলাইন বাটনগুলো তৈরি করবে ।
কিছু বাটন সম্পর্কিত সিএসএস ক্লাসঃ
ui-btn-b ( ui-btn কে কালো ব্যাকগ্রাউন্ডের সাথে একটু পরিবর্তন আনা),
ui-corner-all,
ui-mini (ছোট বাটন),
ui-shadow (বাটনের ছায়া তৈরি করে)
বাটনের সাথে আইকন যোগঃ
সিএসএস ক্লাসের মাধ্যমে আপনি বাটনের সাথে আকন যোগ করতে পারবেন । অন্যান্য সিএসএস এর মাধ্যমে আপনি বাটনের পজিশন ঠিক করতে পারবেন যে এটা বামে বসবে নাকি ডানে বসবে । বাটন বাদে শুধু আইকন দেখাতে আপনি ui-btn-icon-notext সিএসএস ক্লাস ব্যবহার করতে পারেন ।
উদাহরণঃ
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left”>Search</a> : বাটনের বামে একটা সার্চ আইকনসহ সার্চ বাটন ।
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left ui-btn-icon-notext”>Search</a> : শুধুমাত্র সার্চ আইকন ।
ui-nodisc-icon ক্লাস আইকনের চারিদিকের গোলাকার বৃত্ত দূর করবে ।
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon”>Without circle</a>
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon ui-btn-icon-notext”>Without circle</a>: কোনো বৃত্ত বা সার্কেল থাকবে না ।
ui-alt-icon : এটা ডিফল্টভাবে সাদা থাকে । এটা ব্যবহারে কালো হয়ে যাবে ।
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon”>Black</a>
কিছু আইকনের ক্লাসঃ
ui-icon-arrow-r (right-arrow), ui-icon-arrow-l (left arrow), ui-icon-delete, ui-icon-info (I),
ui-icon-audio, ui-icon-back, ui-icon-search, ui-icon-lock, ui-icon-grid, ui-icon-alert, ui-icon-home
আইকনের পজিশনের ক্লাস স্মূহঃ
ui-btn-icon-top, ui-btn-icon-right, ui-btn-icon-bottom, ui-btn-icon-left
জেকোয়েরি মোবাইলে পপ-আপ বাটন তৈরিঃ
data-role: using data-rel=”popup” এট্রিবিঊটের মাধ্যমে আপনি পপ-আপ মেনু তৈরি করতে পারবেন । data-dismissible=”false” এট্রিবিউটের মাধ্যমে আপনি এমন পপ-আপ তৈরি করতে পারবেন যা দেখানোর সময় বন্ধ করা যাবে না । data-rel=”popup” এর মাধ্যমে আপনি এর সাথে কোনো লিংক যোগ করতে পারবেন ।
<div data-role=”popup” id=”myPopup”>POPUP Window</div>
ইনলাইনে বাটনে পপ-আপ দেখানোর কোডঃ <a href=”#myPopup” data-rel=”popup” class=”ui-btn ui-btn-inline ui-corner-all”>Show Popup</a>
নিচের এট্রিবিউটের মাধ্যমে আপনি পপ-আপ ডিসপ্লে এর পজিশন ঠিক করতে পারবেন ।
<a href=”#myPopup” data-rel=”popup” class=”ui-btn ui-btn-inline ui-corner-all”>Show Popup</a>
আপনি পপ-আপের সাথে নিচের মেনুগুলো যোগ করে দিতে পারেন ।
<div data-role=”header”> : এটা হেডার নির্দেশ করে ।
<div data-role=”footer”> : এটা ফুটার নির্দেশ করে ।
<div data-role=”main” class=”ui-content”>
পপ-আপ ক্লোজ বাটন তৈরিঃ
ui-btn-left এবং ui-btn-right সিএসএস ক্লাস এর সাথে data-rel=”back” এট্রিবিউট যোগ করে পপ-আপ ক্লোজ বাটন তৈরি করা হয় ।
<div data-role=”popup” id=”myPopup” class=”ui-content”>
<a href=”#” data-rel=”back” class=”ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right”>Close</a></div>
জেকোয়েরি মোবাইল টুলবারসঃ
হেডারের সাথে বাটন অথবা টেক্সট যোগ করে হেডার(data-role=”header”) অথবা ফুটারে(data-role=”footer”) জেকোয়েরি মোবাইল টুলবার তৈরি করতে পারবেন । বেশি বাটন যোগ করার জন্য হেডার এর চেয়ে ফুটার বেশি প্রাধান্য পায় ।
হেডার টুলবারঃ
<div data-role=”header”>
<a href=”#” class=”ui-btn ui-icon-home ui-btn-icon-left”>Home</a>
<h1>Welcome To My Homepage</h1>
<a href=”#” class=”ui-btn ui-icon-search ui-btn-icon-left”>Search</a>
</div>
ফুটার টুলবারঃ
<div data-role=”footer”>
<a href=”#” class=”ui-btn ui-icon-plus ui-btn-icon-left”>Add Me On Facebook</a>
<a href=”#” class=”ui-btn ui-icon-plus ui-btn-icon-left”>Add Me On Twitter</a>
<a href=”#” class=”ui-btn ui-icon-plus ui-btn-icon-left”>Add Me On Instagram</a>
</div>
টুলবারের পজিশন ঠিক করাঃ
data-position=”inline”
data-position=”fixed”
data-fullscreen=”true
জেকোয়েরি মোবাইল নেভিগেশন বারঃ
data-role=”navbar” এর ব্যবহার
<div data-role=”header”>
<div data-role=”navbar”>
<ul>
<li><a href=”#anylink”>Home</a></li>
<li><a href=”#anylink”>Page Two</a></li>
<li><a href=”#anylink”>Search</a></li>
</ul>
</div>
</div>
data-icon=”home”, data-icon=”arrow-r”, data-icon=”search” এর মাধ্যমে আপনি আইকন যোগ করতে পারেন ।
আইকন পজিশনের জন্য data-iconpos=”top”, data-iconpos=”right”, data-iconpos=”bottom”, data-iconpos=”left” ব্যবহার করতে পারেন ।
জেকোয়েরি মোবাইল প্যানেলসঃ
divs এ data-role=”panel” এর ব্যবহার
<div data-role=”panel” id=”myPanel”>
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>
প্যানেলে ওপেন ইভেন্ট তৈরির উদাহরণঃ <a href=”#myPanel” class=”ui-btn ui-btn-inline”>Open Panel</a>
ক্লোজিং প্যানেলের জন্য রিলেটেড এট্রিবিউটঃ data-dismissible, data-swipe-close
প্যানেল দেখানোর জন্য অপশনঃ data-display=”overlay”, data-display=”reveal”, data-display=”push”
প্যানেলের পজিশনঃ data-position=”right”, data-position-fixed=”true”
জেকোয়েরি মোবাইল কলাপসিবলসঃ
data-role=”collapsible” ব্যবহার করে ওপেন/ক্লোজের জন্য কলাপসিবল সেকশান তৈরি করা হয় । এটা আপনি একটার সাথে আরেকটা যোফ করতে পারেন ।
<div data-role=”collapsible”>
<h1>Click me – I’m collapsible!</h1>
<p>I’m the expanded content.</p>
</div>
কলাপসিবল গুলো কখনো data-collapsed=”true” or data-collapsed=”false” এমন হবে না ।
জেকোয়েরি মোবাইল এর মাধ্যমে রেসপন্সিবল টেবিল তৈরিঃ
<table> এলিমেন্টে data-role=”table” এবং “ui-responsive" ক্লাস যোগ করে এটা করা হয় । রেসপন্সিবল টেবিল আমাদেরকে পিসি এবং মোবাইলে অনেক বড় টেবিলকে আকর্ষণীয়ভাবে দেখাতে সাহায্য করে । দুই ধরণের রেসপন্সিভ টেবিল তৈরি করা সম্ভব । reflow (default), এবং column toggle.
<table data-role=”table” class=”ui-responsive”> : reflow
<table data-role=”table” data-mode=”columntoggle” class=”ui-responsive” id=”myTable”>: column toggle
তারপর thead, tbody, th, tr, td স্ট্রাকচার ব্যবহার করা হয় ।
reflowঃ
এটা ডাটাকে সারি আকারে দেখায় । যদি এর জায়গাতে সবগুলো না ধরে তখন এটি লম্বালম্বিভাবে দেখায় ।
id:123
name: xyz
address:canada
column toggleঃ
এটা ডাটাকে সব সময় সারি আকারে দেখায় । যদি এটার জায়গাতে সবগুলো না ধরে তাহলে এতে reflow এর মত নিচে চলে যায় না । যখন একটা দেখতে দেখতে যাওয়া হয় তখন আরেকপাশ থেকে ঢেকে যেতে থাকে ।
জেকোয়েরি মোবাইল লেয়াউট গ্রিডসঃ
কিছু আদর্শ মানের সিএসএস ক্লাস ব্যবহার করে আপনি পেজের একটি আদর্শ লেয়াউট তৈরি করতে পারবেন যাকে গ্রিড লেয়াউট বলা হয় ।
<div class=”ui-grid-solo”> : এক কলামের লেয়াউট ।
ui-grid-a : two column, 50% / 50% layout – অনুভুমিক ভাবে ।
ui-grid-b : 3 column, 33% / 33% / 33% layout
ui-grid-c: 4 columns, 25% / 25% / 25% / 25% layout
ui-grid-d : 5 columns, 20% / 20% / 20% / 20% / 20% layout
আপনি সিএসএস ক্লাসের পরিবর্তন করে লেয়াউট কে নিজের মত সাজাতে পারবেন । আপনি নিচের মত করে একে সাজাতে পারেন ।
.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
}
আলাদা বা একসাথে অনেকগুলো গ্রিড বা লেয়াউট একই পেজে ব্যবহারের কোডঃ
<div class=”ui-grid-b”>
<div class=”ui-block-a”><span>Some Text</span></div>
<div class=”ui-block-b”><span>Some Text</span></div>
<div class=”ui-block-c”><span>Some Text</span></div>
</div>
তাহলে এর মাধ্যমে জেকোয়েরি মোবাইল এর একটা ধারণা পেলেন আর কি । বিস্তারিত নিয়ে হাজির হবো পরবর্তী পোস্টে । ততদিন সাথেই থাকুন । আর না বুঝতে পারলে কমেন্ট করতে কিন্তু ভুলবেন না ।
