জেকোয়েরি দিয়ে মোবাইল বাটন বানানো
লেখকঃ মোস্তাফিজুর ফিরোজ ।
আমরা প্রত্যেক সাইটে ঢুকলে অনেক ধরণের বাটন দেখি । এগুলো আমাদের সাইটটিকে খুব সহজে ভিজিট করতে আর এক পেজ থেকে হোম পেজ অথবা অন্য কোন পেজে নেভিগেশনে সাহায্য করে । আসুন আজ খুব সহজে জেকোয়েরি দিয়ে বাটন বানানো শিখবো ।
জেকোয়েরি মোবাইল বাটনগুলো সাধারণত হেড এবং ফুটারে বসানো হয়ে থাকে । কারণ এই দুইটি স্থান থেকেই সবাই পেজ নেভিগেশন করতে চায় ।
হেডার বারের কোড সমূহ
হেডার বার বলতে একটা সাইটের পেজের উপরিভাগকে বুঝায় । হেডার সাধারণত একটি পেজের নাম অথবা লোগো অথবা হোম, অপশন অথবা খোঁজার জন্য এক অথবা দুইটি বাটন থাকে ।
আপনি খুব সহজেই হেডারের বাম অথবা ডান সাইডে বাটন যোগ করতে পারেন জেকোয়েরি ব্যবহার করে ।
<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="header">
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div>
এই কোড ব্যবহার করে আপনি হেডারের টাইটেলের বাম সাইডে একটা বাটন যুক্ত করতে পারবেন ।
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home 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>
এই কোডটি ফুটারে বসিয়ে আপনি খুব সহজে ফেসবুক, টুইটার, ইন্সটাগ্রামের বাটন যোগ করতে পারবেন ।
কিন্তু ফুটারের বাটনগুলো সাধারণত মাঝখানে বসে না । তাই এই জন্য আপনাকে নিচের সিএসএস কোড দিয়ে পরিবর্তন করে নিতে হবে ।
<div data-role="footer" style="text-align:center;">
তাছাড়া আপনি গুরুপ বাটন গুলো ফুটারে নিচের কোড দিয়ে সমান্তরালে অথবা আনুভূমিকভাবে ব্যবহার করতে পারবেন ।
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal">
<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>
</div>
হেডার এবং ফুটারের পজিশন ঠিক করা
হেডার এবং ফুটারের পজিশন তিনভাবে ঠিক করা যায় ।
১। ইনলাইনঃ এটা ডিফল্টভাবে যেটা দেয়া থাকে । মানে হেডার এবং ফুটার পেজের উপাদানের সাথে একই লাইনে থাকে ।
২। ফিক্সডঃ হেডার এবং ফুটার যথাক্রমে পেজের উপরে এবং নিচে থাকে ।
৩। ফুল স্ক্রীনঃ এটা ফিক্সড পজিশনের মত । কিন্তু এতে হেডার এবং ফুটার পেজের উপাদান সমূহের উপরে থাকে ।
আসুন তাহলে এবার কোড গুলো দেখে নেই ।
১। ইনলাইন পজিশনের কোডঃ
<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>
২। ফিক্সড পজিশনের কোডঃ
<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>
৩। ফুল স্ক্রীন পজিশনের কোডঃ
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
এতে উপরের মত data-position="fixed" রাখতে হবে ।
ফুল স্ক্রীন পজিশন ছবি, ভিডিও সাইটের জন্য খুব উপযোগী ।
আর এরই ভিতর কিন্তু আমরা খুব সহজে জেকোয়েরি দিয়ে মোবাইল বাটন বানানো শিখে গেলাম । খুব সহজ তাই না । হুম, আমার কাছেও এটা খুব সহজ লাগে । তবুও কোথাও না বুঝলে কমেন্ত করতে ভুলবেন না কিন্তু ।
