Ratchet – Iphone Prototipe Alternatif Jquery Mobile


saCapture

Baru beberapa hari sih belajar ini, lebih gampang dan responsif daripada Jquery Mobile. tapi ya gitu masih dalam tahap development dan berkembang jadi agak susah cari dokumentasinya. Pada dasarnya Ratchet ini sama saja dengan coding jQuery Mobile, Ratchet punya CSS dan Javascript Content juga. Kalo kalian sudah paham tentang jQuery Mobile, mudah kok mengenal Ratchet. heu

oia, jangan lupa sebelum mulai coding dengan framework ini, di download dulu. hehe.

bisa download disini – > http://maker.github.io/ratchet/ratchet.zip (41KB)

Di bawah ini gue kasih contoh beberapa coding sample dari ratchet🙂

1. Simple Header dengan 2 Button custom.

Capqture

<header class="bar-title">
<a class="button-prev" href="#"> Previous </a>
<h1 class="title">Title</h1>
<a class="button-next" href="#"> Next </a>
</header>

2. Tab Bar

ratchet

ratchet

Icon harus berukuran sekitar 24px by 18px. The gradient on an icon starts with pure white and goes to #e5e5e5 at the bottom.

<nav class="bar-tab">
  <ul class="tab-inner">
    <li class="tab-item active">
      <a href="#">
        <img class="tab-icon" src="img/icon-home.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
    <li class="tab-item">
      <a href="#">
        <img class="tab-icon" src="img/icon-profile.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
    <li class="tab-item">
      <a href="#">
        <img class="tab-icon" src="img/icon-messages.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
    <li class="tab-item">
      <a href="#">
        <img class="tab-icon" src="img/icon-hamburger.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
    <li class="tab-item">
      <a href="#">
        <img class="tab-icon" src="img/icon-settings.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
  </ul>
</nav>

3. List dengan Arrow

Ratchet list chevron

Ratchet list chevron

Chevrons Arrow di buat dari CSS3, jadi tidak menggunakan gambar. Biasanya ini di gunakan untuk list yang berisi link.

<ul class="list">
<li>
<a href="#">
List item 1
<span class="chevron"></span>
</a>
</li>
<li>
<a href="#">
List item 2
<span class="chevron"></span>
</a>
</li>
<li>
<a href="#">
List item 3
<span class="chevron"></span>
</a>
</li>
</ul>

Sebenernya masih banyak lagi yang mau di tulis, berhubung ini udah mau jam 5, udahan dulu yak. kalo mau baca lebih lengkap langsung ke home nya si ratchet aja disini http://maker.github.io/ratchet/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s