jquery provide functionality to control behaviour of user interface
of webpage as user action(mouse click on button, mouse over,mouse out
etc.) All these effect happens on client side.
Situation
We want to hide and show a paragraph if user click on a button.
Solution
- First identify source who generate event(above situation mouse click)
- Secon identify target on which we want to apply this effect.
- Use jquery showhide.js for implementing this task
Syntex
$("#target_id").hide()
This syntex is used to hide.
$("#target_id").show()
This syntex is used show.
$("#target_id").hide()
This syntex is used to hide.
$("#target_id").show()
This syntex is used show.
Example
we have a paragraph or span or div with id and
we want to hide or show then we can do on button click event. To do
this we need to use jquery http://www.programmingduniya.com/common/jquery/showhide.js
Detailed Programme
<html>
<head>
<style>
span { background-color:green;color:white;padding:10px;font-size:15px; }
</style>
<script src="http://www.programmingduniya.com/common/jquery/showhide.js"></script>
</head>
<body>
<button id="btnclick2">Hide me</button>
<div id="hide1">If you click this button i will become invisible</div>
<button id="btnclick3">Show me</button>
<script>
$(document).ready(function(){
$("#btnclick2").click(function () {
$("#hide1").hide();)};
});
$(document).ready(function(){
$("#btnclick3").click(function () {
$("#hide1").show();)};
});
</script>
</body>
</html>
<head>
<style>
span { background-color:green;color:white;padding:10px;font-size:15px; }
</style>
<script src="http://www.programmingduniya.com/common/jquery/showhide.js"></script>
</head>
<body>
<button id="btnclick2">Hide me</button>
<div id="hide1">If you click this button i will become invisible</div>
<button id="btnclick3">Show me</button>
<script>
$(document).ready(function(){
$("#btnclick2").click(function () {
$("#hide1").hide();)};
});
$(document).ready(function(){
$("#btnclick3").click(function () {
$("#hide1").show();)};
});
</script>
</body>
</html>
For show or hide a control we need two button on for show and other for hide. Can we do both task with single button?
Solutions
Yes we can do above task with single button.For for doing this we need different jquery function named toggle();
Show or hide using toggle()
this function is used for doing two task with single button.
Syntex
$("#target_id").toggle()
This syntex is used to show or hide.
- If div or span is visible and we click button this function hide them.
- If div or span is not visible and we click button this function show them.
<style>
span { background-color:green;color:white;padding:10px;font-size:15px; }
</style>
<script src="http://www.programmingduniya.com/common/jquery/showhide.js">
</script>
</head>
<body>
<button id="btntoggle1">show or hide me</button>
<div id="togglehide1">If you click this button i will become invisible</div>
<script>
$(document).ready(function(){
$("#btntoggle1").click(function () {
$("#togglehide1").toggle();)};
});
</script>
</body>
</html>
Explanation
From above experiment we concluded when we click on button then span or div hides.So What is flow of action
1. Click on button.
2. Action for hide or show span or div trigger.
No comments:
Post a Comment