জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার ।

লেখকঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
ওয়েবসাইটঃ www.firoz.me

কি খবর ? কেমন আছেন সবাই? আজকে একটু ঠাণ্ডা বেশি, তাই সবাই মনে হয় লেপের ভিতর থেকে ভালোই আছেন । আজ আমি আপনাদেরকে জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখাবো ।

jQuery CSS Classes
জেকোয়েরি মোবাইল তার উপাদান সমূহকে বিভিন্ন ভাবে ডিজাইন করার জন্য সিএসএস ক্লাস ব্যবহার করে থাকে । আজ আমরা তাই সিএসএস ক্লাসের কিছু সাধারণ ব্যবহার দেখাবো ।

Global Classes
এই Global Classes গুলো জেকোয়েরি মোবাইল উইজেটস যেমন বাটন, টুলবার, প্যানেল, টেবিল, লিস্ট প্রভৃতি যোগ করার কাজে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-corner-all
ক্লাসের বর্ণনাঃ উপাদানের গোলাকার কোণা তৈরিতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-shadow
ক্লাসের বর্ণনাঃ উপাদান সমূহের শ্যাডো মানে ছায়া তৈরিতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-overlay-shadow
ক্লাসের বর্ণনাঃ মাত্রাতিরিক্ত ছায়া তৈরিতে এটা ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-mini
ক্লাসের বর্ণনাঃ উপাদাঙ্গুলোকে ছোট করতে এটা ব্যবহার করা হয় ।

Button Classes
<a> অথবা <button> উপাদানগুলোকে Global Classes এর সাথে যোগ করতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn
ক্লাসের বর্ণনাঃ বাটনগুলোকে বিভিন্ন স্টাইলে সাজাতে এই <a> উপাদানসমূহকে যোগ করতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn-inline
ক্লাসের বর্ণনাঃ বাটন গুলোকে একই সারিতে দেখাতে এটি ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn-icon-top
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার উপরে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-right
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার ডান দিকে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-bottom
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার নিচে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-left
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার বাম দিকে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-notext
ক্লাসের বর্ণনাঃ শুমুমাত্র আইকন দেখাবে ।

ক্লাসের নামঃ ui-btn-a|b
ক্লাসের বর্ণনাঃ a এবং b দুইটি ব্যাকগ্রাউণ্ডের কালার দেখাবে । a এর কালার ডিফল্ট থাকে যা হল ধূসর ব্যাকগ্রাউণ্ডের সাথে কালো লেখা । শুধুমাত্র b কালো ব্যাকগ্রাউণ্ডের সাথে সাদা লেখার পরিবর্তন করবে ।

Icon Classes
সকল <a> এবং <button> উপাদানের ক্লাসসমূহ দেয়া হল ।

ক্লাসের নামঃ ui-icon-action
ক্লাসের বর্ণনাঃ অ্যাকশন বাটন ।

ক্লাসের নামঃ ui-icon-alert
ক্লাসের বর্ণনাঃ একটা ত্রিভূজের ভিতর বিস্ময় চিহ্ন ।

ক্লাসের নামঃ ui-icon-audio
ক্লাসের বর্ণনাঃ স্পিকারের চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d-l
ক্লাসের বর্ণনাঃ নিচের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d-r
ক্লাসের বর্ণনাঃ নিচের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u-l
ক্লাসের বর্ণনাঃ উপরের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u-r
ক্লাসের বর্ণনাঃ উপরের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-l
ক্লাসের বর্ণনাঃ বাম দিকের তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-r
ক্লাসের বর্ণনাঃ ডান দিকের তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u
ক্লাসের বর্ণনাঃ উর্দ্ধমূখী তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d
ক্লাসের বর্ণনাঃ নিম্নগামী তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-back
ক্লাসের বর্ণনাঃ ব্যাক বাটন ।

ক্লাসের নামঃ ui-icon-bars
ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল দাগের বাটন ।

