Menggunakan JQuery Bx Slider

Assalamualaikum Wr. Wb.

Pada postingan kali ini, kita akan membahas tentang JQuery, lebih tepatnya pada salah satu fiturnya yaitu slider. Yang mana slider ini digunakan untuk berpindah slide yang berupa gambar dari satu gambar ke gambar yang lain.

Jquery, menyediakan banyak slider. Salah satunya adalah Bxslider ini. Yang mana Script kode dari Bxslider ini tidak lepas dari Jquery. Selain itu, tampilan Bxslider sangat responsive. Yang artinya tampilan slidernya bisa menyesuaikan ukuran berdasarkan layar perangkat yang mengakses website yang kita buat. Bukan hanya ukuran layar juga, tapi Bxslider juga bisa menyesuaikan ukurannya sendiri dengan tampilan CSS dan HTML yang sudah kita buat. Benar-benar fleksibel deh pokoknya.

Selain dari itu, Bxslider juga memiliki berbagai macam bentuk tema slide yang bisa kita pilih sendiri bahkan kita ubah sendiri. Untuk mempelajarinya juga tidak susah. Karena di tiap style atau tema slider yang kita mau sudah tersedia bentuk tema, bahkan ada beberapa script kode di tiap tema tersebut. Tinggal gunakan aja file CSSnya dan Jsnya beserta gambar kontrolnya, kemudian isi fungsinya. Maka dari itu, untuk mempelajari Bxslider ini tidaklah sulit.

Oke, mari kita mulai.

  1. Pertama, download dulu Jquerynya disini (http://jquery.com/).

2. Kemudian, buka web Bx slidernya klik aja disini http://bxslider.com/. Nanti akan tampil halaman seperti berikut.

3. Download aja file Bx slidernya, silahkan klik seperti tanda merah di bawah ini.

4. Extract aja filenya, copy foldernya dan satukan dalam sebuah folder. Bersamaan juga dengan file jquerynya. Disini saya buat folder namanya bx.

5. Pilih foto yang akan dipilih untuk jadi slidernya, masukkan dalam folder bx. Disini, gambarnya saya jadiin folder tersendiri biar rapi.

6. Buat file baru dalam format html, dan satukan dalam folder bx tadi. Simpan dengan nama index.html.

7. Buka index.html, kemudian buat script htmlnya. Selanjutnya pada tag <head></head> sisipkan perintah pemanggilan file JQuery dan Bxslider yang tadi kita download.

8. Selanjutnya, pada tag <head></head> di bawah pemanggilan Jquery dan Bx slidernya.Silakan sisipkan kode javascript berikut.

9. Kemudian pada tag <body></body>, sisipkan kode berikut untuk membuat daftar gambar yang nanti akan muncul.

10. Dan beginilah, hasil akhirnya.

 

Cara Membuat Input tanggal dengan Jquery UI DatePicker

Bagi para web developer pasti tidak akan asing dengan Jquery. Jquery adalah Javascrpt Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript. Sedangkan Jquery UI Datepicker adalah plugin Jquery yang dapat dikonfigurasikan untuk menambahkan fungsi kalender ke halaman web. Untuk menambahkan nya di halaman web kita pertama kita harus mengunduh Jquery UI di halaman http://Jqueryui.com seperti gambar di bawah ini

Selanjutnya download versi Jquery yang diinginkan.

Ketikkan kode berikut, simpan dengan nama datepicker.html :

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel=”stylesheet” type=”text/css” href=”jquery-ui-1.12.1.custom/jquery-ui.css”>

<script src=”jquery-ui-1.12.1.custom/external/jquery/jquery.js”></script>

<script src=”jquery-ui-1.12.1.custom/jquery-ui.js”></script>

<script src=”jquery-ui-1.12.1.custom/jquery-ui.min.js”></script>

<link rel=”stylesheet” type=”text/css” href=”jquery-ui-1.12.1.custom/jquery-ui.theme.css”>

<script>

$(document).ready(function(){

$(“#tanggal”).datepicker({

 

})

})

</script>

</head>

<body>

