saya mau berbagi source code yang berfungsi untuk menyembunyikan dan menampilakan sebuah text atau gambar yang anda punyai di web atau di blog. ini menggunakan jquery dan js-nya masih sama caranya masih sama dengan sebelum2nya.dan langsung saja :
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src="delJsMick.js"></script>
</head>
<body>
<button>tampilkan</button>
<p style="display: none">Hello 2</p>
<script>
$("button").click(function () {
$("p").show("slow");
});
</script>
</body>
</html>
dan ada bentuk bergeser kekanan untuk menampilkan text maupun gambar surce codenya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
<script src="delJsMick.js"></script>
</head>
<body>
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>Boleh ,</div>
<div>kenalan</div>
<div>tidak</div>
<div>ini Mickey</div>
<script>
$("#showr").click(function () {
$("div").first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});
});
$("#hidr").click(function () {
$("div").hide(1000);
});
</script>
</body>
</html>
dan tampilan ini untuk menampilkan text pada textbox yang kita sembunyikan source codenya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<style>
span { display:none; }
div { display:none; }
p { font-weight:bold; background-color:#fcd; }
</style>
<script src="delJsMick.js"></script>
</head>
<body>
<button>tampikan ini!</button>
<span>apa kamu setuju? (type 'yes' jika setuju) </span>
<div>
<form>
<input type="text" value="maaf anda kurang beruntung"/>
</form>
</div>
<p style="display:none;">I'm hidden...</p>
<script>
function doIt() {
$("span,div").show("slow");
}
/* can pass in function name */
$("button").click(doIt);
$("form").submit(function () {
if ($("input").val() == "yes") {
$("p").show(4000, function () {
$(this).text("Ok, DONE! (now showing)");
});
}
$("span,div").hide("fast");
/* to stop the submit */
return false;
});
</script>
</body>
</html>
catatan contoh ini sederhana dan untuk jsnya delJsMick.js anda bisa download di postingan disini.
makasih bila ada kurang bisa di tambahkan :D
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src="delJsMick.js"></script>
</head>
<body>
<button>tampilkan</button>
<p style="display: none">Hello 2</p>
<script>
$("button").click(function () {
$("p").show("slow");
});
</script>
</body>
</html>
dan ada bentuk bergeser kekanan untuk menampilkan text maupun gambar surce codenya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
<script src="delJsMick.js"></script>
</head>
<body>
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>Boleh ,</div>
<div>kenalan</div>
<div>tidak</div>
<div>ini Mickey</div>
<script>
$("#showr").click(function () {
$("div").first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});
});
$("#hidr").click(function () {
$("div").hide(1000);
});
</script>
</body>
</html>
dan tampilan ini untuk menampilkan text pada textbox yang kita sembunyikan source codenya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<style>
span { display:none; }
div { display:none; }
p { font-weight:bold; background-color:#fcd; }
</style>
<script src="delJsMick.js"></script>
</head>
<body>
<button>tampikan ini!</button>
<span>apa kamu setuju? (type 'yes' jika setuju) </span>
<div>
<form>
<input type="text" value="maaf anda kurang beruntung"/>
</form>
</div>
<p style="display:none;">I'm hidden...</p>
<script>
function doIt() {
$("span,div").show("slow");
}
/* can pass in function name */
$("button").click(doIt);
$("form").submit(function () {
if ($("input").val() == "yes") {
$("p").show(4000, function () {
$(this).text("Ok, DONE! (now showing)");
});
}
$("span,div").hide("fast");
/* to stop the submit */
return false;
});
</script>
</body>
</html>
catatan contoh ini sederhana dan untuk jsnya delJsMick.js anda bisa download di postingan disini.
makasih bila ada kurang bisa di tambahkan :D
0 Comments
