Rabu, 04 Desember 2013

JQUERY MOBILE



MAKALAH
jQUERY Mobile Smart
 

Disusun untuk memenuhi Tugas TIK
Dosen Pengampu : Pak Lutfi
Disusun oleh :

Nama                    : Ali Haydar
Fak./Prodi             : FIP/Kurikulum Teknologi Pendidikan
NIM                      : 1102411024
E-mail                   : tp11024.haydar@gmail.com

Kurikulum Teknologi Pendidikan
FAKULTAS ILMU PENDIDIKAN
UNIVERSITAS NEGERI SEMARANG


----------------------------------------------------------------------------------------------------------------------



PRAKATA
Assalamu’alaikum wr.wb.
Segala puji syukur kami panjatkan kehadirat Allah SWT yang telah memberikan rahmat dan hidayahNya sehingga pada akhirnya saya dapat menyelesaikan tugas pembuatan Makalah TIK ini dengan baik.
Pembuatan tugas ini dimaksudkan untuk memenuhi tugas TIK yang diberikan oleh Bapak Lutfi selaku dosen dengan judul JQUERY.
Saya menyadari bahwa dalam penyusunan tugas ini tidak lepas dari kekurangan dan kesalahan. Maka dengan segala kerendahan saya mengharapkan kritik dan saran yang membangun kesempurnaan pembuatan tugas TIK ini.
Bila ada susunan isi maupun penulisan yang tidak sempurna saya mohon maaf. Semoga makalah ini bermanfaat.Amien.
Wassalamualaikum wr.wb

Semarang, 18 november  2013
Penyusun,


Ali Haydar






 ---------------------------------------------------------------------------------------------------





Daftar Isi
HALAMAN JUDUL................................................................................................................ l
PRAKATA.................................................................................................................. ll
DAFTAR ISI
BAB 1 PENDAHULUAN...................................................................................................... lll
LATAR BELAKANG........................................................................................ 1
TUJUAN.............................................................................................................. 2
BAB 2 PEMBAHASAN................................................................................................... lV
PENGERTIAN JQUERY.....................................................................................

Perbedaan javascript dan jquery  ..................................................................................

JQUERY vs Flash...............................................................................................

            Implementasi jQuery  ..................................................................................................

BAB 3 PEMBAHASAN........................................................................................................V

            JQUERY MOBILE FRAMEWORK..........................................................................          Teknik jQuery untuk Mengoptimalkan 'Coding' ........................................................

Bab 4  PENUTUP.......................................................................................................
KESIMPULAN.................................................................................................
SARAN............................................................................................................
DAFTAR PUSTAKA





 -----------------------------------------------------------------------------------------------------------



BAB I
PENDAHULUAN

LATAR BELAKANG
Sudah tidak asing lagi mengenal yang namanya JQUERY di bidang teknologi. JQuery adalah librari JavaScript yang memungkinkan kita untuk membuat program web pada suatu halaman web, tanpa harus secara eksplisit kita menambahkan event atau pun properti pada halaman web tersebut. Tujuannya adalah untuk membuatnya lebih mudah untuk menggunakan JavaScript pada website. JQuery adalah librari JavaScript yang memungkinkan kita untuk membuat program web pada suatu halaman web, tanpa harus secara eksplisit kita menambahkan event atau pun properti pada halaman web tersebut.
JQuery dikembangkan pertama kali oleh John Resig,Tapi Sekarang ini JQuery dikembangkan oleh team developer yang dipimpin oleh Dave Metvin. Dipakai oleh lebih dari 55% dari 10.000 website yang paling sering dikunjungi. JQuery menjadi Library Javascript yang paling popular Sekarang.
Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio  untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka.
Kemampuan JQUERY yaitu mempermudah akses dan manipulasi elemen tertentu pada dokumen dan Mempermudah modifikasi/perubahan tampilan halaman web.
Adapun kemiripan antara Jquery dan Flash. Flash memakai teknologi kompilasi, sedangkan jQuery memakai scripting javascript. JQuery merupakan script animasi yang dikembangkan dari javascript.
Strategy jQuery mobile dapat diringkas dengan simple bahwa: Sebuah system user interface bekerja mulus di seluruh device platform mobile yang popular, membangun di atas kekokohan jQuery dan fondasi jQuery UI. Kode ringan dari jQuery mobile ini dibangun dengan peningkatan progresif, dan mempunyai thema desain yang flexible dan mudah.
Framework ini meliputi sistem navigasi Ajax yang membawa transisi animasi halaman dan sejumlah set UI widget seperti: page, dialog, toolbar, listview, button dengan icon, dan masih banyak lagi.


TUJUAN
Makalah ini disusun dengan tujuan sebagai sarana untuk mengikuti pesatnya perkembangan teknologi komputer di masa sekarang ini, salah satunya di Pemrogaman JQuery yang untuk membuatnya lebih mudah untuk menggunakan JavaScript pada website Anda. sekarang semakin banyak diminati. Selain itu, tujuan disusunnya  makalah ini adalah untuk memenuhi tugas mata kuliah TIK, dikarenakan Penulis masih berstatus sebagai mahasiswa Jurusan Teknologi Pendidikan FIP Universitas Negeri Semarang.







 ------------------------------------------------------------------------------------------------------------------------





BAB 2
PEMBAHASAN

