JqueryUI Add Class
This chapter will discuss the addClass() method, which is one of the methods used to managejQueryUI visual effects. addClass() method allow animating the changes to the CSS properties.
addClass() method add specified classes to the matched elements while animating all style changes.
Syntax
Added In Version 1.0 of jQueryUI
The addClass() method has its basic syntax as follows:
.addClass( className [, duration ] [, easing ] [, complete ] )
Parameter
Description
className
This is a String containing one or more CSS classes (separated by spaces).
duration
This is of type Number or String, and indicates the number of milliseconds of the effect. A value of 0 takes the element directly in the new style, without progress. Its default value is 400.
easing
This is of type String and indicates the way to progress in the effect. Its default value is swing. Possible values are here.
complete
This is a callback method called for each element when the effect is complete for this element.
Added In Version 1.9 of jQueryUI
With version 1.9, this method now supports achildren option, which will also animate descendant elements.
.addClass( className [, options ] )
Parameter
Description
className
This is a String containing one or more CSS classes (separated by spaces).
options
This represents all animation settings. All properties are optional. Possible values are:
duration: This is of type Number or String, and indicates the number of milliseconds of the effect. A value of 0 takes the element directly in the new style, without progress. Its default value is 400.
easing: This is of type String and indicates the way to progress in the effect. Its default value is swing. Possible values are here.
complete: This is a callback method called for each element when the effect is complete for this element.
children: This is of type Boolean and represents whether the animation should additionally be applied to all descendants of the matched elements. Its default value is false.
queue: This is of type Boolean or String and represents whether to place the animation in the effects queue. Its default value istrue.
Examples
The following example demonstrates the use ofaddClass() methods.
Passing single class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI addClassExample</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel="stylesheet">
<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.elemClass {
width: 200px;
height: 50px;
background-color: #b9cd6d;
}
.myClass {
font-size: 40px; background-color: #ccc; color: white;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.button').click(function() {
if (this.id == "add") {
$('#animTarget').addClass("myClass", "fast")
} else {
$('#animTarget').removeClass("myClass", "fast")
}
})
});
</script>
</head>
<body>
<div id=animTargetclass="elemClass">
Hello!
</div>
<button class="button" id="add">Add Class</button>
<button class="button" id="remove">Remove Class</button>
</body>
</html>
Let's save above code in an HTML fileaddclassexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:
Hello!
Click on the Add Class and Remove Class buttons to see the effect of classes on the box.
Passing multiple classes
This example shows how to pass multiple classes to the addClass method.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI addClassExample</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel="stylesheet">
<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.red { color: red; }
.big { font-size: 5em; }
.spaced { padding: 1em; }
</style>
<script>
$(document).ready(function() {
$('.button-1').click(function() {
$( "#welcome" ).addClass( "red big spaced", 3000 );
});
});
</script>
</head>
<body>
<p id="welcome">Welcome to .Net Framework!</p>
<button class="button-1">Click me</button>
</body>
</html>
Let's save above code in an HTML fileaddclassexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:
ليست هناك تعليقات:
إرسال تعليق