Tanggal : <input type=”text” name=”tanggal” id=”tanggal”><!–fungsi id=tanggal untuk memanggil datepicker–>

</body>

</html>

 

Jika berhasil tampilanya akan seperti ini :

Selamat mencoba J

By Sriayu Windarti

SUBLIME TEXT 3, Aplikasi Web Editor Terbaik

Assalamualaikum Wr. Wb,

Alhamdulillah, kali ini bisa posting artikel lagi. Dan pada postingan ini saya akan membagi sedikit pengalaman pribadi dalam membuat halaman website. Yang mana dalam membuat website tersebut pasti tidak pernah lepas dari aplikasi web editor sebagai pendukungnya.

 

Sublime Text 3 merupakan aplikasi Web Editor yang saya pakai sampai saat ini. Yang mana aplikasi ini sangat ringan dan tidak ribet dalam penggunaannya. Desain warna tulisan kodingnya yang sangat interaktif beserta variasi warna yang menarik. Selain itu warna teks kodingnya juga bisa diganti warna temanya. Jadi dengan teks koding yang enak untuk dilihat bisa membuat banyak pengguna betah dalam proses koding. Itulah beberapa alasan yang tepat untuk membangun sebuah web.

Continue reading

Cara Memeriksa Apakah Pilihan Dalam Select Sudah Dipilih?

 

Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai cara memeriksa apakah pilihan dalam select sudah dipilih pada jQuery. Agar sobat Webhozz tidak bingung langsung aja yuk kita masuk ke pembahasan artikelnya  sobat Webhozz.

Secara prinsip kalian bisa membandingkan nilai pada select dengan nilai awal yang menyatakan pemakai belum Continue reading

Menampilkan Dan Menyembunyikan Elemen

 

Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai menampilkan dan menyembunyikan elemen dengan jQuery. Agar sobat Webhozz tidak bingung langsung aja yuk kita masuk ke pembahasan artikelnya  sobat Webhozz.

Berikut contoh script jQuery untuk menyembunyikan dan menampilkan sebuah elemen menggunakan show() dan Continue reading

Menempatkan Kotak Dialog Pada Posisi Tertentu Dengan jQuery

Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai Apakah Kotak Dialog Bisa Ditempatkan pada Posisi Tertentu? nah biar pada nggak bingung langsung aja yuk kita masuk ke pembahasan bermain dengan controllers codeigniter sobat Webhozz.

Secara bawaan, kotak dialog ditampilkan di tengah jendela browser. Namun, kalau dikehendaki, kotak dialog bisa Continue reading

Tutorial Dasar JQUERY Menggunakan Fungsi Event Click()

Assalamualaikum Wr. Wb

JQuery merupakan Javascript Library yang mana JQuery ini merupakan kumpulan script-script perintah pada Javascript yang sudah siap untuk dipakai. JQuery digunakan untuk meringkas listing kode Javascript sendiri agar lebih mudah untuk dipakai. JQuery sendiri, memiliki banyak versi dan selalu update. Kalo yang sekarang saya pakai ini adalah Jquery versi v3.2.1, yang mana Jquery ini merupakan versi terbaru dari JQuery saat ini. Hanya saja ada kemungkinan bakal ada lagi muncul versi-versi terbaru dari Jquery yang akan update lagi. Sebenarnya, setiap versi itu tidak jauh berbeda hanya saja versi terbaru masih punya fungsi-fungsi dari versi-versi sebelumnya. Jadi, jikalau kamu nanti downloadnya versi yang lebih baru daripada versi yang saya gunakan saat ini maka tidak masalah.

Continue reading

Apakah jQuery Mempunyai Perintah Untuk Menambah Isi Suatu Elemen?

 

Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai Apakah jQuery Mempunyai Perintah Untuk Menambah Isi Suatu Elemen? langsung aja yuk kita masuk ke pembahasan artikelnya  sobat Webhozz. Jika sobat Webhozz memiliki pertanyaan tersebut, maka jawabannya ya jQuery mempunyai perintah untuk menambah isi suatu elemen, penambahan bisa dilakukan di awal atau di akhir isi semula. Continue reading