A.    PENGERTIAN JQUERY
JQuery adalah librari JavaScript yang memungkinkan kita untuk membuat program web pada suatu halaman web, tanpa harus secara eksplisit kita menambahkan event atau pun properti pada halaman web tersebut.
Dengan JQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode JavaScript yang terlihat langsung. Teknik pemrograman web seperti ini disebut sebagai unobstrusive JavaScript programming.
JQuery merupakan salah satu librari yang membuat program web di sisi klien, tidak terlihat sebagai program JavaScript biasa, yang harus secara eksplisit disisipkan pada dokumen web. Pada teknik pemrograman sisi klien dengan menggunakan JavaScript biasa, setiap elemen yang akan memiliki event, akan secara eksplisit terlihat ada event yang dilekatkan pada elemen tersebut.
JQuery dikembangkan pertama kali oleh John Resig, yang dibuat lebih ramping dari librari Prototype yang menjadi inspirasi dari libarari JQuery ini. Secara pemrograman, JQuery memiliki kemiripan seperti Prototype.JQuery, merupakan librari yang sangat ramping, core dari librari ini dalam keadaan terkompres hanya berukuran sekitar 19KB.
Tapi Sekarang ini JQuery dikembangkan oleh team developer yang dipimpin oleh Dave Metvin. Dipakai oleh lebih dari 55% dari 10.000 website yang paling sering dikunjungi. JQuery menjadi Library Javascript yang paling popular Sekarang.
Script JQuery  dibuat untuk memudahkan pengaturan document seperti menyeleksi object dengan element DOM dan membuat aplikasi dengan AJAX.  Jquery juga menyediakan layanan atau support  para developers untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga  memungkinkan para developer website membuat website lebih interaktif dengan animasi, efek – efek, tema dan widget.

Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio  untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka.

Lisensi
Lisensi JQuery adalah open source yang bisa diperoleh secara cuma-cuma, dan dapat digunakan untuk kepentingan komersial, tanpa ada tuntutan untuk membayar kepada pembuat JQuery. Lisensi opensource dari JQuery adalah MIT dan LGPL.

1)      Kemampuan JQUERY
berikut ini akan dijabarkan lebih lengkap lagi mengenai kemampuan yang dimiliki jQuery, diantaranya:
1.   mempermudah akses dan manipulasi elemen tertentu pada dokumen
biasanya diperlukan baris program yang cukup panjang untuk mengakses suatu elemen dokumen. Namun, jQuery dapat melakukannya hanya dalam beberapa baris program saja, karena jQuery memiliki selector yang sangan efisien untuk mengakses suatu elemen tertentu pada dokumen yang selanjutnya bisa dimanipulasi sesuai dengan keinginan kita.
2.   Mempermudah modifikasi/perubahan tampilan halaman web
Biasanya untuk memodifikasi tampilan halamanweb digunakan CSS. Permasalahannya, CSS sangat dipengaruhi oleh web browser yang digunakan, sehingga sering terjadi halaman wweb yang dibuat sudah rapid an bagus tampilannya di browser Mozilla, namun ketika ditampilkan di opera menjadi berantakan. Namun, jQuery dapat menyesuaikan style CSS pada semua browser, sehingga permasalahan tersebut dapat dihindari.

2)      PERBEDAAN JAVASCRIPT DAN JQUERY 
Perbedaan antara javascript dan jquery sering menimbulkan pertanyaan, dari segi penulisan maupun penggunaanya. Berikut ini saya akan berbagi tentang apa Perbedaan javascript dan jquery tersebut.
a.      Perbedaan dari definisi javascript dan jquery
Javascript adalah bahasa pemrograman yang dirancang untuk berjalan di lingkungan klien yang dikombinasikan dengan dokumen HTML. Javascript dijalankan dengan bantuan browser sehingga dapat melakukan interaksi dengan user, melakukan kontrol browser dan memanipulasi dokumen web saat ditampilkan.
Sedangkan jquery adalah komponen/librari/framework yang dibuat dari javascript dengan tujuan memudahkan seorang programmer dalam menggunakan fungsi-fungsi yang lebih rumit. Dengan jquery, seorang programmer bisa lebih leluasa dan mudah melakukan kontrol/manipulasi halaman web. Oleh karena kemudahan tersebut jquery memiliki semboyan "write less, do more" yang bisa kita artikan dengan sedikit menulis kode tapi dapat melakukan banyak hal.
Jquery dibangun dengan berorientasi objek sehingga akan lebih optimal dan memiliki kemampuan yang lebih luas untuk menciptakan serta memanipulasi halaman web yang dikirimkan ke browser pengguna.
Mari kita lihat bagaimana penulisan javascript dan javascript untuk melakukan sebuah manipulasi background dokumen html berikut :
Javascript 
<script language="javascript">
function changeBackground(color)
{
document.body.style.background = color;
}
onload="changeBackground('red');"
</script>
Jquery 
<script>
$('body').css('background', '#ccc');
</script>
Dari script diatas bisa anda lihat, bahwa jquery lebih bepusat pada objek sehingga cara melakukan perubahannya akan lebih sederhana.



JQUERY vs FLASH

Dalam membuat animasi di website, kita dapat membuat dengan memakai Flash atau jQuery. Flash memakai teknologi kompilasi, sedangkan jQuery memakai scripting javascript. Ada beberapa web designer memakai Flash, beberapa web designer lain memakai jquery. Manakah yang lebih baik, animasi flash atau jquery? Berikut akan diberikan analisanya.
Flash merupakan teknologi yang dikembangkan oleh adobe. Untuk bisa membuat animasi Flash kita perlu menginstall program di dalam komputer kita. Dalam animasi Flash, source code dan hasilnya berbeda file, sehingga setiap kali ada perubahan animasi, kita harus mengedit melalui program yang diinstall di komputer kita dan kemudian diupload ulang. Flash sudah dikenal web designer sejak lama, dokumentasi dan tutorialnya mudah didapatkan di mana-mana seperti di web maupun toko-toko buku.
JQuery merupakan script animasi yang dikembangkan dari javascript. Jika kita membuat animasi secara langsung dengan memakai javascript akan sangat memakan waktu. Dengan memakai library jQuery, proses pembuatan animasi akan lebih cepat. JQuery masih baru di kalangan web designer, sehingga dokumentasi dan tutorialnya lebih sedikit dibandingkan dengan flash. Untuk membuat animasi dengan jQuery tidak diperlukan software khusus, cukup text editor saja. Untuk mengujinya memakai browser Firefox atau Internet Explorer. Karena berbasis script, kita bisa merancang untuk mengupdate animasi melalui CMS Jquery terus berkembang seiring banyak plugin-plugin yang dibuat web developer-web developer dari penjuru dunia.
Pada saat pengunjung browsing ke website yang ada animasi Flashnya, pada browser harus ada plugin yang diinstall supaya Flashnya bisa tampil. Pada animasi jQuery tidak perlu tambahan plugin. Dengan demikian dari segi fleksibilitas, jQuery lebih fleksibel karena browser yang masih standard dapat menjalankannya. Ini terlihat sekali pada browser yang diinstall pada perangkat mobile seperti handphone, Opera 10 Mobile dapat menjalankan animasi jQuery, tetapi tidak dapat menjalankan animasi Flash.
Saat ini perkembangan animasi website lebih cenderung ke arah jQuery karena kemudahan editingnya, kemudahan mengubah animasi melalui CMS, kefleksibilitas dijalankan di berbagai browser tanpa membutuhkan plugin tambahan, dan makin bertambahnya plugin-plugin jQuery yang mudah kita dapatkan di internet.

IMPLEMENTASI JQUERY DI INDONESIA
Setelah melakukan riset mendalam, maka PT Proweb Indonesia memutuskan mengimplementasikan jQuery. Keputusan ini diambil untuk melayani kebutuhan website yang lebih interaktif dalam waktu yang cepat seiring dengan perkembangan teknologi.
Dalam membuat website, web developer mempunyai pilihan untuk mengembangkan sendiri script-scriptnya atau memakai open source technology. PT Proweb Indonesia memutuskan mendevelop sendiri bagian yang critical dalam hal ini CMS(Content Management System), sedangkan di bagian client script memakai jQuery dan script hasil karya sendiri.
Untuk CMS, PT Proweb Indonesia mengembangkan sendiri CMSnya karena alasan keamanan dan flexibilitas . Sedangkan untuk sisi tampilan, memakai jQuery dengan pertimbangan kecepatan development. Meskipun demikian tetap ada script-script yang memakai hasil karya sendiri seperti image animation, tab, menu, show hide div dan lain-lain. Di dalam memakai jQuery ini team PT Proweb Indonesia akan mempelajari apa yang telah dikembangkan, kemudian membuat riset untuk kemungkinan membuat script yang lebih efisien. Jika berhasil membuat script yang lebih efisien, maka script yang dipakai adalah scrip hasil karya sendiri. 




JQUERY MOBILE FRAMEWORK
 
TAGLINE
Optimalkan sentuhan pada  web framework untuk smartphone dan tablet.

SEKILAS
Strategy jQuery mobile dapat diringkas dengan simple bahwa: Sebuah system user interface bekerja mulus di seluruh device platform mobile yang popular, membangun di atas kekokohan jQuery dan fondasi jQuery UI. Kode ringan dari jQuery mobile ini dibangun dengan peningkatan progresif, dan mempunyai thema desain yang flexible dan mudah.
Framework ini meliputi sistem navigasi Ajax yang membawa transisi animasi halaman dan sejumlah set UI widget seperti: page, dialog, toolbar, listview, button dengan icon, dan masih banyak lagi.
jQuery mobile dibuat mudah untuk dipelajari dengan markup-based system yang simple untuk menerapkan behaviour dan thema. Untuk developer yang lebih maju, ada sebuah API yang berharga dari opsi konfigurasi global, event, dan cara untuk menerapkan scripting, membangkitkan page dinamik, dan bahkan membangun aplikasi native dengan alat seperti PhoneGap.
John Resig merilis jQuery pada bulan Januari 2006 di BarCamp NYC dan telah digunakan oleh lebih dari 52% dari 10.000 situs yang paling banyak dikunjungi. jQuery ini bersifat gratis, open source, dan berada dibawah lisensi dari MIT atau GNU General Public.
FEATURES
Fitur-fitur utama dari jQuery Mobile yaitu:
  • Built on jQuery core, supaya syntax jQuery konsisten dan familiar dan memanfaatkan jQuery UI code dan pattern
  • Compatible dengan semua mobile, tablet, e-reader & desktop platforms – IOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, dan semua browser modern dinilai dengan tingkat dukungan
  • Ukuran yang ringan, dan dependensi gambar yang minimal untuk kecepatan.
  • Modular arsitektur, untuk meng-create custom builds yang dioptimalkan hanya fitur yang dibutuhkan untuk aplikasi tertentu (particular application)
  • HTML5 Markup-driven, konfigurasi halaman untuk pengembangan yang cepat dan scripting yang diperlukan minimal
  • Progressive enhancement, membawa konten inti dan fungsionalitas untuk semua mobile, tablet dan desktop platform dan menginstal aplikasi seperti pengalaman pada platform mobile baru.
