Halo semuanya, berjumpa lagi dengan saya pada tutorial Dumet School. Di artikel kali ini saya akan memberikan tips dan trik tentang Cara Menampilkan Keyboard Querty Dengan Plugins Jquery dimana kita akan membuat atau memanggil plugins Jquery dengan menampilkan layout keyboard. Ini bisa juga di pakai di dalam website untuk tampilan lebih menarik berikut ini adalah screen shoot nya yang nanti kita akan buat
Jika di klik pada kolom maka layout keyboard akan muncul
Fungsi nya sama dengan keyboard fisik hanya bedanya pengetikannya satu – satu dengan mouse, memang tidak terlalu efisien untuk pengetikan pada komputer tetapi ini berguna sekali pada tampilan mobile ataupun tablet karena memang keyboard plugins ini juga responsive
Nah seperti yang teman – teman lihat pada gambar di atas ini, seperti yang saya bilang bahwa tampilannya pun sudah responsive pada saat tampilan mobile ataupun tablet. Oke, tanpa lama – lama lagi sekarang kita implementasikan Cara Menampilkan Keyboard Querty Dengan Plugins Jquery, seperti biasa teman – teman siapkan text editornya kemudian download terlebih dahulu plugins Jquery nya atau bisa klik link ini untuk mendownload kemudian extract pada folder dan akan menghasilkan file seperti gambar di bawah ini
Folder CSS mempunyai file
Dan folder js mempunyai mempunyai file
Langkah berikutnya kita akan memanggil dan menampilkan pada browser, teman – teman copy script html nya di bawah ini
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cara Menampilkan Keyboard Querty Dengan Plugins Jquery</title> </head> <body> <div id="page-wrap"> <div class="block" id="caret"> <h2> <span class="tooltip-tipsy" title="Click, then scroll down to see this code">QWERTY (mod) Text Area</span> </h2> <textarea id="qwerty-mod"></textarea> </div> </div> </body> </html>
Kemudian save dengan nama index.html, selanjutnya tinggal kita panggil link css dan plugins Jquery nya. Teman – teman panggil file yang sudah di download atau ikuti seperti gambar di bawah ini dengan klik gambar
Jika sudah save dan jalankan pada browser nya, maka tampilan seperti gambar di bawah ini
Jika di klik akan muncul keyboard nya,
Dan juga bisa di ketikkan huruf, simbol, angka, dan lain-lainnya.
Bagimana, cukup menarik bukan untuk tampilannya..??
Baik, sekian dulu pada artikel kali ini tentang Cara Menampilkan Keyboard Querty Dengan Plugins Jquery kita berjumpa kembali pada artikel berikutnya. Semoga bisa menjadi refrensi untuk kalian yang ingin tahu lebih luas di dunia website khususnya menggunakan plugins.
Terimakasih dan Sampai Jumpa.
Semoga bermanfaat 🙂