Tutorial Membuat popup Image dan Collapsibles dengan JQuery Mobile,JQuery

Okey guys kita bertemu lagi di artikel kali ini saya akan Membahas Bagaimana Membuat Animasi Popup & Efek Collapsible  Menggunakan Jquery Mobile dan JQuery,
oke , pertama kita akan berkenalan ,apa itu Jquery mobile ?jquery mobile itu adalah Javascript library dan Css Framework yang lebih tepatnya suport untuk Membuat tampilan website mobile selain itu juga jquery mobile bisa juga digunakan untuk membuat aplikasi Android…
nah kalo JQuery itu apa sih ? ya jquery sama aja Jquery adalah kumpulan code/fungsi script yang siap pakai ,,
nah kira2 singkat penjelasannya seperti itu ,,

Seperti apa sih contoh Popup photos dan Collapsibles? Berikut dibawah ini contoh hasil jadinya

jquery   Sebelum Diklik 

Popup photos setelah diklik

popup

 

Collapsible Setelah diklik ..

collaps

Oke guys diatas adalah contoh Animate Popup photos dan Collapsible ..
gimana sih cara Membuatnya … ?ikuti Tutorial berikut…!


Pertama kita harus punya File JQuery Mobile,JQuerynya Terlebih dahulu ,,
klik Link download Dibawah ini

Download the compressed, production jQuery 1.11.2   <— JQuery

Zip File: jquery.mobile-1.4.5.zip  <—JavaScript, CSS, and images

Kemudian Extract file JQuerymobile-1.4.5.zip , Kemudian ambil /copy file

jquery.mobile-1.4.5.min.css & jquery.mobile-1.4.5.min.js pada JQuery mobile yang sudah terextract, + Jquery 1.11.2.min.Js Kemudian Masukan Pada folder yang sudah anda sediakan sepertidibawah ini -->

jquerymobile

 

Kemudian Buatlah file Index.html pada editornya copy code Berikut dan silahkan Paste diantara TAG body

<body>

</body>

<div data-role="page" data-theme="a">
    <header data-role="header">
        <h2 style="font-family: 'Roboto Condensed', sans-serif;">
          JQuery Mobile
        </h2>
    </header>
    <div data-role="content">

        <div id="pageone" data-role="main" class="ui-content" align="center">
            <a href="#myPopup" data-rel="popup" data-position-to="window">
                <img src="fancy1.png" alt="Skaret View" style="width:300px;"></a>

            <div data-role="popup" id="myPopup">

                <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext       ui-btn-right">Close</a>
                <img src="fancy1.png" style="width:800px;height:400px;" alt="Skaret View">
            </div>
            <h1 align="center">Click Me Im Popup Photos</h1>
        </div>
        <div data-role="main" class="ui-content" style="width: 500px;">
            <div data-role="collapsible">
                <h1>Click me - I'm collapsible!</h1>
                <p>jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a </p>
            </div>

        </div>
    <footer data-role="footer" data-position="fixed">
        <h1 align="center">footer</h1>
    </footer>
</div>
    </div>

Waw mudahbukan …? oke guys Codingan diatas Seperti biasa Sekaligus menjadi Penutup Artikel saya kali ini…
kita akan bertemu lagi diartikel berikutnya …
sekian terimakasih telah membaca … Selamat Mencoba dan semoga Berhasil .!