Form Login Auto Fokus

Postingan kali ini kita akan belajar membuat sebuah form login untuk admin. Tapi form login yang  ini bukan form login yang seperti biasanya. Dengan bantuan jQuery kita akan membuat form login yang agak bagus sedikit. Hehehe.. Form login admin ini dapat juga diterapkan pada form sign up atau form-form yang lainnya. Selanjutnya, kalian dapat membuat sendiri pengembangan dari tutorial ini.

Kira-kira seperti ini bentuk form login yang akan kita buat.

Okelah kalo begitu, langsung ke TKP yuk..
Pertama siapkan dulu file jquery.tools.min.js, jika kalian belum mempunyai file tersebut dapat di download di sini. Kemudian buat sebuah file HTML dengan nama form-login.html. Isi script dari file tersebut adalah sebagai berikut.


Seperti biasanya secara umum ada tiga tahapan pokok untuk menggunakan fungsi expose jQuery, sebuah fungsi untuk membuat tampilan auto fokus pada bagian web tertentu dengan menggunakan selektor tag.
  1. Memanggil library jQuery
    <script type="text/javascript" src="jquery.tools.min.js">

  2. Membuat obyek elemen berupa class / id pada bagian tag BODY nya. Di sini kita menggunakan elemen DIV dengan id kotak.
    <div id="kotak">

    - - - - - code - - - - - -

    </div>

  3. Membuat script jQuery di bagian HEAD nya untuk mengontrol obyek berdasarkan elemennya. Seperti yang ada di script berikut, terdapat selektor id dengan nama kotak. Selektor kotak ini apabila di-klik maka akan mengekspose dan terfokus pada isi yang ada di dalam selektor kotak tersebut. Dengan begitu apabila kursor kita arahkan ke field input username maka otomatis fokus tampilan akan berada pada form login, karena form login ini terletak di dalam selektor id kotak.
    <script type="text/javascript">
    $(document).ready(function(){
    $("#kotak").click(function() {
    $(this).expose({api: true}).load();
    });
    });
    </script>
 


2 Comment:

Rana Rasuna said...

bermanfaat tapi agak rumit jg bagi saya :-D
thanks kunjungannya di gubuk saya bro..

Ahmad Fikry said...

Hahahaa, thx bro sudah mampir..

Post a Comment