অনুবাদক: ফয়সাল রকি (এম.এ)
--------
রেসপন্সিভ টেবিল (Responsive Tables)
যখন আপনি আপনার মোবাইল ওয়েব পেইজটির content কে ব্যবহারকারী ডিভাইসের স্ক্রীন সাইজ এবং ওরিয়েন্টশন অনুযায়ী পরিবর্তন করতে চাইবেন তখন রেসপন্সিভ ডিজাইন গুরুত্বপূর্ণ ভূমিকা পালন করে। jQuery Mobile নামক class এর সাহায্যে ব্যবহারকারী ডিভাইসের স্ক্রীন সাইজ জানা যায় এবং উক্ত স্ক্রীন সাইজের জন্য content কে স্বয়ংক্রিয়ভাবে resize করা হয়।
Responsive tables এর সাহায্যে a large set of tabular data কে মোবাইল এবং ডেস্কটপ উভয়ের জন্যই সুন্দরভাবে উপস্থাপন করা যায়।
দুই প্রকারের responsive tables রয়েছে, যথা:
১) reflow এবং
২) column toggle
Reflow Table
reflow mode এর সাহায্যে minimum size অতিক্রম না করা পর্যৃন্ত table data কে horizontally রাখা হয় এবং সকল row কে vertically গ্রুপ করা হয়।
টেবিল তৈরি করার সময়
element এর মধ্যে data-role="table" ও class="ui-responsive" যোগ করতে হবে। নিম্নে উদাহরনের সাহায্যে দেখানো হলো:সঠিকভাবে রেসপন্সিভ টেবিল ব্যবহারের ক্ষেত্রেওelement ব্যবহার করতে হবে। এক্ষেত্রে rowspan ও colspan attributes ব্যবহার করা যাবে না, কেননা উক্ত attribute গুলো responsive table সাপোর্ট করে না।
Column Toggle Table
"column toggle" mode-এ যেসকল কলামের ক্ষেত্রে পর্যাপ্ত width পায় না সেসকল কলামকে hide করে দেয়া হয়।
Column Toggle Table তৈরি করার জন্য
element টি নিম্নোক্তভাবে data-role, data-mode, id ও class যোগ করতে হবে:সাধারণত jQuery Mobile টেবিলের ডানদিক হতে কলামকে hide করে দেয়, তবে আপনি কলামের গুরুত্ব অনুযায়ী order নির্দিষ্ট করে দিতে পারেন। এক্ষেত্রে table এর header () এ data-priority attribute টি যোগ করতে হবে, যেখানে সর্বোচ্চ priority মান হলো=১ এবং সর্বনিম্ন priority মান হলো=৬।I will never be hiddenI am very important - I will probably not be hiddenI am less important - I could be hiddenI am not that important - there is a good chance that I will be hiddenএখন, নিম্নোক্ত উদাহরণের মতো সকল কোডগুলোকে একত্রিত করে একটি column toggle table তৈরি করুন। দেখা যাবে যে, টেবিলের উপরের ডান প্রান্তে framework স্বয়ংক্রিয়ভাবে একটি বাটন তৈরি করেছে যার সাহায্যে ব্যবহারকারী কোন কোন কলাম দেখানো হবে তা নির্ধারণ করতে পারবে।
উদাহরণ:
| CustomerID | CustomerName | ContactName | Address | City | PostalCode | Country |
|---|---|---|---|---|---|---|
| 1 | Alfreds Futterkiste | Maria Anders | Obere Str. 57 | Berlin | 12209 | Germany |
toggle table button এর text পরিবর্তন করার জন্য data-column-btn-text attribute যোগ করুন।
উদাহরণ:
Styling Tables
টেবিলের shadow যোগ করতে "ui-shadow" class যোগ করুন।
shadow যোগ করুণ:
টেবিলে আরোও বেশি style যোগ করতে চাইলে CSS যোগ করতে পারেন।
সকল table row এ bottom border যোগ করতে নিচের উদাহরণটি দেখুন:সকলelements এ bottom border এবং সকল even table row এ background color যোগ করতে নিচের উদাহরণটি দেখুন:
