Primasaja.com: Service WEB, MOBILE & SOFTWARE DEVELOPMENT , ENGINEERING & ARCHITECTURE , DESIGN & CREATIVE , ADMIN SUPPORT , SALES & MARKETING , INSTALASI JARINGAN & KOMPUTER
Email: jakaprima123@gmail.com
Phone: 081311086653
Fax: -
Url:
cash, credit card
Perum Griya Rajeg Lestari Blok C No 24
Tangerang indonesia 15540

Belajar Jquery Dasar Form Focus dan Blur

tidak ada komentar : DIPOSTING OLEH jaka Pada 2015 LABEL: jquery



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 :

<?php defined('BASEPATH') OR exit('No direct script access allowed');

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>   

www.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 :

<?php defined('BASEPATH') OR exit('No direct script access allowed');

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>   

"

Tidak Ada Komentar: