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

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

জেকোয়েরি মোবাইল দিয়ে বাটন তৈরিঃ

জেকোয়েরি দিয়ে তিনভাবে বাটন তৈরি করা যায় ।
১। <input> element ব্যবহার করে ।
২। <button> element এর সাথে class="ui-btn" ক্লাস ব্যবহার করে ।
৩। <a> element এর সাথে class="ui-btn" ক্লাস ব্যবহার করে ।

ইনপুট এলিমেন্টের ব্যবহারঃ
<input type="button" value="Button">

<button> element এর ব্যবহারঃ
<button class="ui-btn">Button</button>

<a> element এর ব্যবহারঃ
<a href="#anylink" class="ui-btn">Button</a>

জেকোয়েরি মোবাইলে বাটন গুলো অটোমেটিক্যালি ডিজাইন করা থাকে । কম্পিউটার এবং মোবাইলে দেখানোর জন্য এগুলোকে ডিজাইন করে নিতে হয় । <a> element এর সাথে class="ui-btn" ক্লাস ব্যবহার করে পেজের সাথে লিংক করা হয় । আর <input> অথবা <button> elements ফর্ম সাবমিশনে ব্যবহার করা হয় ।

নেভিগেশন বাটনসঃ
পেজের সাথে বাটনের লিংক করার জন্য <a> element এর সাথে class="ui-btn" ব্যবহার করা হয় ।

<a href="#pagetwo" class="ui-btn">Go to Page Two</a>

গুরুপ বাটনসঃ
জেকোয়েরি মোবাইল গুরুপ বাটন গুলোকে একসাথে করার জন্য একটি সহজ পদ্ধতি প্রদান করেছে ।
data-role="controlgroup" কে data-type="horizontal|vertical" এর সাথে যোগ করে দেখানো যায় যে গুরুপ বাটন টা আড়াআড়িভাবে নাকি লম্বালম্বিভাবে দেখাবে ।
নিচের উদাহরণ টা দেখিঃ
<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-rel="back" এট্রিবিঊট ব্যবহার করে খুব সহজেই ব্যাক বাটন তৈরি করা যায় ।
<a href="#" class="ui-btn" data-rel="back">Go Back</a>

এতে কিন্তু anchor's href value কে গুরুত্ব দেয়া হয় না ।

ইনলাইন বাটনসঃ
ডিফল্টভাবে বাটন গুলো স্ক্রিনের পুরো জায়গা জুড়ে থাকে । আপনি "ui-btn-inline" ক্লাস ব্যবহার করে বাঁটনকে নির্দিস্ট মাপে দেখাতে পারবেন । আপনি ইচ্ছা করেলে দুই বা ততোধিক বাঁটনকে এভাবে দেখাতে পারেন ।
<a href="#pagetwo" class="ui-btn ui-btn-inline">Go to Page Two</a>

বাটনের সাথে লিংক করার জন্য আরো সিএসএস ক্লাসঃ

ক্লাসের নামঃ ui-btn-b
বর্ণনাঃ ডিফল্টভাবে ধূসর ব্যাকগ্রাউন্ডের সাথে কালো লেখাকে পরিবর্তন করে কালো ব্যাকগ্রাউন্ডের সাথে সাদা লেখায় পরিণত করে ।

ক্লাসের নামঃ ui-corner-all
বর্ণনাঃ বাটনের চারিদিকে গোলাকার কোণা তৈরি করে ।

ক্লাসের নামঃ ui-mini
বর্ণনাঃ বাঁটনকে ছোট করে ফেলে ।

ক্লাসের নামঃ ui-shadow
বর্ণনাঃ বাটনে ছায়া যোগ করে ।

আপনি যদি একের অধিক ক্লাস ব্যবহার করতে চান তাহলে স্পেস ব্যবহার করে সেটা করতে পারবেন ।
class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

এভাবে স্পেস দিয়ে দুটির বেশি ক্লাস ব্যবহার করতে পারেন ।

ডিফল্টভাবে <input> বাটনে ছায়া এবং গোলাকার কর্ণার থাকে । কিন্তু <a> এবং <button> element এ থাকে নাহ ।

তাহলে এভাবেই চর্চা করতে থাকুন । আস্তে আস্তে সব শিখে ফেলবো একসাথে । 😀