জে’কুয়েরি মোবাইল (jQuery Mobile) এর সাথে পরিচয়
—————————————
যদিও জে’কুয়েরি মোবাইল প্রায় সকল মোবাইল ডিভাইসে কাজ করে তারপরেও ডেস্কটপ কম্পিউটারে কিছু সমস্যা হতে পারে (সীমিত CSS3 সাপোর্ট এর কারণে)।
ভালো ফলাফল পেতে এই টিউটরিয়ালের জন্য আমরা গুগল ক্রোম ব্রাউজার ব্যবহারের পরামর্শ দিচ্ছি।
নিচের উদাহরণে আমরা একটি আদর্শ jQuery Mobile পেজ তৈরী করেছি-
উদাহরণ:
<body>
<div data-role=”page”>
<div data-role=”header”>
<h1>আমার হোমপেজে স্বাগতম</h1>
</div>
<div data-role=”main” class=”ui-content”>
<p>আমি একজন শিক্ষানবিশ মোবাইল ডেভেলপার!</p>
</div>
<div data-role=”footer”>
<h1>এখানে বসবে footer টেক্সট</h1>
</div>
</div>
</body>
নিচে উদাহরণটির ব্যাখ্যা দেয়া হলো:
• The data-role=”page” হলো যে পেজটি ব্রাউজারে দেখানো হবে।
• The data-role=”header” পেজের উপরে একটি টুলবার তৈরী করে (যেটি সাধারণত টাইটেল কিংবা সার্চ বাটন তৈরীর কাজে ব্যবহার করা হয়)।
• The data-role=”main” পেজে কি content আছে তা তুলে ধরে যেমন লেখা, ছবি, বাটন, ফরম ইত্যাদি।
• The “ui-content” class অতিরিক্ত প্যাডিং এবং মারজিন পেজের content এর ভেতর যোগ করে। adds
• The data-role=”footer” পেজের শেষে একটি টুলবার তৈরী করে।
• এই কন্টেইনারগুলোর ভেতর আমরা যেকোন HTML element যেমন প্যারাগ্রাফ, ছবি, হেডিং, লিস্ট ইত্যাদি যোগ করতে পারি।
পরামর্শ: জে’ কুয়েরি মোবাইলে কাজ করার সময় টাচ ফ্রেন্ডলি পরিবেশ এবং আকর্ষনীয় দৃশ্য তৈরী করার জন্য HTML5 data attribute ব্যবহার করা হয়।
জে’ কুয়েরি মোবাইলে পেজ যোগ করা:
যে’কুয়েরি মোবাইলে আপনি একটিমাত্র HTML ফাইলে একাধিক পেজ তৈরী করতে পারবেন। প্রতিটি পেজ একটি ইউনিক আইডি দ্বারা পৃথক করতে হবে এবং href attribute ব্যবহার করে তাদের মধ্যে সংযোগ স্থাপন করতে হবে:
উদাহরণ:
<div data-role=”page” id=”pageone”>
<div data-role=”main” class=”ui-content”>
<a href=”#pagetwo”>দ্বিতীয় পেজে যান</a>
</div>
</div>
<div data-role=”page” id=”pagetwo”>
<div data-role=”main” class=”ui-content”>
<a href=”#pageone”>প্রথম পেজে যান</a>
</div>
</div>
পরামর্শ: যত বেশি লিংক, ছবি, স্ক্রিপ্ট ইত্যাদি থাকবে পেজ লোড টাইম কিন্তু তত বাধাগ্রস্ত হবে। এক্ষেত্রে বাহ্যিক লিংক ব্যবহার করা ভালো।
<a href=”externalfile.html”>External পেজে যান</a>
________________________________________
পেজকে Dialog হিসেবে ব্যববার করা:
dialog box হচ্ছে এক ধরনের উইন্ডো যা তথ্য কিংবা ইনপুট গ্রহণের জন্য ব্যবহার করা হয়।
Example
<div data-role=”page” id=”pageone”>
<div data-role=”main” class=”ui-content”>
<a href=”#pagetwo”>দ্বিতীয় পেজে যান</a>
</div>
</div>
<div data-role=”page” data-dialog=”true” id=”pagetwo”>
<div data-role=”main” class=”ui-content”>
<a href=”#pageone”>প্রথম পেজে যান</a>
</div>
</div>
Translated By: Protap Chandra