Jquery toggle's description: Display or hide the matched elements.
1.How to toggle a button use Jquery?
1.1.Demo
2.How to toggle button text use Jquery?
2.1.Demo
3.How to toggle button class/layout use Jquery?
3.1.Demo
1.How to toggle a button use Jquery?
There are two type button in HTML.
The First type is Tag <button>:
<button id="aid">Button Tag<button>
The second type is Tag <input>:
<input id="bid" type="button" value="Input Tag"/>
To hide/show upon buttons use jquery is same.
$('#aid').toggle(); $('#bid').toggle();
or
$('#aid').toggle(1000); $('#bid').toggle(1000);
The "1000" of the parameter determining how long the animation will run.
1.1.Demo
DEMO
Below is the source code:
<html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function toggleButton(){ $("#bid").toggle(1000); $("#iid").toggle(1000); } </script> </head> <body> <button id="bid">I am a bButton</button> <input type="button" id="iid" value="I am a bInput"/> <a href="#" onclick="toggleButton();">Toggle Button</a> </body> </html>
2.How to toggle button text use Jquery?
below I wirted a function to toggle button text for two type button.
This function have three parameter3
objId:The target of button ID
objText1:The button value for button text changed from.
objText2:The second value for button text changed to.
function toggleButtonText(objId,objText1,objText2){ objId = "#" + objId; var tagName = $(objId)[0].tagName; var value = null; //step1 if(tagName == "INPUT"){ //for tag input value = $(objId).attr("value"); }else{ //for tag button value = $(objId).html(); } //step2 if(value == objText1){ value = objText2; }else{ value = objText1; } //step3 if(tagName == "INPUT"){ //for tag input $(objId).attr("value",value); }else{ //for tag button $(objId).html(value); } }
2.1.Demo
DEMO
Below is the source code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function toggleButtonText(objId,objText1,objText2){
objId = "#" + objId;
var tagName = $(objId)[0].tagName;
var value = null;
//step1
if(tagName == "INPUT"){
//for tag input
value = $(objId).attr("value");
}else{
//for tag button
value = $(objId).html();
}
//step2
if(value == objText1){
value = objText2;
}else{
value = objText1;
}
//step3
if(tagName == "INPUT"){
//for tag input
$(objId).attr("value",value);
}else{
//for tag button
$(objId).html(value);
}
}
</script>
</head>
<body>
<button id="cid"
onclick="toggleButtonText('cid','I am a cButton','Toggle cButton Text');">I am a cButton</button>
<input type="button" id="did" value="I am a dInput"
onclick="toggleButtonText('did','I am a dInput','Toggle dInput Text');"/>
</body>
</html>
3.How to toggle button class/layout use Jquery?
This function have three parameter3
objId:The target of button ID
objClass1:The button class for button class changed from.
objClass2:The second class for button class changed to.
function toggleButtonClass(objId,objClass1,objClass2){ objId = "#" + objId; var value = $(objId).attr("class"); if(value == objClass1){ value = objClass2; }else{ value = objClass1; } $(objId).attr("class",value); }
3.1.Demo
DEMO
Below is the source code:
<html>
<head>
<style>
.blackClass {
color:black;
}
.whiteClass {
color:white;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function toggleButtonClass(objId,objClass1,objClass2){
objId = "#" + objId;
var value = $(objId).attr("class");
if(value == objClass1){
value = objClass2;
}else{
value = objClass1;
}
$(objId).attr("class",value);
}
</script>
</head>
<body>
<button id="eid"
class="blackClass"
onclick="toggleButtonClass('eid','blackClass','whiteClass');">I am a eButton</button>
<input type="button" id="fid"
class="blackClass"
value="I am a fInput" onclick="toggleButtonClass('fid','blackClass','whiteClass');"/>
</body>
</html>
Related Articles
jquery disable button
No comments:
Post a Comment