Cetuskan acara apabila menekan butang Enter (Event Trigger)

Sekiranya anda tidak faham yang yang saya maksudkan. Boleh rujuk sini.

Teknik ini sesuai digunakan bagi fungsi carian. Untuk artikel kali ini, saya cuma menunjukkan bagaimana mahu melakukan pencetus(trigger) untuk sesuatu acara (event) menggunakan kekunci Enter. Seperti artikel sebelum ini, saya menunjukkan bagaimana melakukannya menggunakan Jquery.

Mula-mula kita haruslah memasukkan pautan fail jquery ke kod html.


<script type="text/javascript" src="jquery-1.6.min.js"></script>

Kemudian kita haruslah meletakkan kesemua kod yang terlibat didalam $().ready. Ini bagi memboleh skrip dapat dijana selepas halaman selesai di muatkan kedalam pelayar.


$(document).ready(function(){

//skrip akan berada disini.

});

Terdapat 2 fungsi utama yang diperlukan. Iaitu .focus() dan juga .keyup(). Focus bagi membolehkan skrip hanya dilarikan ketika pengguna sedang menaip textbox tertentu. Sudah pastinya kita tidak mahu halaman kita menjadi menjengkelkan apabila pengguna tersilap menekan butang Enter.

Fungsi .keyup() pula membolehkan jquery membaca setiap kekunci yang ditekan pada papan kekunci. Ini bagi membolehkan jquery mengetahui kekunci Enter telah ditekan


$("#idTextbox").focus(function(){

$("#idTextbox").keyup(function(event){

//pemeriksaan kekunci Enter akan berlaku disini

})

})

Didalam fungsi .keyup(), pemeriksaan kepada setiap kekunci yang ditekan akan dilakukan. Nilai bagi butan Enter adalah 13. Untuk bahagian ini kita hanya menggunakan javascript. Tidak perlu menggunakan fungsi jquery.


var e = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
if (e == 13){
alert($("#search").val());
$("#search").blur();
}

Memandangkan untuk demo ini saya hanya memaparkan data yang ditaip pada alert, maka saya menambah fungsi .blur() bagi menghilangkan fokus dari textbox supaya apabila menekan butang Enter pada alert tidak menjana alert yang baru.


<html>
<head>
<title>
On Enter
</title>
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#search").focus(function(){
$("#search").keyup(function(event){
var e = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
if (e == 13){
alert($("#search").val());
$("#search").blur();
}
});
});
});
</script>
</head>
<body>
<input type="text" name="search" id="search" />
</body>
</html>

Hilangkan nilai awal textbox menggunakan jQuery

Sudah lama aku tidak berkongsi sesuatu di sini. Kali ini aku ingin kongsikan bagaimana membuat nilai awal pada textbox hilang. Sila rujuk gambar di bawah ehehehe.

Langkah pertama semestinya muatturun jquery dari sini. Selepas itu perlulah memasukkan fail jquery ini kedalam kod html kita.

<script src="jquery-1.6.min.js"></script>

Kemudian kita tambah pula kod ini kepada fail html kita.


<script type="text/javascript">
 $().ready(function(){
 $(".clearMe").focus(function(){
 if ($(this).val() == this.defaultValue)
 {
 $(this).val("");
 $(this).removeClass('greyText');
 }
 });

 });
</script>

Sekarang mari kita berbicara mengenai kod diatas. $(document).ready mempunyai fungsi yang sama dengan <body onload=”nama fungsi”>. $(“.clearMe”).focus pula merupakan fungsi didalam jQuery yang menyerupai onFocus. Fungsi akan dipanggil apabila kita klik atau fokus pada elemen yang mempunyai kelas (class) clearMe.

Ini merupakan bahagian yang sangat penting. if ($(this).val() == this.defaultValue).

$(this).val() adalah fungsi dalam jQuery. Fungsi ini akan membaca nilai yang terdapat didalam elemen yang sedang difokus. Manakala this.defaultValue adalah fungsi yang terdapat didalam javascript. Ia bukanlah sebahagian dari fungsi jQuery. this.defaultValue ini akan sentiasa membaca nilai awal yang telah ditetapkan oleh kita.

Apa yang dilakukan oleh baris ini ialah, ianya akan akan membandingkan nilai semasa dari jQuery dengan nilai awal yang dibaca oleh javascript. Sekiranya tidak sama kod yang terdapat didalamkan akan dilaksanakan.

$(this).val(“”) akan mengumpukkan nilai ruang kosong kepada elemen tadi manakala $(this).removeClass(“greyText”) akan membuang kelas greyText dari ada pada elemen kita. Ini bagi membolehkan apa yang ditaip oleh pengguna, tidak akan berwarna kelabu.

Berikut merupakan kod penuh untuk fungsi ini.


