Senin, 17 Agustus 2015
Belajar Jquery Dasar Form .Focus dan .Blur
Belajar Jquery Form .Focus dan .Blur
Jaka Prima Maulana
selamat datang pengunjung primasaja.com,
pembahasan kali ini akan membahas mengenai " Belajar Jquery Dasar Form .Focus dan .Blur " didalam jquery form anda sering melihat sebuah kotak pengisian yang berubah warna atau diberi event - event lain seperti bantuan dan sebagainya, apa yang kita pelajari kali ini bisa saja dengan fungsi sesederhana ini, Mari kita buat sesuai dengan tahap - tahap seperti ini
HTML
buat file bernama blur.php / blur.html lalu ketik code berikut
<html>
<head>
<title>Tutorial Jquery Form .focus dan .blur PrimaSaja.com</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<form>
<input id="kotakprimasaja" type="text" value="klik untuk mengetik">
</form>
<div id="penjelasan">
klik kotak diatas
</div>
<script>
$("#kotakprimasaja").focus(function(){
$(this).css({"background-color":"aqua","border-radius":"20%"});
});
$( "#kotakprimasaja" ).blur(function() {
$(this).css({"background-color":"red","border-radius":"0%"});
});
</script>
</body>
</html>
Selesai silahkan anda jalankan...
Framework codeigniter
- buat controller baru dengan nama Form.php dan isikan seperti berikut :
class Form extends CI_controller {
function index(){
$this->load->view('Blur');
}
function test1(){
echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
}
}
lalu buat file baru di dalam view sesuai dengan view yang di definisikan di controller
yaitu blur.php dan isi kan kode seperti berikut
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<html>
<head>
<title>Tutorial Jquery Form .focus dan .blur PrimaSaja.com</title>
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>
</head>
<body>
<form>
<input id="kotakprimasaja" type="text" value="klik untuk mengetik">
</form>
<div id="penjelasan">
klik kotak diatas
</div>
<script>
$("#kotakprimasaja").focus(function(){
$(this).css({"background-color":"aqua","border-radius":"20%"});
});
$( "#kotakprimasaja" ).blur(function() {
$(this).css({"background-color":"red","border-radius":"0%"});
});
</script>
</body>
</html>
Langganan:
Posting Komentar
(
Atom
)
Tidak ada komentar :
Posting Komentar