জেকুয়্যেরি(jQuery) মোবাইল গ্রিড (jQuery Mobile Grids)
মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার।)
জেকুয়্যেরি(jQuery) মোবাইল গ্রিডের বিন্যাস
jQuery মোবাইল সিএসএস ভিত্তিক একটি সেট কলামের বিন্যাস প্রদান করে। তবে, কলামের বিন্যাস সাধারণত মোবাইল এর জন্য নির্ধারিত নয়, এটি মোবাইল স্ক্রিন এর প্রস্থ এর উপর নির্ভর করে।
কিন্তু এখানে আরও উপায় আছে যদি আপনি ছোট এলিমেন্ট পোজিশন করতে চান, যেমন বাটন অথবা নেভিগেশন ট্যাব, পাশাপাশি যদি এটি টেবিল এর মধ্যে থাকে।তখন, কলাম সঠিক হবে।
একটি গ্রিড এর মধ্যে কলাম এর প্রস্থের সমান (এবং ১০০% প্রস্থ সর্বমোট), কোন বর্ডার, ব্যাকগ্রাউন্ড, মার্জিন অথবা প্যাডিং ছাড়া।
পাঁচটি গ্রিডের বিন্যাস আছে যা ব্যবহার করা যেতে পারে:
Grid Class Columns Column Widths Corresponds To Example
ui-grid-solo 1 100% ui-block-a Try it
ui-grid-a 2 50% / 50% ui-block-a|b Try it
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c Try it
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d Try it
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e Try it
কলাম কন্টেইনারের ভেতরে, চাইল্ড এলিমেন্ট এ ui-block-a|b|c|d|e ক্লাসগুলো থাকতে পারে, এটি নির্ভর করে কলামের সংখ্যার উপর। কলামগুলো পাশাপাশি অবস্থান করবে।
উদাহরণ ১: ui-grid-a ক্লাসের জন্য (যেটি দুই কলামের লেআউট), আপনাকে অবশ্যই দুটি চাইল্ড এলিমেন্ট উল্লেখ করতে হবে ui-block-a এবং ui-block-b ।
উদাহরণ 2: ui-grid-b ক্লাসের জন্য (তিন কলামের লেআউট), তিনটি চাইল্ড এলিমেন্ট উল্লেখ করতে হবে ui-block-a, ui-block-b এবং ui-block-c।
গ্রিডের কাস্টমাইজ করুন (Customize Grids)
আপনি সিএসএস (CSS) ব্যবহার করে আপনার কলাম ব্লক কাস্টমাইজ করতে পারেন:
উদাহরণ:
<style>
.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
এটা নিজে চেষ্টা করে দেখুন
আপনি ইনলাইন স্টাইল ব্যবহার করে আপনার ব্লক কাস্টমাইজ করতে পারেন:
1px solid black;">Text..
একাধিক সারি (Multiple Rows)
এটির মাধ্যমে আপনার কলাম ভিতরে একাধিক সারি করা সম্ভব.
দ্রষ্টব্য: ui-block-a ক্লাস সবসময় একটি নতুন লাইন তৈরী করবে।
উদাহরণ:
<div class="ui-grid-b">
<div class="ui-block-a"><span>Some Text</span></div>
<div class="ui-block-b"><span>Some Text</span></div>
<div class="ui-block-c"><span>Some Text</span></div>
<div class="ui-block-a"><span>Some Text</span></div>
<div class="ui-block-b"><span>Some Text</span></div>
<div class="ui-block-a"><span>Some Text</span></div>
</div>
এটা নিজে চেষ্টা করে দেখুন
রেসপনসিভ গ্রিডস্ (Responsive Grids)
ছোট স্ক্রিন এ, একটি সারিতে পাশাপাশি টেক্সট সহ অনেক বাটন না দেওয়াতে উদ্বুদ্ধ করা হয়, এতে টেক্সট সর্টেনড (shortened) হয়ে যায়।
রেসপনসিভ গ্রিডের জন্য, ui-responsive ক্লাস কন্টেইনার এ যোগ করুন:
Example
<div class="ui-grid-b ui-responsive">
এটা নিজে চেষ্টা করে দেখুন
