জেকোয়েরি মোবাইল ব্যবহার করে টেবিল সাজানো ।
লেখাঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
আজ আমরা জেকয়েরি মোবাইল ব্যবহার করে রেস্পন্সিভ টেবিল বানানো শিখবো যা সকল সাইজের স্ক্রীনে ভালভাবে সাপোর্ট করবে ।
রেস্পন্সিভ টেবিল(Responsive Tables):
আপনি যখন আপনার সাইটের সকল পেজের সব কন্টেন্টকে সকল প্রকার ডিভাইসে দেখাতে চান তখন রেস্পন্সিভ ডিজাইন খুব কার্যকরী হবে ।
শুধু একটা সাধারন ক্লাসের নাম জেকোয়েরি মোবাইলকে সকল সাইজের স্ক্রীনের ডিভাইসকে তার কনটেন্টগুলোকে সমানভাবে দেখাতে সাহায্য করবে ।
রেস্পন্সিভ টেবিল অনেক বড় সাইজের টেবুলার ডাটা গুলোকে মোবাইল এবং কম্পিউটার ডিভাইস উভয়তে অনেক আকর্ষণীয়ভাবে দেখাতে অনুমতি দেয় ।
দুই ধরণের রেস্পন্সিভ টেবিল আছে । reflow এবং column toggle.
১। Reflow Table:
এটা ডাটাকে যতদূর পারে সারি আকারে দেখায় । যদি এর জায়গাতে সবগুলো না ধরে তখন এটি লম্বালম্বিভাবে দেখায় ।
একটি টেবিল তৈরি করে <table> এলিমেন্টের সাথে data-role="table" এবং "ui-responsive" ক্লাস যোগ করা হয় ।
<table data-role="table" class="ui-responsive">
রেস্পন্সিভ টেবিলকে ভালভাবে কাজ করাতে হলে আপনাকে অবশ্যই এবং এলিমেন্ট যোগ করতে হবে । rowspan অথবা colspan এট্রিবিউট যোগ করা যাবে না । কারণ তারা রেস্পন্সিভ টেবিলে সাপোর্ট করে না ।
২। Column Toggle Table:
এটা ডাটাকে সব সময় সারি আকারে দেখায় । যদি এটার জায়গাতে সবগুলো না ধরে তাহলে এতে reflow এর মত নিচে চলে যায় না । যখন একটা দেখতে দেখতে যাওয়া হয় তখন আরেকপাশ থেকে ঢেকে যেতে থাকে ।
column toggle table তৈরি করতে হলে নিচের মত করে <table> এলিমেন্ট এর সাথে যোগ করতে হবে ।
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
ডিফল্টভাবে জেকোয়েরি মোবাইল ডান দিকের টেবিলগুলো ঢেকে রাখে । আপনি চাইলে কখন কোন কলাম(column) বা ফিল্ড(field) দেখা যাবে বা কোনটা কখন ঢেকে যাবে তা নির্দেশ করে দিতে পারেন । টেবিলের হেডারের সাথে data-priority এট্রিবিউট যোগ করতে হবে এবং ১ থেকে ৬ এর ভিতর একটা নাম্বার নির্দেশ করে দিতে হবে ।
<th>I will never be hidden</th>
<th data-priority="1">I am very important - I will probably not be hidden</th>
<th data-priority="3">I am less important - I could be hidden</th>
<th data-priority="5">I am not that important - there is a good chance that I will be hidden</th>
আপনি যদি কলাম নাম্বার উল্লেখ করে না দেন তাহলে ঐ কলামটি আর ঢাকবে না ।
নিচের কোডগুলোকে একসাথে রেখে আপনি একটা column toggle table তৈরি করতে পারেন । এই ফ্রেমওয়ার্ক টেবিলের আগে ডানপাশে একটা বাটন তৈরি করবে যার মাধ্যমে ব্যবহারকারীরা তাদের পছন্দমত টেবিল ঢেকে রাখতে পারবে ।
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
<thead>
<tr>
<th data-priority="6">CustomerID</th>
<th>CustomerName</th>
<th data-priority="1">ContactName</th>
<th data-priority="2">Address</th>
<th data-priority="3">City</th>
<th data-priority="4">PostalCode</th>
<th data-priority="5">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
Alfreds Futterkiste
<td>Maria Anders</td>
Obere Str. 57
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
</tbody>
</table>
toggle table বাটনের লেখাকে পরিবর্তন করতে হলে data-column-btn-text এট্রিবিউট যোগ করতে হবে ।
<table data-role="table" data-mode="columntoggle" class="ui-responsive" data-column-btn-text="Click me to hide or show columns!" id="myTable">
টেবিলকে স্টাইলিশ করা(Styling Tables):
শ্যাডো যোগ করা(Add shadow):
টেবিলকে শ্যাডো দিতে "ui-shadow" ক্লাস ব্যবহার করতে হবে ।
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
সকল টেবিলের সারির নিচে রেখার সাহায্যে সীমা যোগ করা(Add a bottom border to all table rows):
<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
সকল এলিমেন্ট এবং ব্যাকগ্রাউন্ডের রেখার সীমা যোগ করা(Add a bottom border to all elements and a background color to all even table rows):
<style>
th {
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
এভাবে খুব সহজে আপনি টেবিলকে নিজের মত করে সাজাতে এবং ডিজাইন করতে পারবেন । এজন্য জেকোয়েরি মোবাইলের ব্যবহার সবচাইতে বেশি ।
http://www.w3schools.com/jquerymobile/jquerymobile_tables.asp