ক্লাসের নামঃ ui-icon-bullets
ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল ফোটার বাটন ।

ক্লাসের নামঃ ui-icon-calendar
ক্লাসের বর্ণনাঃ ক্যালেন্ডার বাটন ।

ক্লাসের নামঃ ui-icon-camera
ক্লাসের বর্ণনাঃ ক্যামেরা বাটন ।

ক্লাসের নামঃ ui-icon-carat-d
ক্লাসের বর্ণনাঃ নিম্নগামী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-l
ক্লাসের বর্ণনাঃ বামমুখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-r
ক্লাসের বর্ণনাঃ ডানমুখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-u
ক্লাসের বর্ণনাঃ উর্দ্ধমূখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-check
ক্লাসের বর্ণনাঃ চেক মার্ক ।

ক্লাসের নামঃ ui-icon-clock
ক্লাসের বর্ণনাঃ ঘড়ির আইকন ।

ক্লাসের নামঃ ui-icon-cloud
ক্লাসের বর্ণনাঃ মেঘের আইকন ।

ক্লাসের নামঃ ui-icon-comment
ক্লাসের বর্ণনাঃ কমেন্ট বা ম্যাসেজ বাটন ।

ক্লাসের নামঃ ui-icon-delete
ক্লাসের বর্ণনাঃ ডিলিট বাটন ।

ক্লাসের নামঃ ui-icon-edit
ক্লাসের বর্ণনাঃ এডিট অথবা পেন্সিল আইকন ।

ক্লাসের নামঃ ui-icon-eye
ক্লাসের বর্ণনাঃ চোখের আইকন ।

ক্লাসের নামঃ ui-icon-forbidden
ক্লাসের বর্ণনাঃ নিষিদ্ধ আইকন ।

ক্লাসের নামঃ ui-icon-forward
ক্লাসের বর্ণনাঃ ফরওয়ার্ড আইকন ।

ক্লাসের নামঃ ui-icon-gear
ক্লাসের বর্ণনাঃ সেটিংস বাটন ।

ক্লাসের নামঃ ui-icon-grid
ক্লাসের বর্ণনাঃ গ্রিড চিহ্ন ।

ক্লাসের নামঃ ui-icon-heart
ক্লাসের বর্ণনাঃ হার্ট অথবা লাভ চিহ্ন ।

ক্লাসের নামঃ ui-icon-home
ক্লাসের বর্ণনাঃ হোম বাটন ।

ক্লাসের নামঃ ui-icon-info
ক্লাসের বর্ণনাঃ ইনফরমেশন বাটন ।

ক্লাসের নামঃ ui-icon-location
ক্লাসের বর্ণনাঃ লোকেশন বাটন ।

ক্লাসের নামঃ ui-icon-lock
ক্লাসের বর্ণনাঃ তালার আইকন ।

ক্লাসের নামঃ ui-icon-mail
ক্লাসের বর্ণনাঃ মেইল আইকন ।

ক্লাসের নামঃ ui-icon-minus
ক্লাসের বর্ণনাঃ বিয়োগ আইকন ।

ক্লাসের নামঃ ui-icon-navigation
ক্লাসের বর্ণনাঃ নেভিগেশন আইকন ।

ক্লাসের নামঃ ui-icon-phone
ক্লাসের বর্ণনাঃ টেলিফোন আইকন ।

ক্লাসের নামঃ ui-icon-power
ক্লাসের বর্ণনাঃ পাওয়ার বাটন । বা অন অফ বাটন ।

ক্লাসের নামঃ ui-icon-plus
ক্লাসের বর্ণনাঃ যোগ বাটন ।

ক্লাসের নামঃ ui-icon-recycle
ক্লাসের বর্ণনাঃ রিসাইকেল চিহ্ন ।

ক্লাসের নামঃ ui-icon-refresh
ক্লাসের বর্ণনাঃ রিফ্রেশ বাটন ।

