Dunia internet sangatlah luas dan tidak terbatas termasuk dunia website tidak akan pernah ada habis nya jika kita mau upgrade skill untuk membuat sesuatu yang baru dan membuat website kita lebih bagus dan inovasi baru. Banyak design website sekarang ini selalu mencari apa yang baru untuk tampilan yang gimik, di dorong dari hal baru lah semua orang banyak mencari – cari agar website tidak mirip dengan yang lainnya dan kinerja website lebih cepat dan tidak ada load sama sekali. Jquery ataupun Javascript merupakan bahasa yang tidak dapat di pisahkan dengan HTML/CSS karena Jquery/Javascript merupakan pendukung kinerja website menggunakan plugins ataun native. Di artikel kali ini saya akan memberikan tips dan trik tentang Cara Menggunakan Plugins Input Telepon International dimana kita akan menggunakan plugins Jquery yang memang sudah di sediakan. Tinggal kita copy saja script untuk kita tempat di dalam website kita, tentu nya hasil yang di dapatkan sangatlah bagus. Selain bagus website yang kita berikan beberapa plugins tentunya memiliki kelas tersendiri. Kali ini saya akan mencoba membuat input nomor telepon internasional, dimana ketika kita pilih suatu negara maka form akan memberitahukan user kode telepon sesuai negaranya. Di bawah ini adalah screnn shoot nya yang nanti kita akan buat
Nah seperti yang teman – teman lihat pada gambar di atas ini, ketika di klik pada salah satu bendera negara maka di dalam input akan memberitahukan kode negaranya ini semua memakai plugins Jquery nya, kita akan menggunakannya untuk menghasilkan seperti gambar di atas ini. Baik, sekarnag kita implementasikan Cara Menggunakan Plugins Input Telepon International pertama – tama kalian download terlebih dahulu plugins nya atau bisa klik link ini, kemudian extract pada folder nya. Berikutnya buka text editornya dan copy script html nya di bawah ini
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="build/css/intlTelInput.css">
<link rel="stylesheet" href="build/css/demo.css">
</head>
<body>
<h1> Telepon Input International</h1>
<form>
<input id="phone" type="tel">
<button type="submit">Submit</button>
</form>
</body>
</html>
Dan pastekan pada text editor nya lalu save dengan nama index.html, selanjutnya kita tinggal panggil plugins yang teman – teman sudah download dengan cara seperti gambar di bawah ini
Kemudian kita ketikkan script Jquery nya untuk menghubungkan dengan plugins
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/intlTelInput.js"></script>
<script>
$("#phone").intlTelInput({
utilsScript: "js/utils.js"
});
</script>
Pastekan script di atas ini tepat di bawah tag tutup </form>
Jika sudah, save dan jalankan file pada browswernya, maka tampilan sudah berhasil di buat seperti contoh di atas.
Sangat mudah bukan menggunakan plugins..??
Baik, sekian pada artikel kali ini tentang Cara Menggunakan Plugins Input Telepon International kita jumpa kembali pada artikel berikutnya. Terima Kasih dan Sampai Jumpa.
Semoga bermanfaat.