Wednesday, April 1, 2015

BELAJAR JQUERY

    <html>
    <head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
$("#nama").blur(function(){
cekkosong($(this).val());
});
$("#pass").blur(function(){
cekkosong($(this).val());
});
$("#login").click(function(){
$("#wrapper").load("teks.txt");

});


});

function cekkosong(value){
if(!value){

$('#msg').html("Wajib di isi");
$('#msg').show(1000);
}
else
{
$('#msg').html("Klik Login");
$('#msg').show(1000);
}
}
</script>
    <style>
        body {
            padding :0px;
            margin : 0px;
            background-color : #9ad6bd;
        }
        #msg{
display: none;
position: absolute;
background: #F80;
padding: 10px 100px;
top: 200px;
}
        #wrapper {
            background-image:url(pink.png);
margin-top:50px;
            width:500px;
            height : 200px;
            margin-right:auto;
            margin-left:auto;
box-shadow: 10px 5px 7px #222;
        }

    </style>
    </head>
    <body>
    <div id="wrapper">
<table align="center">
<tr>
<td><h1>Login</h1>  </td>
</tr>

<tr>
<td> Username </td>
<td>:</td>
<td><input type="text" id="nama"></td>
</tr>
<tr>
<td> Password </td>
<td>:</td>
<td><input type="password" id="pass">   </td>
</tr>

<tr>
<td> <div id="msg"></div><button id="login"> Login </button> </td>
</tr>
</table>

    </div>
    </body>
    </html>

0 comments:

Post a Comment