jQuery Mobile 主题

jQuery Mobile 主题

jQuery Mobile এ পাঁচটি ভিন্ন শৈলী থিম প্রদান করে, "a" থেকে "e" - প্রত্যেক থিমই ভিন্ন রঙের বাটন, টপ, কনটেন্ট ব্লক ইত্যাদি নিয়ে গঠিত। jQuery Mobile-এর একটি থিম একাধিক দৃশ্যমান প্রভাব ও রঙ নিয়ে গঠিত।

অ্যাপ্লিকেশনের দেখার শৈলীকে সাজানোর জন্য data-theme অ্যাট্রিবিউট ব্যবহার করুন এবং এই অ্যাট্রিবিউটকে একটি অক্ষরের মাধ্যমে সংযোজিত করুন:}}

<div data-role="page" data-theme="a|b|c|d|e">
মূল্য বর্ণনা উদাহরণ
a ডিফল্ট। কালো পটভূমিতে সাদা লেখা。 টেস্ট
b বাদামী পটভূমিতে সাদা লেখা / গাঢ় পটভূমিতে কালো লেখা টেস্ট
c উজ্জ্বল গাঢ় পটভূমিতে কালো লেখা টেস্ট
d সাদা পটভূমিতে কালো লেখা টেস্ট
e হংসা পটভূমিতে কালো লেখা টেস্ট

সতর্কতা:আপনার পছন্দের থিমকে মিশ্রণ করুন!

ডিফল্টে, jQuery Mobile পৃষ্ঠা শিরোমণ্ডল ও পাদমণ্ডলকে "a" থিম ব্যবহার করে, শিরোমণ্ডল বিষয়কে "c" থিম (উজ্জ্বল গাঢ়) ব্যবহার করে। কিন্তু, আপনি থিমকে স্বাধীনভাবে মিশ্রণ করতে পারেন。

থিমযুক্ত পৃষ্ঠা, বিষয় ও পাদমণ্ডল

实例

<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>

亲自试一试

থিমযুক্ত ডায়লগ

实例

<a href="#pagetwo" data-rel="dialog">Go To The Themed Dialog Page</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
  <div data-role="header" data-theme="b"></div>
  <div data-role="content" data-theme="a"></div>
  <div data-role="footer" data-theme="c"></div>
</div>

亲自试一试

থিমযুক্ত বাটন

实例

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

亲自试一试

থিমযুক্ত আইকন

实例

<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>

亲自试一试

পৃষ্ঠা শিরোমণ্ডল ও পাদমণ্ডলের থিমযুক্ত বাটন

实例

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Home</a>
  <h1>Welcome To My Homepage</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Search</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Button 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Button 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Button 3</a>
</div>

亲自试一试

থিমাকৃত নেভিগেশন বার

实例

<div data-role="footer" data-theme="e">
  <h1>Insert Footer Text Here</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">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="collapsible" data-theme="b" data-content-theme="e">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the expanded content.</p>
</div>

亲自试一试

থিমাকৃত তালিকা

实例

<ul data-role="listview" data-theme="e">
  <li><a href="#">তালিকা আইটেম</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li data-theme="b"><a href="#">তালিকা আইটেম</a></li>
  <li><a href="#">তালিকা আইটেম</a></li>
</ul>

亲自试一试

থিমযুক্ত ভাগ বোতম

实例

<ul data-role="listview" data-split-theme="e">

亲自试一试

থিমযুক্ত বিক্রমিত তালিকা

实例

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">অগনেস</a></li>
  </ul>
</div>

亲自试一试

থিমযুক্ত ফর্ম

实例

<label for="name">পূর্ণ নাম:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">পছন্দের রঙ বাছাই করুন:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">রেড</option>
  <option value="green">গ্রীন</option>
  <option value="blue">ব্লু</option>
</select>

亲自试一试

থিমযুক্ত বিক্রমিত ফর্ম

实例

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>ক্লিক করুন - আমি বিক্রমিত হতে পারি!</legend>

亲自试一试

নতুন থিম যোগ

জিক্রোমোবাইল একইসঙ্গে মোবাইল পাতাকে নতুন থিম যোগ করতেও অনুমতি দেয়。

নতুন থিম যোগ কিংবা সংশোধন করতে ক্রমপ্রক্রিয়ায় CSS ফাইল (যেমন জিক্রোমোবাইল ডাউনলোড করা হয়েছে) সংশোধন করুন। কেবলমাত্র একটি শৈলীকে কপি করে হারফজাত নাম (f-z) দিয়ে ক্লাসকে নতুন নাম দিন এবং তা আপনার পছন্দের রঙ এবং ফন্টে সংশোধন করুন。

আপনি একইভাবে হাইটমল ডকুমেন্টে থিম ক্লাস ব্যবহার করে নতুন শৈলী যোগ করতেও পারেন - টুলবারকে ক্লাস ui-bar-(a-z) যোগ করেন এবং কনটেন্টকে ক্লাস ui-body-(a-z) যোগ করুন：

实例

亲自试一试