Lalu apa saja yang dapat dilakukan oleh jQuery Mobile? Berikut adalah kelebihan-kelebihan yang dimiliki oleh jQuery Mobile.
  • jQuery Mobile memudahkan pengembangan user-interface untuk mobile web apps.
  • The interface configuration is markup-driven, yang berarti Anda dapat membuat seluruh aplikasi antarmuka dasar dalam HTML, tanpa perlu menulis satu baris JavaScript.
  • Menyediakan serangkaian custom events baru, mendeteksi events mobile device dan touchscreen seperti  tap, tap-and-hold, swipe, and orientation change (i.e. rotating the device).
  • Memastikan bahwauser-interfcae bekerja pada web browser.
  • Menggunakan theme untuk memudahkan untuk costumized tampilan aplikasi Anda.
SHOWCASE
Dynamic collapsible
Demo ini menunjukkan bagaimana Anda dapat secara dinamis menambahkan dilipat untuk satu set lipatan (akordeon). Hal ini juga menunjukkan bagaimana Anda dapat menggunakan membuka dan menutup acara untuk secara dinamis membuka atau menutup lipatan.
Add : untuk menambah widget
Expand last : untuk membuka lipatan terakhir pada widget
Collapse last : untuk menutup lipatan terakhir pada widget

Dynamic controlgroup
Demo ini menunjukkan bagaimana Anda dinamis dapat membuat perubahan controlgroup
Add item                                : untuk memilih item yang akan ditampilkan, sebelum atau sesudahnya
Widget type                         : jenis-jenis dari widget yang ingin ditampilkan
Action                                     : aksi yang akan dilakukan jika kita mengklik widget tersebut
Switch orientation             : tampilan yang diinginkan apakah vertical atau horizontal
Grid ListView
Sebuah ListView biasa pada smartphone, tapi grid pada tablet dan layar yang lebih besar? Demo ini menunjukkan Anda bagaimana Anda dapat melakukannya dengan custom CSS.
Memulai 
Buat ListView dari unordered list. Untuk demo ini kami menggunakan ListView inset untuk menunjukkan bagaimana Anda dapat menerapkan sudut styling ubin juga.
Dalam demo ini ada dua breakpoint. Pada breakpoint pertama kami bertukar dari tata letak ditumpuk teratur pada layout grid tiga kolom dengan ubin. Pada kedua kita beralih 3-4 kolom.
Daftar item memiliki thumbail a. Dalam layout grid yang akan mendapatkan ukuran yang sama seperti ubin. Salah satu item daftar tidak memegang gambar untuk menunjukkan bagaimana Anda dapat mengambil keuntungan dari kelas ui-li-has-thumb untuk menyesuaikan gaya.
Listview Autodivider Linkbar 
Demo ini menunjukkan ekstensi Linkbar yang menambahkan diposisikan bar tetap di sebelah kanan layar yang memudahkan untuk jangkar ke bagian tertentu dari ListView.Lihat sumber untuk melihat cara kerjanya.
Pemilih autodivider khusus
Secara default plugin autodividers akan menggunakan karakter pertama dari item daftar sebagai pemilih. Opsi autodividersSelector memungkinkan Anda untuk mengembalikan string yang berbeda. Dalam contoh ini kita menunjukkan cara untuk mengatur pemilih autodividers dari “0-9″ untuk daftar item yang berisi nomor sehingga Anda dapat mengelompokkan mereka.
jQuery Mobile, Backbone.js dan Require.js
jQuery Mobile menyediakan antarmuka pengguna berbasis HTML5 untuk semua platform perangkat mobile populer, tetapi tidak mempengaruhi bagaimana Anda mengatur dan struktur aplikasi Anda JavaScript. Banyak pengguna Handphone jQuery beralih ke berbagai perpustakaan lain pihak ketiga yang populer, termasuk * kerangka MV dan alat manajemen ketergantungan, untuk membantu menyusun kode mereka.
Backbone dan Require.js
Backbone.js dan Require.js adalah dua yang paling populer perpustakaan pihak ketiga yang digunakan dengan jQuery Mobile untuk memberikan yang kaya JavaScript teknologi stack untuk pengembang.
Backbone.js adalah sisi klien MV * JavaScript kerangka besar yang menyediakan struktur untuk aplikasi JavaScript dengan menyediakan View, Model, Koleksi, Router, Acara dan objek kelas.
Require.js melayani tujuan yang berbeda dibandingkan beberapa Backbone.js.Require.js adalah AMD (Asynchronous Modul Definition) skrip loader yang asynchronous beban Anda JavaScript untuk meningkatkan kinerja pembukaan laman, sementara juga membantu dengan skrip ketergantungan managagement dan memungkinkan Anda untuk mengatur Anda JavaScript ke modul diri berisi (file).
Meskipun ada sejumlah bunga tinggi pengembang dengan menggunakan jQuery Mobile, Backbone.js, dan Require.js bersama-sama, ada penghalang tinggi masuk.Banyak pengguna yang bingung tentang bagaimana menggunakan objek kelas Router Backbone.js dengan routing sistem jQuery Mobile.
Konfigurasi Handphone jQuery 
Teknik yang digunakan dalam contoh ini halaman tidak berarti satu-satunya teknik yang tersedia, tetapi itu adalah salah satu yang paling elegan. The Backbone.js router digunakan secara eksklusif untuk menangani semua peristiwa hashchange, dan jQuery Mobile $. Mobile.changePage () metode yang digunakan untuk pemrograman mengubah halaman.
Berikut adalah dua sifat Ponsel internal yang jQuery yang dimatikan untuk membiarkan hal ini terjadi:
$. Mobile.linkBindingEnabled
jQuery Mobile akan secara otomatis mengikat klik pada tag anchor dalam dokumen Anda. Menyetel opsi ini ke false akan mencegah semua klik anchor handling termasuk penambahan tombol negara aktif dan kabur tautan alternatif. ini hanya harus digunakan ketika mencoba untuk mendelegasikan pengelolaan klik ke perpustakaan lain atau kode kustom.
$. Mobile.hashListeningEnabled
jQuery Mobile akan otomatis mendengarkan dan menangani perubahan location.hash tersebut. Menonaktifkan ini akan mencegah jQuery Mobile dari penanganan perubahan hash, yang memungkinkan Anda untuk menangani mereka sendiri atau menggunakan sederhana deep-link dalam sebuah dokumen yang gulir ke id tertentu.
Contoh kode halaman 
Untuk menggambarkan bagaimana internal sifat jQuery Handphone di atas dimatikan, mari kita periksa kode halaman contoh kita.
Di dalam bagian kepala halaman index.html kami, pertama-tama kita termasuk perpustakaan JavaScript Require.js dan mengatur atribut data utama tag script kami ke file JavaScript yang kita inginkan Require.js untuk memasukkan pada halaman pertama (ini File akan berisi semua konfigurasi Require.js kami). Dalam contoh ini, kita mengatakan Require.js untuk melihat ke dalam folder js dan kemudian beban mobile.js.
<head> <script src=”js/libs/require.js” data-main=”js/mobile”> </ script> </ head>
Jika kita melihat ke dalam mobile.js, kita akan menemukan bahwa $. Mobile.linkBindingEnabled dan $. Mobile.hashListeningEnabled jQuery atribut Ponsel diatur ke false.
Source code :
// Sets the require.js configuration for your application.
require.config( {
// 3rd party script alias names (Easier to type “jquery” than “libs/jquery-1.8.3.min”)
paths: {
// Core Libraries
“jquery”: “libs/jquery”,
“jquerymobile”: “libs/jquerymobile”,
“underscore”: “libs/lodash”,
“backbone”: “libs/backbone”
// Sets the configuration for your third party scripts that are not AMD compatible
shim: {
“backbone”: {
“deps”: [ "underscore", "jquery" ],
“exports”: “Backbone”  //attaches “Backbone” to the window object
} // end Shim Configuration
// Includes File Dependencies
require([ "jquery","backbone","routers/mobileRouter","jquerymobile" ], function( $, Backbone, Mobile ) {
// Prevents all anchor click handling
$.mobile.linkBindingEnabled = false;
// Disabling this will prevent jQuery Mobile from handling hash changes
$.mobile.hashListeningEnabled = false;
// Instantiates a new Backbone.js Mobile Router
this.router = new Mobile();
Selanjutnya, dalam kelas obyek Router Backbone.js, kita dapat menanggapi peristiwa haschange dan manual memanggil jQuery Handphone metode changePage (). Di bawah ini adalah potongan kecil mobileRouter.js.
// Backbone.js Routes
        routes: {
            // When there is no hash bang on the url, the home method is called
            "": "home",
            // When #category? is on the url, the category method is called
            "category?:type": "category"
        },
        // Home method
        home: function() {
            // Programatically changes to the categories page
            $.mobile.changePage( "#categories" , { reverse: false, changeHash: false } );
        }
Contoh Halaman menggambarkan bagaimana untuk membuat Mobile ListView jQuery yang diisi dengan data JSON dinamis asynchronous. Jangan ragu untuk melihat lebih dalam ke kode sumber untuk melihat bagaimana Require.js dan Backbone.js sedang digunakan.

Styling Panel
Dalam demo ini kita menunjukkan cara untuk:
1. Mengubah lebar panel.
2. Buat navmenu panel dengan listviews dan collapsibles.
3. Mengubah bayangan menu mengungkapkan sehingga di atas daftar item.
4. Mengatur gambar latar belakang untuk halaman yang berisi panel.
5. Berikan halaman layout responsif dengan CSS kolom.
Buka panel menggeser 
Secara default panel dapat ditutup dengan menggesekkan ke arah panel terbuka. Dalam demo ini kita menunjukkan bagaimana Anda juga dapat membuka panel dengan menggeser. Ini bukan bagian dari kerangka kerja, karena dalam beberapa kasus panel kita tidak akan tahu mana yang untuk membuka.
Halaman demo memiliki dua menu, satu di setiap sisi. Keduanya dapat dibuka dengan menggeser atau dengan tombol di header.
Menggeser ke kanan
Menggeser ke kiri
Dinamis popup
Demo ini menunjukkan bagaimana Anda dapat secara dinamis membuat popup. Popup berisi gambar yang berarti kita harus mengatur lebar gambar dan tinggi untuk memastikan popup mendapatkan ukuran yang tepat dan posisi. Pada sisi klien kita hanya bisa mendapatkan ukuran ketika gambar telah dimuat dalam DOM. Dalam demo ini kita menggunakan event beban, tetapi dengan mundur karena memiliki beberapa keberatan (lihat beban () -. JQuery API).
Klik gambar BMW :
Popup dengan panah
Klik di manapun di alun-alun di bawah ini untuk menampilkan pop-up arrowed.
Dot A akan muncul untuk menunjukkan Anda di mana Anda telah mengklik.
Tabel Reflow: gaya khusus
Gaya khusus untuk tabel reflow dengan lebar ditumpuk.
Tabel Reflow: kelompok Heading
Tabel ini akan menumpuk data ke label pasangan nilai dengan lebar sempit. Judul kolom dikelompokkan ditampilkan sebagai subpos antara set data. Layar harus lebar sebelum itu menunjukkan format tabel sehingga permintaan media diset ke 72em (1.152 px). Ada gaya kustom untuk baris pertama untuk mengatur latar belakang abu-abu gelap dengan teks putih dan menyembunyikan label sehingga terlihat lebih seperti pembagi bagian.
Reflow: Metode Refresh
Tabel Kolom beralih: Pilihan Kustomisasi
Tabel ini menggambarkan pilihan kustomisasi standar untuk meja beralih kolom. Tabel memiliki tema kustom dan teks label untuk tombol pemilih kolom, dan satu set tema pada popup.
Latar belakang meja bertema dengan menambahkan class = “ui-body-d” pada elemen tabel. Header tabel diberikan penampilan bertema dengan menambahkan class = “ui-bar-d” untuk baris header. Baris bergaris diciptakan dengan menambahkan kelas meja-stripe ke elemen tabel.
Tabel Kolom beralih: kelompok Heading
Kolom data akan ditampilkan dan toggle sebagai set di bawah setiap dikelompokkan menuju setiap kuartal keuangan. Dalam contoh ini, total ditunjukkan dengan lebar sempit, maka perempat lebih historis diungkapkan dengan lebar yang lebih luas dengan menetapkan prioritas pada kolom.

Kolom beralih: Metode refresh
Ekstensi slider tooltip
Swipe untuk menavigasi
Demo ini menunjukkan bagaimana Anda dapat menggunakan event menggesek untuk menavigasi antara halaman. Kami menggunakan file HTML untuk setiap halaman. Di sini Anda dapat melihat JavaScript dan CSS sumber. Pada setiap halaman demo Anda dapat melihat markup halaman juga.
Swipe untuk menghapus item daftar
Demo ini menunjukkan bagaimana Anda dapat menghapus item daftar dengan menggesekkan kiri atau kanan. Untuk perangkat touchscreen tanpa ada tombol delete. Demo ini juga berisi popup konfirmasi gaya kustom.
DOWNLOAD
Untuk membuat User Interface yang kita inginkan, kita dapat menggunakan builder yang diberikan oleh jquery mobile. Pembangun akan menghasilkan JavaScript yang kustom dan kedua tema stylesheet penuh dan struktur hanya untuk penggunaan produksi. Kita dapat menggunakan builder yang di sediakan dari web jquery mobile.
Untuk menggunakannya, pertama kita harus download bulder yang telah disediakan di weB jQUERY MOBLE.COM. Atau jika kita tidak ingin download, kita dapat memilih pilihan yang ada pada tampilan builder di web. File untuk builder berukuran 6,74 MB dan bertipe rar, sehingga perlu mengekstrak dahulu untuk memulainya.
PROSEDUR PENGGUNAAN
jQuery Mobile adalah kerangka UI bersifat touch-friendly dan dibangun di Core jQuery yang bekerja di semua ponsel populer, tablet dan platform desktop.
Perkenalan
jQuery Mobile adalah kerangka kerja antarmuka pengguna berdasarkan jQuery yang bekerja di semua ponsel populer, tablet, e-reader, dan platform desktop. Dibangun dengan aksesibilitas dan akses universal dalam pikiran, kita mengikuti peningkatan progresif dan desain web (RWD) prinsip responsif. HTML5 konfigurasi Markup-driven memudahkan untuk belajar, tetapi API yang kuat membuatnya mudah untuk menyesuaikan mendalam perpustakaan.
Halaman & Dialog
Sebuah halaman di jQuery Handphone terdiri dari elemen dengan data-role = “halaman” atribut. Dalam “halaman” kontainer, setiap valid HTML markup dapat digunakan, tetapi untuk halaman yang khas di jQuery Mobile, anak-anak langsung dari “halaman” adalah divs dengan data-peran “header”, “isi”, dan “footer” . Kebutuhan dasar untuk halaman hanya pembungkus halaman untuk mendukung sistem navigasi, sisanya adalah opsional.
Sebuah halaman dapat ditata sebagai dialog yang membuat halaman terlihat seperti itu gaya overlay modal. Untuk memberikan halaman standar penampilan modal dialog, menambahkan data-rel = “dialog” atribut link. Transisi juga dapat diatur pada link dialog.
AJAX Navigasi & Transisi
jQuery Mobile termasuk sistem navigasi AJAX untuk mendukung kaya set transisi halaman animasi dengan secara otomatis ‘pembajakan’ link standar dan pengiriman form dan mengubahnya menjadi permintaan AJAX. Tombol kembali didukung penuh dan ada fitur untuk prefetch & tembolok, dinamis menyuntikkan, dan halaman naskah untuk kasus penggunaan lanjutan.
Setiap kali link diklik atau formulir dikirimkan, acara yang secara otomatis dicegat oleh sistem nav AJAX dan digunakan untuk mengeluarkan permintaan AJAX didasarkan pada href atau bentuk tindakan bukannya reload halaman. Sementara kerangka menunggu respon AJAX, overlay loader akan ditampilkan.
Ketika beban halaman yang diminta, jQuery Handphone mem-parsing dokumen untuk sebuah elemen dengan data-role = “halaman” atribut dan menyisipkan kode ke dalam DOM dari halaman asli. Selanjutnya, setiap widget di halaman masuk yang ditingkatkan untuk menerapkan semua gaya dan perilaku. Sisa dari halaman masuk dibuang sehingga setiap script, stylesheet atau informasi lain tidak akan disertakan. Kerangka tersebut juga akan mencatat judul halaman masuk untuk memperbarui judul ketika halaman baru dialihkan ke tampilan.
Sekarang bahwa halaman yang diminta dalam DOM dan ditingkatkan, itu animasi ke tampilan dengan transisi. Secara default, kerangka menerapkan transisi memudar.Untuk mengatur efek transisi kustom, menambahkan atribut data transisi ke link.
Content & Widgets
Di dalam kontainer konten Anda, Anda dapat menambahkan elemen HTML standar – judul, daftar, paragraf, dll Anda dapat menulis gaya kustom Anda sendiri untuk membuat tata letak kustom dengan menambahkan stylesheet tambahan untuk kepala setelah jQuery Handphone stylesheet.
jQuery Mobile termasuk berbagai sentuhan-ramah widget UI: tombol, elemen bentuk, collapsibles, akordion, popup, dialog, tabel responsif, dan banyak lagi. Untuk performa terbaik, gunakan download pembangun untuk memilih komponen yang Anda butuhkan.
Tombol
Ada beberapa cara untuk membuat tombol, tapi mari kita mengubah link menjadi sebuah tombol sehingga mudah untuk mengklik. Hanya mulai dengan link dan menambahkan data-role = “tombol” atribut untuk itu. Anda dapat menambahkan ikon dengan atribut data-icon dan opsional mengatur posisinya dengan atribut data-iconpos.
Contoh source code:
<a href=”#” data-role=”button” data-icon=”star”>Star button</a>
Listviews 
jQuery Mobile termasuk beragam rangkaian listviews umum yang dikodekan sebagai daftar dengan data-role = “ListView” tambahnya. Berikut adalah daftar link sederhana yang memiliki peran ListView. Kita akan membuat ini terlihat seperti sebuah modul inset dengan menambahkan data-inset = “true” atribut dan kami menambahkan filter pencarian dinamis dengan data-filter = “true”.
Elemen form
Kerangka kerja ini berisi satu set lengkap bentuk elemen yang secara otomatis ditambahkan ke dalam widget gaya sentuhan-friendly. Berikut adalah slider dibuat dengan jenis input HTML5 baru dari jangkauan, tidak ada data-peran yang diperlukan.Pastikan untuk membungkus ini dalam bentuk elemen dan selalu benar mengasosiasikan label dengan setiap elemen form.
Desain Responsif
jQuery Mobile telah selalu dirancang untuk bekerja dalam desain web responsif (RWD) konteks dan docs dan bentuk memiliki elemen responsif beberapa dari awal. Semua widget yang dibangun menjadi 100% fleksibel lebar agar sesuai dengan mudah di dalam sistem tata letak responsif Anda memilih untuk membangun.
Library juga mencakup sejumlah widget responsif seperti grid responsif, tabel reflow dan tabel pemilih kolom, dan panel geser.
Tema
jQuery Mobile memiliki kerangka tema yang kuat yang mendukung hingga 26 set toolbar, isi dan warna tombol, yang disebut “swatch”. Hanya menambahkan data-tema = “e” atribut ke salah satu widget pada halaman ini: halaman, header, daftar, masukan untuk slider, atau tombol untuk menyalakannya kuning. Coba carikan huruf yang berbeda dari “a” untuk “e” dalam tema default untuk mencampur dan mencocokkan swatch.
Trik keren: menambahkan swatch tema ke halaman dan melihat bagaimana semua widget dalam konten secara otomatis akan mewarisi tema (header dan footer tidak mewarisi, mereka default swatch “a”).
Ketika Anda siap untuk membangun tema kustom, gunakan ThemeRoller untuk drag dan drop, kemudian men-download tema kustom.


TEKNIK JQUERY UNTUK OPTIMALISASI  ‘CODING’
Kemudahan jQuery dengan Tagline-nya "write less, do more" telah membuat para web developer untuk menggunakan salah satu Framework Javascript yang terbaik ini. Sebelum hadirnya jQuery dalam dunia pemrograman website, pembuatan kode JavaScript tidak mudah untuk digunakan apalagi untuk mendapatkan kualitas yang maksimal pada Cross-Browser.
Kali ini saya akan coba membagikan beberapa Tips dan Tricks atau juga dapat dikatakan Teknik jQuery yang dapat kita gunakan untuk meningkatkan kualitas Code yang kita miliki.
Jika Anda sudah familiar menggunakan jQuery, mungkin ada beberapa hal yang Anda lewatkan untuk membuat Code Anda diproses secara optimal oleh Client-Side, Apalagi jika Anda mulai menggunakan jQuery hanya mendownload dan membaca dokumentasi penggunaannya secara singkat. Tapi tahukah Anda jika ada beberapa teknik yang dapat digunakan untuk menggunakan jQuery secara maksimal sehingga berdampak pada performa Code baik dari segi kecepatan, struktur, dan hal yang menguntungkan lainnya.
Berikut ini adalah beberapa teknik yang dapat Anda gunakan untuk melakukan hal tersebut.

Load jQuery langsung dari Server Google atau jQuery.com 

Mungkin sebagian dari Anda telah banyak membaca dari blog-blog atau sumber yang lain bahwa teknik ini adalah salah satu cara yang optimal untuk meng-improve jQuery tapi untuk me-refresh Anda, saya tetap akan menuliskannya disini.
Contoh pertama misalnya kita ingin me-Load jQuery v1.10.2 dari server google, mungkin biasanya kita menuliskannya dengan cara berikut :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js " type="text/javascript"></script>
Sebenarnya, Anda cukup menuliskan code yang lebih sederhana seperti berikut :
<script src="http://code.jquery.com/jquery-latest.js "></script>



Cara Memastikan Inisialisasi Gambar Selesai 

Memastikan gambar terinisialisasi merupakan cara yang dapat Anda gunakan untuk meningkatkan interaktivitas kepada para pengguna.
Untuk melakukan inisialisasi gambar dapat menggunakan .load() dan gunakan fungsi Callback untuk melakukan proses lanjut. Contoh dibawah ini, atribut "src" dari tag Gambar menjadi atribut selector untuk mendeteksi bahwa gambar telah selesai di load. Hal ini dapat Anda gunakan untuk menggunakan Captcha dengan teknik DOM.
$('#gambar').attr('src', 'gambar.jpg').load(function(){
alert('Gambar telah selesai di load.');
//Gunakan fungsi sesuai dengan yang Anda inginkan.
});

Vertical Alignment dengan jQuery 

Jika Anda ingin meletakkan sebuah elemen di tengah-tengah, menggunakan jQuery akan terasa lebih mudah. Perhatikan contoh berikut ini :
$(document).ready(function(){
//Mengambil angka tinggi window & elemen
var tinggi_window   = $(window).height();
var tinggi_elm      = $('.vertical-center').height();
//Implementasi pada selector
$('.vertical-center').css({
'position'  : 'relative',
'top'       : tinggi_window/2 - tinggi_elm/2
});
});

Replace <div> dengan jQuery 

Cara sederhana yang dapat Anda gunakan adalah dengan cara menggunakan metode REAPLACE WITH.
$(‘#target-div’).replaceWith('<div>Contoh pengganti div yang baru.</div>');

Manipulate Text menggunakan Regular Expression dan jQuery 

Anda dapat mengganti atau membuat text baru dengan menggunakan Regular Expression untuk mencari target yang ingin dirubah tersebut.
Misalnya kita ingin menghindari spammer mengindex Email kita pada document. Kita dapat menggunakan sebuah metode ini untuk merubah text atau karakter khusus untuk ditimpa menjadi email kita (hanya dapat dibaca selain bot / crawler). Contoh yang digunakan adalah kita menggunakan text "-:email:-" untuk diganti menjadi "email_anda@domain.com".
$(document).ready(function(){
var document_body = $('body');
document_body.html(document_body.html().replace(/-:email:-/gi, 'email_anda@domain.com'));
});

Membuat Link eksternal membuka window baru 

Sebenarnya, untuk membuka link baru Anda dapat menggunakan atribut target pada HTML (target="_blank"), tetapi cara ini membuat script Anda tidak Valid menggunakan validasi XHTML 1.0 sehingga kita harus menemukan cara lain.
Jika Anda membutuhkan sebuah alternatif untuk membuka link di eksternal window, Anda dapat menggunakan jQuery untuk melakukan hal ini. Pada Validator XHTML 1.0, atribut ini dianggap tidak valid. Beberapa alternatif berikut ini dapat Anda gunakan.
Contoh dibawah ini dengan menambahkan attribute rel="external" pada link Anda sehingga jQuery dapat membuka link ke eksternal window dengan script seperti berikut :
$('a[rel="external"]').click(function(){
window.open( $(this).attr('href') );
return false;
});
//Atau dapat menggunakan bind
$('a[rel="external"]').bind("click", function(){
window.open( $(this).attr('href') );
return false;
});
Atau jika Anda ingin membuka link pada sebuah selector misalnya <div id="eksternal-link">, jadi Anda cukup menunjuk semua tag <a> yang ada didalam selector tersebut seperti contoh script berikut ini :
$('div#eksternal-link a').click(function(){
window.open( $(this).attr('href') );
return false;
});
//Menggunakan bind()
$('div#eksternal-link a').bind("click", function(){
window.open( $(this).attr('href') );
return false;
});















PENUTUP
Simpulan


3.2  Saran

Untuk mengenal lebih jauh tentang java belajar sejak dini karena java merupakan suatu program yang di buat untuk membuat aplikasi yang berguna bagi zaman modern saat ini. Dan dengan pesatnya teknologi saat ini, dan fasilitas yang sudah lebih maju, perbanyaklah belajar tentang IT dan yang berhubungan dengan IT, karena sangat berguna di kemudian hari, dengan java maupun yang lain.

 Dafttar Pustaka
http://www.prowebpro.com/news/implementasi_jquery Indonesia.html
http://blog.ub.ac.id/nkhoirina/2013/10/04/jquery-mobile-framework/
http://www.zainalhakim.web.id/posting/perbedaan-javascript-dan-jquery.html
http://sidikhanrei.com/id/blog/tutorials/2013/10/13/6-108/beberapa_teknik_jquery_untuk_mengoptimalkan_coding_anda
http://www.w3function.com/blog/index.php?p=det&idn=82

Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)