লিখেছেন সুদীপ্ত সাহা
জেক্যুয়েরি মোবাইল নেবিগেশন বার
জেক্যুয়েরি নেবিগেশন বার হল অনেকগুলো লিঙ্কের সমন্বয়ে গঠিত একটি গ্রুপ যা হেডারে বা ফুটারে আড়াআড়ি বা খাড়াখাড়ি অবস্থায় থাকে। [image] এই বারের লিঙ্কগুলো
উদাহরণঃ
ইঙ্গিতঃ নেভিগেশন বারের লিঙ্কগুলো ডিফল্টভাবেই বাটনে পরিবর্তিত হয় ("ui-btn" অথবা data-role="button" ক্লাস ব্যবহার করার দরকার হয় না)। বাটনের প্রস্থ কন্টেন্ট হিসেবে ডিফল্টভাবেই নির্ধারিত হয়। আনঅর্ডারড লিস্টের কন্টেন্টগুলো বাটনের সম্পূর্ণ জায়গাকে % অনুসারে ভাগ করে নেয়, ১টি বাটন হলে ১০০% ২টি বাটন হলে ৫০% করে ৩টি বাটন হলে ৩৩.৩% করে ইত্যাদি। যদি নেভিগেশন বারে ৫টির বেশি বাটন থাকে তাহলে তা স্বয়ংক্রিয়ভাবে দ্বিতীয় লাইনে চলে যায়।
নেভিগেশন বারের আইকনঃ নেভিগেশন বারে আইকন অ্যাড করতে চাইলে data-icon অ্যাট্রিভিউট ব্যবহার করতে হয়। উদাহরণঃ Search আইকন চ্যাপ্টারে বর্ণিত CSS ক্লাসের নির্দিষ্ট ভ্যালুগুলোই data-icon অ্যাট্রিভিউট ব্যবহার করে, তবে একমাত্র পার্থক্য হল- "ui-icon-value" ক্লাসের পরিবর্তে data-icon="value" অ্যাট্রিভিউট ব্যবহার করতে হয়।
অ্যাট্রিভিউট ভ্যালু data-icon="home" data-icon="arrow-r" data-icon="search"
পজিশনিং আইকনঃ একেবারে "ui-btn-icon-position" ক্লাসের মতো (আইকন চ্যাপ্টারে বর্ণিত), আপনাকে শুধু বাছাই করতে হবে আইকনটি আপনি নেভিগেশন বাটনের কোথায় ব্যবহার করতে চানঃ লেফট, রাইট, আপ অথবা বোটম। আইকনের পজিশন নেভিগেশন বার কন্টেইনারে ঠিক করে দিতে হয় কারণ প্রত্যেকটা বাটনের জন্য আলাদা আলাদা করে পজিশন ঠিক করে দেয়া সম্ভব নয়। পজিশন ঠিক করার জন্য data-iconpos অ্যাট্রিভিউট ব্যবহার করতে হয়ঃ
অ্যাট্রিভিউট ভ্যালু বর্ণনা data-iconpos="top" আইকন টপে প্রদর্শিত হবে data-iconpos="right" আইকন রাইট সাইডে প্রদর্শিত হবে data-iconpos="bottom" আইকন বোটমে প্রদর্শিত হবে data-iconpos="left" আইকন লেফট সাইডে প্রদর্শিত হবে ইঙ্গিতঃ ডিফল্ট ভাবে আইকনের পজিশন টেক্সটের উপরে ঠিক হয়ে থাকে।
অ্যাকটিভ বাটনঃ নেভিগেশন বারের কোন লিঙ্কে যখন কিল্ক করা হয় তখন এটি সিলেক্টেড হয়েছে এরকম দেখানো হয় (নিচের দিকে কিছুটা ডাউন হয়ে যায়)। এই লুকটি আনার জন্য "ui-btn-active" ক্লাস ব্যবহার করতে হয়ঃ
উদাহরণঃ
অনেকগুলো পেজের জন্য যে পেজগুলোতে ইউজার অলরেডি ভিজিট করেছে সেগুলোকে সিলেক্টেড দেখানো দরকার হয়। এজন্য লিঙ্কে "ui-state-persist" ক্লাস এবং বাটনে "ui-btn-active" ক্লাস ব্যবহার করতে হয়ঃ