<html>
 <head>
 <title>Kosongkan Textbox</title>
 <script src="jquery-1.6.min.js"></script>
 <script type="text/javascript">
 $().ready(function(){
 $(".clearMe").focus(function(){
 if ($(this).val() == this.defaultValue)
 {
 $(this).val("");
 $(this).removeClass('greyText');
 }
 });

 $(".clearMe").blur(function(){
 if ($(this).val() == "")
 {
 $(this).val(this.defaultValue);
 $(this).addClass('greyText');
 }
 });
 });
 </script>
 </head>
 <body>
 <style>
 .greyText {
 color:grey;
 }
 </style>
 <form>
 <label>Masukkan Nama</label> <input type="text" value="Jasdy Syarman" />
 <input type="button" value="Send" />
 </form>
 </body>
</html>

Maaf sekiranya code ini tidak disusun dengan baik. Aku hanya tampal dari notepad++ dan wordpress membuang semua ruang kosong yang tiada &nbsp; ehehehehe.

Kebanyakan kod yang ada menggunakan perbandingan dengan atribut title. Aku tidak ingin menambah panjang kod yang perlu ditaip pada form. Makanya aku menyediakan kod ini.

Selamat mencuba!

Dropdown Dinamik (Dynamic Dropdown) atau Select

Artikel kali ini akan menceritakan bagaimana mahu menggunakan kod yang telah saya bina ini untuk kegunaan kalian. Mula-mula sekali muat turun fail ini.

Untuk mencuba fail tadi, kalian memerlukan apache, php dan juga mysql.

Bagaimana mahu menggunakan skrip ini?

1. Perlu memuatkan skrip jQuery versi 1.3.2 (sudah dibekalkan di dalam fail zip).

<script type="text/javascript" src="javascript/jquery-1.3.2.js"></script>

2. Perlu memuatkan skrip dynamicSelect (sudah dibekalkan di dalam fail zip).

<script type="text/javascript" src="javascript/jquery.dynamicSelect-1.2.0.js"></script>

3. Memanggil fungsi dynamicSelect.

<script type="text/javascript">
    $(document).ready(function() {
        $("#state").dynamicSelect({
          url:'district.php', //url ke halaman yang menjana JSON
          target:'district', //id dinamik dropdown
          msg:'Sedang Memproses', // secara auto ia akan memaparkan Loading... jika di setkan ia akan memaparkan mesej yang disetkan.
        })
      });
    </script>

Syarat menggunakan skrip ini ialah, sentiasa menggunakan $_GET[‘select_id’] untuk menerima parameter.

Yang kedua, format JSON haruslah seperti ini.

[{"id":"1","description":"BATU PAHAT"},
{"id":"2","description":"JOHOR BAHRU"}]

Selamat mencuba!

Hypertext Markup Language (HTML)

Hypertext Markup Language atau lebih dikenali sebagai html merupakan kod-kod aturcara yang difahami oleh pelayar(browser). Editor yang aku gunakan adalah Notepad++(muat turun disini). Ianya percuma.

Kebiasaannya tag-tag html mempunyai pembukaan dan penutupnya, sebagai contoh <p></p>, <div></div>, <table></table> dan juga <code></code>. Sungguhpun begitu masih ada tag-tag html yang hanya mempunyai penutup sebegini />. Contoh, <br /> dan <hr />.

Artikel kali hanya akan menerangkan perkaa asas yang perlu ada untuk membina satu muka laman web. Setiap kod-kod/tag-tag html haruslah berada didalam <html></html>. Keseluruhan stuktur <html></html> ini pula terbahagi kepada dua, iaitu kepala (<head></head>) dan juga badan (<body></body>).

Segala isi kandungan sesebuah laman web haruslah diletakkan di bahagian badan(body). Sekiranya kamu meletak sesuatu dibahagian kepala(head), ia tidakkan memaparkan maklumat tersebut pada pelayar kamu.

Kod aturcara dibawah mungkin dapat memahami apa yang aku maksudkan.

<html>
    <head>
        <title>
            Laman Web Pertama Saya
        </title>
    </head>
    <body>
        <p>
            Salam Dunia!
        </p>
        <p>
            <h1>Salam Dunia H1</h1>
            <h6>Salam Dunia H6</h6>
        </p>
        <p>
            Sini mulanya <br /> sini tamatnya.
        </p>
    </body>
</html>

Hasil dari kod-kod aturcara diatas, inilah hasilnya.

lamanweb

Laman web terbaik untuk merujuk perkara berkaitan html ini adalah http://www.w3schools.com/. Setiap fail html mestilah disimpan(save) sebagai .html atau .htm

Untuk melihat hasil kerja kamu, kamu boleh menggunakan pelayar yang biasa kamu gunakan.