Referensi JQuey Mobile Part 4: Ikon pada JQuery Mobile

Ikon jQuery

Untuk menambahkan ikon ke dalam tag <a> dan tag <button> di jQuery Mobile, dengan menggunakan class icon dan posisi icon seperti gambar di bawah (satu-satunya pengecualian adalah penggunaan tombol pada navbars, yang ditampilkan di bagian bawah):

Kode

Contoh Ikon

<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
    <a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left">Refresh Page</a>
  </div>
</div>

Refresh Page

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <ul data-role="listview" data-inset="true">   
      <li data-icon="refresh"><a href="#">Refresh Page</a></li>
      <li data-icon="search"><a href="#">Search Page</a></li>
    </ul>
  </div>
</div>

Untuk menambahkan icon pada tombol <input> buttons, gunakan attribut data-icon:

Kode	Contoh Ikon
<div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <input type="button" value="Refresh page" data-icon="refresh"> </div> </div>

Untuk menambahkan ikon tombol navbar, gunakan attribut data-icon:

Kode

Contoh Ikon

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Navbars</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="refresh">Refresh Page</a></li>
        <li><a href="#" data-icon="search">Search Page</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>My Content..</p>
  </div>

  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
  </div>

Untuk menambahkan ikon ke tombol list, gunakan attribut <li> dalam data-icon :

Kode

Contoh Ikon

div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Navbars</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="refresh">Refresh Page</a></li>
        <li><a href="#" data-icon="search">Search Page</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>My Content..</p>
  </div>

  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
</div>

Referensi JQuey Mobile Part 4: Ikon pada JQuery Mobile

Ikon jQuery

1 Response to "Referensi JQuey Mobile Part 4: Ikon pada JQuery Mobile"