jQuery Mobile – Collapsibles

লিখেছেন সুদীপ্ত সাহা
জেক্যুয়েরি মোবাইল কলাপ্সিবলস

কলাপ্সিবল কন্টেন্ট ব্লকঃ
কলাপ্সিবলের সাহায্যে আপনি কোন কন্টেন্টকে হাইড অথবা শো করতে পারবেন, এর ফলে কন্টেন্টে কোন তথ্যের কিছু অংশ স্টোর করে রাখা যায়।
ব্যাপারটা অনেকটা এরকম- ধরুন, আপনি আপনার পেজের কোন তথ্যের সম্পূর্ণ অংশ শো না করে শুধু হেডিং শো করবেন এবং বিস্তারিত পড়ার জন্য more বা + সাইন এরকম কিছু দিবেন। যদি কেউ বিস্তারিত পড়তে আগ্রহী হয় তাহলে সেই সাইনে ক্লিক করলে বাকি তথ্য শো করবে।

কোন কন্টেন্ট ব্লককে কলাপ্সিবল করার জন্য কন্টেইনারে data-role="collapsib­le" অ্যাট্রিবিউট অ্যাড করতে হবে।
উদাহরণঃ

Click me - I'm collapsible!

I'm the expanded content.

ডিফল্টভাবে কন্টেন্ট ক্লোজ থাকে। পেজ লোড হওয়ার সময় কন্টেন্টকে রান করার জন্য data-collapsed="fals­e" অ্যাট্রিবিউট অ্যাড করতে হবে।
উদাহরণঃ

Click me - I'm collapsible!

I'm now expanded by default.

ন্যাস্টেড কলাপ্সিবল ব্লকসঃ
কলাপ্সিবল কন্টেন্ট ব্লক ন্যাস্টেডও হতে পারে (অর্থাৎ একটি কলাপ্সিবল ব্লকের ভেতর অন্য একটি কলাপ্সিবল ব্লক অ্যাড করা)।
উদাহরণঃ

Click me - I'm collapsible!

I'm the expanded content.

Click me - I'm a nested collapsible block!

I'm the expanded content in the nested collapsible block.

ইঙ্গিতঃ কলাপ্সিবল কন্টেন্টকে অনেকবার পর্যন্ত ন্যাস্টেড করা সম্ভব।

কলাপ্সিবল সেটসঃ
অনেকগুলো কলাপ্সিবল ব্লকের গ্রুপকে একত্রে কলাপ্সিবল সেট বলে। একটি ব্লক যখন ওপেন হয় অন্য ব্লকগুলো তখন ক্লোজ থাকে। কিছু কলাপ্সিবল ব্লক তৈরি করে সেই ব্লকগুলোকে কলাপ্সিবল সেটের ভেতর data-role="collapsib­leset" অ্যাট্রিবিউট দ্বারা একত্র করতে হয়।
উদাহরণঃ

Click me - I'm collapsible!

I'm the expanded content.

Click me - I'm collapsible!

I'm the expanded content.

Permanent link to this article: http://bangla.sitestree.com/jquery-mobile-collapsibles/