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

জেকোয়েরি মোবাইল কেমন লাগছে সবার? আমার কিন্তু জেকোয়েরি মোবাইল এর নতুন নতুন বিষয় শিখতে দারুন লাগে । আজ আমি আপনাদেরকে জেকোয়েরি মোবাইলের থিমস সম্পর্কে জানাবো ।

জেকোয়েরি মোবাইল থিমসঃ
জেকোয়েরি মোবাইল দুই ধরণের থিমস প্রদান করে । "a" এবং "b" । প্রত্যেকটির বাটন, বার, কনটেন্ট ব্লক প্রভৃতির আলাদা আলাদা রঙ আছে ।

আপনার অ্যাপ্লিকেশনের পরিবর্তন আনার জন্য data-theme এট্রিবিউট ব্যবহার করতে হবে এবং একে একটি বর্ণের সাথে নির্দিষ্ট করে দিতে হবে ।

<div data-role="page" data-theme="a|b">

ভেলুঃ a
বর্ণনাঃ পেজের উপাদানসমূহ উজ্জ্বল ধূসর রঙের ব্যাকগ্রাউন্ডের উপর কালো রঙের লেখায় থাকে ।
হেডার এবং ফুটারও ধূসর রঙের ব্যাকগ্রাউন্ডের উপর কালো রঙের লেখায় থাকে ।
বাটনগুলো উজ্জ্বল ধূসর রঙের ব্যাকগ্রাউন্ডের উপর কালো রঙের লেখায় থাকে ।
অ্যাক্টিভ বাটনগুলো নীল রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
লিংকগুলো নীল রঙের হয় ।
ইনপুট ফিল্ডগুলো সাদা ব্যাকগ্রাউন্ডের উপর উজ্জ্বল ধূসর বা কালো লেখার হয় ।

ভেলুঃ b
বর্ণনাঃ পেজের উপাদানসমূহ গাঢ় ধূসর রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
হেডার এবং ফুটারও গাঢ় ধূসর রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
বাটনগুলো কাঠ-কয়লা রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
অ্যাক্টিভ বাটনগুলো সবুজে নীল রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
লিংকগুলো সবুজে নীল রঙের হয় ।
ইনপুট ফিল্ডগুলো কালো ব্যাকগ্রাউন্ডের উপর ধূসর বা সাদা লেখার হয় ।

তাই আপনাকে "a" অথবা "b" এর যেকোন স্টাইল দিতে গেলে class="ui-btn" ক্লাসের সাথে "ui-btn-a|b" ক্লাস ব্যবহার করতে হবে ।
<a href="#" class="ui-btn ui-btn-a|b">Button</a>

হেডার এবং ফুটারে থিম ঠিক করাঃ
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>

হেডার এবং ফুটারের ডায়লগ বক্সের থিম ঠিক করাঃ
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>

বাটনের থিম ঠিক করাঃ
<a href="#" class="ui-btn ui-btn-b">Black Button</a>

আইকনের থিম ঠিক করাঃ
<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>

পপ-আপের থিম ঠিক করাঃ
<div data-role="popup" id="myPopup" data-theme="b">

হেডার এবং ফুটারের বাটনের থিম ঠিক করাঃ
<div data-role="header">
<a href="#" class="ui-btn ui-btn-b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn">Search/a>
</div>

<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
<a href="#" class="ui-btn">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>

নেভিগেশন বারের থিম ঠিক করাঃ
<div data-role="footer" data-theme="b">
<h1>Insert Footer Text Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
</ul>
</div>
</div>

প্যানেলের থিম ঠিক করাঃ
<div data-role="panel" id="myPanel" data-theme="b">

কুলাপসিবল বাটনের এবং উপাদানের থিম ঠিক করাঃ
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>

লিস্টের থিম ঠিক করাঃ
<ul data-role="listview" data-theme="b">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li data-theme="a"><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>

স্পিলিট বাটনের থিম ঠিক করাঃ
<ul data-role="listview" data-split-theme="b">

কলাপসিবল লিস্টের থিম ঠিক করাঃ
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>

ফর্মের থিম ঠিক করাঃ
<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="b">

<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>

কলাপসিবল ফর্মের থিম ঠিক করাঃ
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend>

নতুন থিম যুক্ত করাঃ
জেকোয়েরি মোবাইল আপনার মোবাইল পেজের জন্য নতুন থিম যুক্ত করতে দিবে ।
সিএসএস ফাইল এডিট করে করে নতুন থিম যুক্ত করতে পারবেন । স্টাইলের ব্লকগুলো কপি করে একে একটি বর্ণের নাম দিয়ে নামকরণ করবেন এবং আপনার সুবিধামত রঙ এবং ফন্ট দিবেন ।

এইচটিএমএল ডকুমেন্টে থিম ক্লাস ব্যবহার করে নতুন স্টাইল যোগ করতে পারবেন । যেমনঃ "ui-bar-(a-z)" ক্লাস টুলবারের জন্য, "ui-body-(a-z)" কনটেন্টের জন্য এবং ui-page-theme-(a-z) পেজের জন্য ব্যবহার করতে পারেন ।
<style>
.ui-bar-f {
color: red;
background-color: yellow;
}

.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}

.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>

থিম রোলার নামে জেকোয়েরি মোবাইলের একটা থিম তৈরি করার টুলস আছে । জেকোয়েরি মোবাইল টিম এটা তৈরি করেছে । আপনি ইচ্ছা করলে এটা ব্যবহার করেও থিম আপনার মনের মত করে সাজাতে পারেন ।