ক্লাসের নামঃ ui-icon-search
ক্লাসের বর্ণনাঃ সার্চ বাটন ।

ক্লাসের নামঃ ui-icon-shop
ক্লাসের বর্ণনাঃ দোকান অথবা ব্যাগের আইকন ।

ক্লাসের নামঃ ui-icon-star
ক্লাসের বর্ণনাঃ তারার চিহ্ন ।

ক্লাসের নামঃ ui-icon-tag
ক্লাসের বর্ণনাঃ ট্যাগ বাটন ।

ক্লাসের নামঃ ui-icon-user
ক্লাসের বর্ণনাঃ ব্যবহারকারী বাটন ।

ক্লাসের নামঃ ui-icon-video
ক্লাসের বর্ণনাঃ ভিডিও বা ক্যামেরা আইকন ।

Theme Classes
জেকোয়েরি মোবাইল সাধারণত ধূসর এবং কালো এই দুই ধরনের থিম সরবরাহ করে থাকে । কিন্তু আপনি আপনার ইচ্ছামত এটা পরিবর্তন করে নিতে পারেন । আপনি (a-z) মত আপনার থিমটি কাস্টোমাইজ করতে পারবেন ।

ক্লাসের নামঃ ui-bar-(a-z)
ক্লাসের বর্ণনাঃ হেডার, ফুটার এবং অন্যান্য বারের কালার নির্দেশ করে থাকে ।

ক্লাসের নামঃ ui-body-(a-z)
ক্লাসের বর্ণনাঃ কনটেন্ট ব্লক যেমন page content panes , listview items, popups, collapsibles, loader, sliders, এবং panels এর কালার নির্দেশ করে ।

ক্লাসের নামঃ ui-btn-(a-z)
ক্লাসের বর্ণনাঃ বাটন এবং আইকনের কালার নির্দেশ করে থাকে ।

ক্লাসের নামঃ ui-group-theme-(a-z)
ক্লাসের বর্ণনাঃ গুরুপ ভিত্তিক রঙ নির্দেশ করে দেয় ।

ক্লাসের নামঃ ui-overlay-(a-z)
ক্লাসের বর্ণনাঃ ডায়ালগ, পপ-আপ এবং পেজের উপাদানসমূহের রঙ ঠিক করে দেয় ।

ক্লাসের নামঃ ui-page-theme-(a-z)
ক্লাসের বর্ণনাঃ প্রত্যেক পেজের রঙ নির্দেশ করে ।

Grid Classes
গ্রিডের কলাম গুলো বিন্নভাবে থাকতে পারে। সাধারণত ৫ ধরণের গ্রিড ব্যবহার করা হয়ে থাকে ।

গ্রিড ক্লাসঃ ui-grid-solo
কলামঃ 1
কলামের ব্যাপ্তিঃ 100%
সুসঙ্গত হয়ঃ ui-block-a

গ্রিড ক্লাসঃ ui-grid-a
কলামঃ 2
কলামের ব্যাপ্তিঃ 50% / 50%
সুসঙ্গত হয়ঃ ui-block-a|b

গ্রিড ক্লাসঃ ui-grid-b
কলামঃ 3
কলামের ব্যাপ্তিঃ 33% / 33% / 33%
সুসঙ্গত হয়ঃ ui-block-a|b|c

গ্রিড ক্লাসঃ ui-grid-c
কলামঃ 4
কলামের ব্যাপ্তিঃ 25% / 25% / 25% / 25%
সুসঙ্গত হয়ঃ ui-block-a|b|c|d

গ্রিড ক্লাসঃ ui-grid-d
কলামঃ 5
কলামের ব্যাপ্তিঃ 20% / 20% / 20% / 20% / 20%
সুসঙ্গত হয়ঃ ui-block-a|b|c|d|e

আর এর ভিতরেই কিন্তু আমরা জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখে গেলাম । কোথাও না বুঝতে পারলে কমেন্ট করতে কিন্তু ভুলবেন না ।