PENJELASAN jQuery UI dan Contoh Instalasi jQuery Ui di Bidang Kerja

JQuery UI merupakan plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah framework JQuery. Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery (menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima tema yang bermacam-macam sesuai dengan keperluan desain — JQuery UI

Sejauh yang Saya pelajari selama ini, dibandingkan dengan kemampuannya sebagai pendukung efek-efek animasi baru yang tidak ada di dalam JQuery, peran JQuery UI lebih mendominasi ke dalam hal-hal yang berhubungan dengan penciptaan aplikasi online dengan standar yang sangat baik:

Contoh Instalasi JQuery UI dalam Bidang Kerja

12345678910<link href='jqueryui-theme.css' type='text/css' rel='stylesheet'>

<script src='jquery.js' type='text/javascript'></script>

<script src='jqueryui-1.8.1.js' type='text/javascript'></script>

<script type='text/javascript'>

$(document).ready(function() {

  // Lakukan sesuatu di sini...

});

</script>

Google Ajax Libraries API (CDN)

JQuery UI siap pakai dari Google yang dapat digunakan:

Framework JQuery UI

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js'></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js'></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js'></script>

...

...

dan seterusnya sampai versi terakhir di tahun 2011…

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>

CSS

Revisi CSS mengikuti revisi Framework JQuery UI:

<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css'>

...

...

<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css'>

Dokumentasi

Perpustakaan ini bergantung kepada JQuery. Anda juga harus memuat JQuery sebelum memuat modul ini. Versi 1.8.3 tidak didokumentasikan karena jangka waktu revisi yang pendek:

Saat Anda mencoba mengakses JQuery UI 1.8.3, yang keluar adalah JQuery UI 1.8.4

PENJELASAN jQuery

Halo agan2, Saatnya kita menngetahui apa jQuery itu. jQuery adalah Javascript Library, Kumpulan kode/fungsi Javascript siap pakai, sehingga memudahkan dan mempercepat kita dalam membuat kode javascript. Dari pengertian jQuery di atas, Secara standar apabila kita membuat kode javascript, maka diperlukan kode yang cukup panjang, bahkan terkadang sangat sulit dipahami, misalnya fungsi javascript untuk membuat stripe (warna selang-seling) pada baris suatu tabel adalah sebagai berikut:

functionstripe (id){

var even = false;

var evenColor = arguments[1] ? arguments[1] : “#fff”;

var oddColor = arguments[2] ? arguments[2] : “#eee”;

var table = document.getElementById(id);

if (!table) {return;}

var tbodies = table.getElementsByTagName(“tbody”);

for (var h=0; h < tbodies.length; h++) {

var trs = tbodies[h].getElementsByTagName(“tr”);

for (var i=0; i < trs.length; i++){

if (! hasClass(trs[i]) && ! trs[i].style.backgroundColor){

var tds = trs[i].getElementsByName(“td”);

for (var j=0; j<tds.length; j++){

var mytd=tds[j];

if (!hasClass(mytd) && ! mytd.style.backgroundColor){

mytd.style.backgroundColor=even ? evenColor:oddColor;

}

}

}

}

}

}

Nah disinilah peran/kemampuan jQuery sebagai Javascript Library, dimana kita bisa langsung memanggil fungsi yang terdapat di dalam Library tersebut, menariknya dengan kode jQuery kita hanya memerlukan satu/dua baris untuk membuat warna selang-seling pada suatu tabel, berikut kode sederhana jQuery:

jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);

Buset, ringkas banget kan jika kita menulis dengan kode jQuery? Oke, pada kesimpulannya kode jQuery menyederhanakan kode javascript. Hal ini sesuai dengan slogan kode jQuery yaitu “Write less, do more” yang artinya sedikit menulis tetapi melakukan banyak hal.

MEMBUAT JARINGAN LOCAL AREA NETWORK SEDERHANA MENGGUNAKAN PACKET TRACER

Asalamualaikum......
kali ini saya ingin berbagi ilmu tentang sebuah aplikasi yang biasa digunakan untuk membuat simulasi jaringan pada sebuah perusahaan,instansi pemerintah atau di dunia pendidikan..
Nama aplikasinya "Packet Tracer"....
baik lah kita mulai,
terlebih dulu kita buka aplikasi packet traser nya sehingga akan tampil seperti dibawah ini :

setelah kita buka kita masukan 2 buah komputer yang akan buat saling terhubung

setelah itu masukan pula switch sebagai penghubung kedua komputer tersebut

 

untuk menghubungkan komputer dengan switch kita menggunakan kabel cross

pilih kabel croos dan tarik ke arah komputer,serta kita seting pada fashethernet,begitu pula pada switch nya kita seting fashethernet

setelah kita hubungkan dengan kabel,

kita atur IP pada setiap komputer nya

komputer 1

Komputer 2

setelah IP nya kita atur maka kedua komputer tersebut sudah terkoneksi,untuk mengetahui apakah sudah terkoneksi atau belum kita bisa meng ping ip komputer tersebut

komputer 1 melakukan ping kepada komputer 2

komputer 2 melakukan ping kepada komputer1

atau dengan cara yang lebih mudah menggunkan pengiriman pesan dari komputer 1 kepada komputer 2

pesan dari komputer 1 telah di terima oleh komputer 2,

demikian cara mudah menggunakan packet tracer,

pada kesempatan berikutnya saya akan membuat simulasi menggabungkan 2 buah jaringan atau lebih supaya dapat terhubung,

tapi itu pun kalo saya jadi persentasi pada pelajaran WEB 2.0 ya guys,hehehehe

maka dari itu saya minta doa semua nya supaya saya jadi persentasi :-)

MEMBUAT WOWSLIDER

asalamualaikum.....

pada kesempatan kali ini saya akan menjelaskan tentang wowslider,

sedikit saya jelaskan pengertian wowslider yaitu software untuk menampilkan gambar sesuai dengan keinginan kita dan dapat pula kita pergunakan dalam sebuah website.

baik kita mulai saja,pertama kita harus punya software wowslider.exe dan kemudian kita install software tersebut seperti pada gambar di bawah ini :

setelah selesai menginstall kita klik finish dan coba jalan kan aplikasi tersebut,maka akn tampil seperti ini :

kemudian kita tambahkan image yang akan kita tampilkan pada wowslider

setelah image kita pilih kita pilih properties dan atur template serta efeknya

setelah kita atur kita klik publish dan atur alamat aplikasi kita akan di save dimana,

setelah itu klik publish lagi dan wowslider yang kita buat akan segera muncul

demikian penjelasan tetang wowslider,semoga bermanfaat :-)