জেকোয়েরি মোবাইলের সকল ডাটা এট্রিবিউটস
লেখকঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
কি খবর সবার? জেকোয়েরি কেমন শিখছেন ? নিশ্চয় ভালো । আর তাই আজ আমি আপনাদের সাথে জেকোয়েরি মোবাইলের সকল ডাটা এট্রিবিউটস গুলো নিয়ে আলোচনা করবো ।
জেকোয়েরি ডাটা এট্রিবিউটস(jQuery Data Attributes)ঃ
আসলে আগে তো জানা দরকার যে জেকোয়েরি ডাটা এট্রিবিউটস টা কি জিনিস। জেকোয়েরি মোবাইল এইচটিএমএল ৫ ডাটা এট্রিবিউট ব্যবহার করে অনেক সুন্দর এবং আকর্ষণীয় টাচ কার্যকরী সাইট বা অ্যাপ্লিকেশন তৈরি করে মোবাইল ডিভাইসের জন্য । এখানে এই এইচটিএমএল ৫ ডাটা এট্রিবিউট কে বলা হয় জেকোয়েরি ডাটা এট্রিবিউটস । আর হ্যা, এখানে সকল ভেলুর ডিফল্ট মান কে বোল্ট ভাবে মানে মোটা অক্ষরে দেখানো হয়েছে ।
বাটন(Button) এট্রিবিউটসঃ
সিএসএস ক্লাস সাধারণত data-role="button" হাইপারলিংক দ্বারা যুক্ত হয়ে থাকে । ইনপুটের জায়গায় এবং টুলবারের বাটনের উপাদানগুলো এবং লিংক গুলো স্বয়ংক্রিয়ভাবে বাটনের স্টাইল ডিজাইন করা থাকে তাই এতে data-role="button" এট্রিবিউটসের দরকার নাই ।
ডাটা এট্রিবিউটঃ data-corners
ভেলুঃ true | false
বর্ণনাঃ বাটনগুলোর চারিদিকে কি গোলাকার কোণা থাকবে কি থাকবে না তা নির্দেশ করে । ডিফল্টভাবে এটা true ভেলুতে থাকে ।
ডাটা এট্রিবিউটঃ data-icon
ভেলুঃ Icons Reference
বর্ণনাঃ আইকন কেমন হবে তা নির্দেশ করে । ডিফল্টভাবে কোনো আইকন থাকে না ।
ডাটা এট্রিবিউটঃ data-iconpos
ভেলুঃ left | right | top | bottom | notext
বর্ণনাঃ আইকনের পজিশন দেখায় । ডিফল্টভাবে এটা বাম দিকে থাকে ।
ডাটা এট্রিবিউটঃ data-iconshadow
ভেলুঃ true | false
বর্ণনাঃ আইকনগুলোতে ছায়া(shadow) থাকবে কি থাকবে না তা নির্দেশ করে । ডিফল্টভাবে এতে ছায়া দেয়া থাকে ।
ডাটা এট্রিবিউটঃ data-inline
ভেলুঃ true | false
বর্ণনাঃ বাটনগুলো একই লাইনে থাকবে কি না তা দেখায় । ডিফল্টভাবে এরা একই লাইনে থাকে না ।
ডাটা এট্রিবিউটঃ data-mini
ভেলুঃ true | false
বর্ণনাঃ বাটনগুলোর আকার কেমন হবে এটা তা দেখায় । এটার আকার ডিফল্টভাবে বলে দেয়া থাকে না ।
ডাটা এট্রিবিউটঃ data-shadow
ভেলুঃ true | false
বর্ণনাঃ বাটনগুলোতে ছায়া(shadow) থাকবে কি থাকবে না তা নির্দেশ করে । ডিফল্টভাবে এতে ছায়া দেয়া থাকে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ থিমের রঙ কি হবে এটা তা নির্দেশ করে ।
একই গ্রুপের অনেকগুলো বাঁটনকে data-role="controlgroup" এট্রিবিউট দ্বারা যোগ করা হয়ে থাকে এবং data-type="horizontal|vertical" এট্রিবিউট দ্বারা নির্দেশ করা হয় বাটনগুলো আড়াআড়ি নাকি লম্বালম্বিভাবে দেখাবে ।
চেকবক্স(Checkbox) এট্রিবিউটসঃ
type="checkbox" দ্বারা লেবেলগুলোর জোড়াকে নির্দেশ করা হয় ।
ডাটা এট্রিবিউটঃ data-mini
ভেলুঃ true | false
বর্ণনাঃ চেকবক্স কি ছোট সাইজের হবে নাকি নিয়মিত আকারের হবে তা নির্দেশ করে । এটার আকার ডিফল্টভাবে বলে দেয়া থাকে না ।
ডাটা এট্রিবিউটঃ data-role
ভেলুঃ none
বর্ণনাঃ চেকবক্সকে যাতে জেকোয়েরি মোবাইল বাটনের স্টাইল না দিতে পারে এটা তা প্রতিরোধ করে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ চেকবক্সের থিমের রঙ কি হবে এটা তা নির্দেশ করে ।
কলাপসিবল(Collapsible) এট্রিবিউটসঃ
হেডারের উপাদানে data-role="collapsible" দ্বারা এটি যুক্ত হয়ে থাকে ।
ডাটা এট্রিবিউটঃ data-collapsed
ভেলুঃ true | false
বর্ণনাঃ উপাদান গুলো কি বিস্তৃত থাকবে কি থাকবে না তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-collapsed-cue-text
ভেলুঃ sometext
বর্ণনাঃ এটাতে স্ক্রীন রিডার সফটওয়ারের সাহায্যে ব্যবহারকারীদের একটা লেখা দেখায় যে তাদের কি করতে বলা হচ্ছে । ডিফল্টভাবে এতে "click to collapse contents" লেখা থাকে ।
ডাটা এট্রিবিউটঃ data-collapsed-icon
ভেলুঃ Icons Reference
বর্ণনাঃ বাটনগুলো বিস্তৃত না থাকলে কলাপসিবল বাটনের আইকন কেমন হয় তা দেখায় । ডিফল্টভাবে (+) আইকন থাকে ।
ডাটা এট্রিবিউটঃ data-content-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ কলাপসিবল উপাদানের থিমের রঙ নির্দেশ করা হয় । আমরা ইচ্ছা করলে চারপাশে গোলাকার কোণা যোগ করে দিতে পারি ।
ডাটা এট্রিবিউটঃ data-expanded-cue-text
ভেলুঃ sometext
বর্ণনাঃ এটাতে স্ক্রীন রিডার সফটওয়ারের সাহায্যে ব্যবহারকারীদের একটা লেখা দেখায় যে তাদের কি করতে বলা হচ্ছে । ডিফল্টভাবে এতে "click to expand contents" লেখা থাকে ।
ডাটা এট্রিবিউটঃ data-expanded-icon
ভেলুঃ Icons Reference
বর্ণনাঃ বাটনগুলো বিস্তৃত থাকলে কলাপসিবল বাটনের আইকন কেমন হয় তা দেখায় । ডিফল্টভাবে (-) আইকন থাকে ।
ডাটা এট্রিবিউটঃ data-iconpos
ভেলুঃ left | right | top | bottom
বর্ণনাঃ আইকনের পজিশন দেখায় ।
ডাটা এট্রিবিউটঃ data-inset
ভেলুঃ true | false
বর্ণনাঃ কলাপসিবল বাটনের কিভাবে স্টাইল করা থাকবে তা নির্দেশ করে দেয় ।
ডাটা এট্রিবিউটঃ data-mini
ভেলুঃ true | false
বর্ণনাঃ কলাপসিবল বাটনের আকার কেমন হবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ কলাপসিবল বাটনের থিমের রঙ উল্লেখ করে ।
কলাপসিবল সেট(Collapsible Set) এট্রিবিউটসঃ
data-role="collapsibleset" কন্টেইনারের মাধ্যমে এটি কলাপসিবল কন্টেন্ট ব্লকে যুক্ত হয় ।
ডাটা এট্রিবিউটঃ data-collapsed-icon
ভেলুঃ Icons Reference
বর্ণনাঃ কলাপসিবল বাটনের আওকন নির্দেশ করে । ডিফল্টভাবে এটি (+) আকারে থাকে ।
ডাটা এট্রিবিউটঃ data-content-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ কলাপসিবল কন্টেন্টের থিমের রঙ দেখায় ।
ডাটা এট্রিবিউটঃ data-expanded-icon
ভেলুঃ Icons Reference
বর্ণনাঃ উপাদানগুলো বিস্তৃত থাকলে কেমন দেখাবে তা নির্দেশ না করে । ডিফল্টভাবে (-) আকারে থাকে ।
ডাটা এট্রিবিউটঃ data-iconpos
ভেলুঃ left | right | top | bottom | notext
বর্ণনাঃ আইকনের পজিশন দেখায় ।
ডাটা এট্রিবিউটঃ data-inset
ভেলুঃ true | false
বর্ণনাঃ কলাপসিবল সেটগুলো কিভাবে স্টাইল করা হবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-mini
ভেলুঃ true | false
বর্ণনাঃ কলাপসিবল বাটনের আকার কেমন হবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ কলাপসিবল সেটের থিমের রঙ উল্লেখ করে ।
কনটেন্ট(Content) এট্রিবিউটসঃ
এটি data-role="content" এট্রিবিউট দ্বারা যুক্ত থাকে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ কনটেন্ট গুলোর থিমের রঙ উল্লেখ করে ।
কনট্রোল গ্রুপ(Controlgroup) এট্রিবিউটসঃ
<div> অথবা <fieldset> এর সাথে এটি data-role="controlgroup" আকারে যুক্ত হয়ে থাকে ।
ডাটা এট্রিবিউটঃ data-exclude-invisible
ভেলুঃ true | false
বর্ণনাঃ কনট্রোল গ্রুপে অদৃশ্যমান সাব গ্রুপকে কিভাবে বিস্তৃত হবে তা বলে দেয় ।
ডাটা এট্রিবিউটঃ data-mini
ভেলুঃ true | false
বর্ণনাঃ গ্রুপের আকার কেমন হবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ কনট্রোল গ্রুপের থিমের রঙ নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-type
ভেলুঃ horizontal | vertical
বর্ণনাঃ গ্রুপগুলো কি আড়াআড়িভাবে নাকি লম্বালম্বিভাবে দেখাবে তা নির্দেশ করে ।
ডায়লগ(Dialog) এট্রিবিউটঃ
এটি data-dialog="true" কন্টেইনার দ্বারা যুক্ত হবে ।
ডাটা এট্রিবিউটঃ data-close-btn
ভেলুঃ left | right | none
বর্ণনাঃ ক্লোজ বাটনের পজিশন নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-close-btn-text
ভেলুঃ sometext
বর্ণনাঃ ক্লোজ বাটনের জন্য কি লেখা দেখাবে তা এটা নির্দেশ করবে ।
ডাটা এট্রিবিউটঃ data-corners
ভেলুঃ true | false
বর্ণনাঃ ডায়ালগে কি গোলাকার কোণা থাকবে কি থাকবে না তা নির্দেশ করবে ।
ডাটা এট্রিবিউটঃ data-dom-cache
ভেলুঃ true | false
বর্ণনাঃ প্রত্যেক পেজে কি jQuery DOM cache পরিষ্কার হবে কিনা তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-overlay-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ ডায়ালগ পেজের ব্যাকগ্রাউন্ড রঙ নির্দেশ করবে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ ডায়ালগ পেজের থিমের রঙ নির্দেশ করবে ।
ডাটা এট্রিবিউটঃ data-title
ভেলুঃ sometext
বর্ণনাঃ ডায়ালগ পেজের টাইটেল কি হবে তা নির্দেশ করবে।
ইনহেন্সমেন্ট(Enhancement) এট্রিবিউটঃ
এটি data-enhance="false" অথবা data-ajax="false" যুক্ত কন্টেইনার ।
ডাটা এট্রিবিউটঃ data-enhance
ভেলুঃ true | false
বর্ণনাঃ এটি যদি true ভেলুতে থাকে তাহলে জেকোয়েরি মোবাইল এর স্টাইল স্বয়ংক্রিয়ভাবে করে দিবে । আর যদি ভেলু false থাকে তাহলে ফ্রেমওয়ার্ক পেজের স্টাইল করবে না । মনে রাখতে হবে data-enhance="false" অবশ্যই $.mobile.ignoreContentEnabled=true" এর সাথে যুক্ত থাকতে হবে তা না হলে স্টাইল স্বয়ংক্রিয়ভাবে করে দিবে না ।
ডাটা এট্রিবিউটঃ data-ajax
ভেলুঃ true | false
বর্ণনাঃ পেজগুলো কি অ্যাজাক্স দ্বারা লোড নিবে কি নিবেনা তা নির্দেশ করে ।
ফিল্ড কন্টেইনার(Field Container) এট্রিবিউটঃ
এটি data-role="fieldcontain" কন্টেইনারের সাথে যুক্ত হয়ে থাকে ।
ফিক্সড টুলবার(Fixed Toolbar) এট্রিবিউটঃ
এটি কন্টেইনারের সাথে data-role="header" অথবা data-role="footer" একসাথে data-position="fixed এট্রিবিউটের সাথে যুক্ত হয় ।
ডাটা এট্রিবিউটঃ data-disable-page-zoom
ভেলুঃ true | false
বর্ণনাঃ ব্যবহারকারীরা পেজ কি জুম করে দেখতে পারবে কি না তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-fullscreen
ভেলুঃ true | false
বর্ণনাঃ টুলবারের পজিশন সবার উপরে নাকি নিচে হবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-tap-toggle
ভেলুঃ true | false
বর্ণনাঃ ব্যবহারকারীরা ট্যাপ বা ক্লিক করে টুলবারের ভিজিবিলিটি দেখতে বা বন্ধ করতে পারবে কিনা তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-transition
ভেলুঃ slide | fade | none
বর্ণনাঃ ট্যাপ বা ক্লিক করলে ট্রানজিশন ইফেক্টস কেমন হবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-update-page-padding
ভেলুঃ true | false
বর্ণনাঃ "updatelayout" events এর মাধ্যমে টপ এবং বোটম থেকে কত দূরত্বে টুলবার থাকবে এবং টুলবারের সাইজ কি হবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-visible-on-page-show
ভেলুঃ true | false
বর্ণনাঃ যখন এর মূল পেজ দেখায় তখল টুলবার দেখাবে কিনা তা নির্দেশ করে ।
Flip Toggle Switch এট্রিবিউটসঃ
একটি <input type="checkbox"> এর সাথে "flipswitch" ডাটা রোল যুক্ত হয়ে থাকে ।
ডাটা এট্রিবিউটঃ data-mini
ভেলুঃ true | false
বর্ণনাঃ সুইচ এর সাইজ নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-on-text
ভেলুঃ sometext
বর্ণনাঃ সুইচ চাপলে অন হয়ে থাকবে ।
ডাটা এট্রিবিউটঃ data-off-text
ভেলুঃ sometext
বর্ণনাঃ সুইচ চাপলে অফ হয়ে যাবে ।
ফুটার(Footer) এট্রিবিউটসঃ
কন্টেইনারের সাথে data-role="footer" এট্রিবিউটস যুক্ত হয় ।
ডাটা এট্রিবিউটঃ data-id
ভেলুঃ sometext
বর্ণনাঃ এটা একটি সম্পূর্ণ আলাদা আইডি নির্দেশ করে । ফুটার স্থির করার জন্য দরকার হয় ।
ডাটা এট্রিবিউটঃ data-position
ভেলুঃ inline | fixed
বর্ণনাঃ ফুটার পেজের সাথে একই লাইনে থাকবে নাকি সবার নিচে থাকবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-fullscreen
ভেলুঃ true | false
বর্ণনাঃ ফুটার পেজের কনটেন্টের সাথে থাকবে নাকি সবার নিচে সবসময় থাকবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ ফুটারের থিমের রঙ নির্দেশ করে ।
ফুটারকে ফুলস্ক্রীনের সাথে রাখার জন্য প্রথমে data-position="fixed" করে তারপর এর সাথে data-fullscreen এট্রিবিউট যোগ করুন ।
হেডার(Header) এট্রিবিউটঃ
এটা কন্টেইনারের সাথে data-role="header"এট্রিবিউটের মাধ্যমে যুক্ত থাকে ।
ডাটা এট্রিবিউটঃ data-id
ভেলুঃ sometext
বর্ণনাঃ এটা একটি সম্পূর্ণ আলাদা আইডি নির্দেশ করে । হেডার স্থির করার জন্য দরকার হয় ।
ডাটা এট্রিবিউটঃ data-position
ভেলুঃ inline | fixed
বর্ণনাঃ হেডার পেজের সাথে একই লাইনে থাকবে নাকি সবার উপরে থাকবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-fullscreen
ভেলুঃ true | false
বর্ণনাঃ হেডার পেজের কনটেন্টের সাথে থাকবে নাকি সবার উপরে সবসময় থাকবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ হেডারের থিমের রঙ নির্দেশ করে ।
হেডারকে ফুলস্ক্রীনের সাথে রাখার জন্য প্রথমে data-position="fixed" করে তারপর এর সাথে data-fullscreen এট্রিবিউট যোগ করুন ।
ইনপুটস(Inputs) এট্রিবিউটসঃ
এটি type="text|search|etc." অথবা textarea elements এর সাথে যুক্ত হয়ে থাকে ।
ডাটা এট্রিবিউটঃ data-clear-btn
ভেলুঃ true | false
বর্ণনাঃ ইনপুটের কোথায় "clear" বাটন থাকবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-clear-btn-text
ভেলুঃ text
বর্ণনাঃ ইনপুটের "clear" বাটনের কোথায় একটি লেখা থাকবে তা নির্দেশ করে । ডিফল্টভাবে "clear text" লেখা থাকে ।
ডাটা এট্রিবিউটঃ data-mini
ভেলুঃ true | false
বর্ণনাঃ ইনপুটের সাইজ কি হবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-role
ভেলুঃ none
বর্ণনাঃ জেকোয়েরি মোবাইল যাতে একে বাটনের আকারে স্টাইল না দিতে পারে তার জন্য প্রতিরোধ করে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ ইনপুট ফিল্ডের থিমের রঙ নির্দেশ করে ।
লিংক(Link) এট্রিবিউটঃ
এর মাধ্যমে সকল প্রকার লিঙ্ককে বুঝায় ।
ডাটা এট্রিবিউটঃ data-ajax
ভেলুঃ true | false
বর্ণনাঃ ব্যবহারকারীর অভিজ্ঞতা এবং ট্রানজিশন বাড়ানোর জন্য অ্যাজাক্স দ্বারা পেজ লোডের জন্য নির্দেশ করে । ভেলু falseথাকলে নরমাল পেজ দেখাবে ।
ডাটা এট্রিবিউটঃ data-direction
ভেলুঃ reverse
বর্ণনাঃ ট্রানজিশনের অ্যানিমেশনকে উলটা করে দেখায় ।
ডাটা এট্রিবিউটঃ data-dom-cache
ভেলুঃ true | false
বর্ণনাঃ প্রতি পেজের জন্য jQuery DOM cache কে ক্লিয়ার করবে কি না তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-prefetch
ভেলুঃ true | false
বর্ণনাঃ পেজ কে DOM এ নিয়ে যায় যাতে ভিজিটররা এটা ভিজিট করার সময় দেখতে পায় ।
ডাটা এট্রিবিউটঃ data-rel
ভেলুঃ back | dialog | external | popup
বর্ণনাঃ লিংক কিভাবে কাজ করবে তা নির্দেশ করে । Back, Dialog, Popup ইত্যাদি কাজ করে থাকে ।
ডাটা এট্রিবিউটঃ data-transition
ভেলুঃ fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none
বর্ণনাঃ এক পেজ থেকে অন্য পেজে ট্রানজিশন কিভাবে হবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-position-to
ভেলুঃ origin | jQuery selector | window
বর্ণনাঃ পপ-আপ বক্সের পজিশন নির্দেশ করে।
লিস্ট(List) এট্রিবিউটঃ
<ol> অথবা <ul> একসাথে data-role="listview" এর সাথে যুক্ত হয়ে থাকে ।
ডাটা এট্রিবিউটঃ data-autodividers
ভেলুঃ true | false
বর্ণনাঃ স্বয়ংক্রিয়ভাবে লিস্ট আইটেমগুলোকে ভাগ করবে কি করবেনা তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-count-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ থিমের রঙ বাবল দ্বারা গণনার জন্য নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-divider-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ লিস্ট আইটেমের বিভক্তকারীর রঙ নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-filter
ভেলুঃ true | false
বর্ণনাঃ লিস্টে সার্চ বক্স যুক্ত হবে কি হবেনা তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-filter-placeholder
ভেলুঃ sometext
বর্ণনাঃ সার্চ বক্সের সাথে টেক্সট যুক্ত হবে কিনা তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-filter-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ সার্চ ফিল্টারে থিমেরর রঙ নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-icon
ভেলুঃ Icons Reference
বর্ণনাঃ লিস্টের আইকন নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-inset
ভেলুঃ true | false
বর্ণনাঃ লিস্ট কি গোলাকার কোণা অথবা মার্জিন দ্বারা স্টাইল করা হবে কিনা তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-split-icon
ভেলুঃ Icons Reference
বর্ণনাঃ স্পিলিট বাটনের আইকন নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-split-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ স্পিলিট বাটনের থিমের রঙ নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ লিস্টের থিমের রঙ নির্দেশ করে ।
লিস্ট আইটেম(List item) এট্রিবিঊটঃ
একটি <li> এর সাথে <ol> অথবা <ul> যুক্ত হয়ে তা data-role="listview" এর সাথে যুক্ত হয় ।
ডাটা এট্রিবিউটঃ data-filtertext
ভেলুঃ sometext
বর্ণনাঃ যখন সার্চ আইটেমে ফিল্টার করা হয় তখন যা খোজা হয় সেটার পরিবর্তে এটা দেখানোর জন্য নির্দেশ দেয় ।
ডাটা এট্রিবিউটঃ data-icon
ভেলুঃ Icons Reference
বর্ণনাঃ লিস্ট আইটেমের আইকন নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-role
ভেলুঃ list-divider
বর্ণনাঃ লিস্ট আইটেমের পার্থক্যকারীকে নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ লিস্ট আইটেমের থিমের রঙ নির্দেশ করে ।
নেভবার(Navbar) এট্রিবিউটসঃ
<li> এলিমেন্টের সাথে data-role="navbar" কন্টেইনার যুক্ত হয় ।
ডাটা এট্রিবিউটঃ data-icon
ভেলুঃ Icons Reference
বর্ণনাঃ লিস্ট আইটেমের আইকন নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-iconpos
ভেলুঃ left | right | top | bottom | notext
বর্ণনাঃ আইকনের পজিশন নির্দেশ করে ।
পেজ(Page) এট্রিবিউটসঃ
এটি একটি data-role="page" কন্টেইনার ।
ডাটা এট্রিবিউটঃ data-dom-cache
ভেলুঃ true | false
বর্ণনাঃ প্রতি পেজের জন্য jQuery DOM cache কে ক্লিয়ার করবে কি না তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-overlay-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ ডায়ালগ পেজের ব্যাকগ্রাউন্ড রঙ নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ পেজের থিমের রঙ নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-title
ভেলুঃ sometext
বর্ণনাঃ পেজের টাইটেল নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-url
ভেলুঃ url
বর্ণনাঃ ইউআরএল কে আপডেট করে তার রিকুস্টেড পেজে নিয়ে যায় ।
পপ-আপ(Popup) এট্রিবিউটসঃ
এটি একটি data-role="popup" কন্টেইনার ।
ডাটা এট্রিবিউটঃ data-corners
ভেলুঃ true | false
বর্ণনাঃ পপ-আপের গোলাকার কোণা হবে কিনা সেটা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-dismissible
ভেলুঃ true | false
বর্ণনাঃ পপ-আপের বাইরে ক্লিক করলে পপ-আপ বন্ধ হবে কিনা সেটা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-history
ভেলুঃ true | false
বর্ণনাঃ পপ-আপ ব্রাউজার হিস্টোরি তৈরি করবে কিনা সেটা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-overlay-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ ব্যাকগ্রাউন্ডের সাথে পপ-আপের রঙ নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-shadow
ভেলুঃ true | false
বর্ণনাঃ পপ-আপ বক্সে ছায়া থাকবে কিনা তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ পপ-আপ বক্সের থিমের কালার নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-tolerance
ভেলুঃ 30, 15, 30, 15
বর্ণনাঃ পপ-আপ উন্ডো এর পেজের চারিদিক থেকে দূরত্ব নির্দেশ করে ।
রেডিও বাটন(Radio Button) এট্রিবিউটসঃ
লেবেলের জোড়ার সাথে type="radio" ইনপুট হয় ।
ডাটা এট্রিবিউটঃ data-mini
ভেলুঃ true | false
বর্ণনাঃ বাটনের সাইজ নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-role
ভেলুঃ none
বর্ণনাঃ জেকোয়েরি মোবাইল যাতে এই বাটনের স্টাইল পরিবর্তন না করে তা প্রতিরোধ করে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ রেডিও বাটনের থিমের রঙ নির্দেশ করে ।
একই গ্রুপের অনেকগুলো রেডিও বাঁটনকে data-role="controlgroup" এট্রিবিউট দ্বারা যোগ করা হয়ে থাকে এবং data-type="horizontal|vertical" এট্রিবিউট দ্বারা নির্দেশ করা হয় বাটনগুলো আড়াআড়ি নাকি লম্বালম্বিভাবে দেখাবে ।
সিলেক্ট(Select) এট্রিবিউটসঃ
সকল <select> এলিমেন্টস কে বুঝায় ।
ডাটা এট্রিবিউটঃ data-icon
ভেলুঃ Icons Reference
বর্ণনাঃ আইকন সিলেক্ট এলিমেন্ট কেমন হবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-iconpos
ভেলুঃ left | right | top | bottom | notext
বর্ণনাঃ আইকনের পজিশন নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-inline
ভেলুঃ true | false
বর্ণনাঃ সিলেক্ট এলিমেন্ট একই লাইনে থাকবে নাকি কেমন হবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-mini
ভেলুঃ true | false
বর্ণনাঃ সিলেক্ট এলিমেন্ট এর সাইজ কেমন হবে এটা তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-native-menu
ভেলুঃ true | false
বর্ণনাঃ যখন ভেলু false থাকে তখন জেকোয়েরি এর কাস্টম সিলেক্ট মেনু দেখায় ।
ডাটা এট্রিবিউটঃ data-overlay-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ জেকোয়েরি এর নিজস্ব কাস্টম মেনু দেখায় ।
ডাটা এট্রিবিউটঃ data-placeholder
ভেলুঃ true | false
বর্ণনাঃ non-native select এর জায়গায় <option> element সেট হয় ।
ডাটা এট্রিবিউটঃ data-role
ভেলুঃ none
বর্ণনাঃ জেকোয়েরি মোবাইল যাতে এই বাটনের স্টাইল পরিবর্তন না করে তা প্রতিরোধ করে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ সিলেক্ট এলিমেন্ট এর থিমের রঙ নির্দেশ করে ।
একই গ্রুপের অনেকগুলো সিলেক্ট এলিমেন্টস্কে data-role="controlgroup" এট্রিবিউট দ্বারা যোগ করা হয়ে থাকে এবং data-type="horizontal|vertical" এট্রিবিউট দ্বারা নির্দেশ করা হয় এলিমেন্টস গুলো আড়াআড়ি নাকি লম্বালম্বিভাবে দেখাবে ।
স্লাইডার(Slider) এলিমেন্টসঃ
type="range" এর সাথে ইনপুট হয় ।
ডাটা এট্রিবিউটঃ data-highlight
ভেলুঃ true | false
বর্ণনাঃ স্লাইডার গুলো হাইলাইট হবে কিনা তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-mini
ভেলুঃ true | false
বর্ণনাঃ স্লাইডারের সাইজ কেমন হবে তা নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-role
ভেলুঃ none
বর্ণনাঃ জেকোয়েরি যাতে স্লাইডার কে বাটনের স্টাইল দিতে না পারে এটা তা নিয়ন্ত্রণ করে ।
ডাটা এট্রিবিউটঃ data-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ স্লাইডার কনট্রোলের থিমের রঙ নির্দেশ করে ।
ডাটা এট্রিবিউটঃ data-track-theme
ভেলুঃ letter (a-z)
বর্ণনাঃ স্লাইডারের থিমের রঙ নির্দেশ করে ।
তাহলে আমরা জেকোয়েরি এর মোবাইল ডাটা এট্রিবিউটস গুলো জেনে ফেললাম । একটার সাথে আরেকটার খুব মিল আছে । তাই পার্থক্যগুলো কিন্তু খুব ভালভাবে খেয়াল করবেন । ডিফল্টভাবে কোনটা আছে সেজন্য মোটা অক্ষরের লেখাগুলো খুব খেয়াল করে দেখবেন । আর কোথাও না বুঝতে পারলে কমেন্ট করবেন ।
http://www.w3schools.com/jquerymobile/jquerymobile_ref_data.asp
