Tuesday, May 7, 2013

Cara Membuat Website Dengan Jquery Mobile



Pada tutorial sebelumnya saya sudah jelaskan tentang Cara membuat website versi mobile dengan menggunakan html standar. Sekarang saya akan coba jelaskan cara membuat website mobile mengguanakan jquery mobile. Mengapa pembahasan ini penting? karena jquery mobile sangat bagus tampilannya. Sudah disesuaikan dengan perangkat mobile terbaru seperti iphone dan android. Jadi jika pengunjung situs kita akan merasa nyaman.
Baiklah begini caranya:

1.  Download dulu Jquery mobile di sini http://jquerymobile.com/download/ cari yang versi zip
2. Kemudian upload ke server / localhost anda
3. Lalu ekstrak paket zip tadi. Ubah nama foldernya menjadi jqm
4. Selanjutnya buatlah file index.php atau index.html diluar folder jqm
5. Isikan file tersebut dengan kode dibawah ini
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Shapes</title>
        <link rel="stylesheet" href="jqm/jquery.mobile-1.2.0.min.css" />
        <script src="jqm/jquery.js"></script>
        <script src="jqm/jquery.mobile-1.2.0.min.js"></script>
    </head>
    <body>
 <h1>
Hai saya adalah webiste gaya baru menggunakan jquery mobile.... 
 </h1>   
 <h2>Asik banget ya...</h2>
 <h3>Ini adalah contoh-contoh komponen jquery mobile</h3>
<fieldset class="ui-grid-a">
 <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
 <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>    
</fieldset>

<div data-role="collapsible" data-theme="b" data-content-theme="b">
   <h3>Header swatch A</h3>
   <p>I'm the collapsible content with a themed content block set to "b".</p>
</div>

<div data-role="fieldcontain" class="ui-hide-label">
 <label for="username">Username:</label>
 <input type="text" name="username" id="username" value="" placeholder="Username"/>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
    <fieldset data-role="controlgroup">
    <legend>Agree to the terms:</legend>
    <input type="checkbox" name="checkbox-agree" id="checkbox-agree" class="custom" />
    <label for="checkbox-agree">I agree</label>
    </fieldset>
</div>
    </body>
</html>
Sekarang silahkan jalankan dan lihat hasilnya.
Tutorial ini hanya pengantar saja sebagai inspirasi buat anda. Jika anda ingin mendalaminya silahkan pelajari langusng dari situsnya http://jquerymobile.com/
Semoga bermanfaat.

Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)