This component is used for sliding html component. Using this we can do any UI task.
Situation
We want to display a progressbar and when user slide it and click button green box change it's dimension.
Solution
- First identify source (html tag)
- Use following jqueries for implementing this task
- use jquery http://www.programmingduniya.com/common/jquery/jquery.min.js
- use jquery http://www.programmingduniya.com/common/jquery/jquery-ui.min.js
- use css http://www.programmingduniya.com/common/jquery/css/jquery-ui.css
we can get slider's current value using following syntex.
var value = $("#slider" ).slider( "option", "value" );
then in button click event we change dimension of div to show animation effect.
document.getElementById("sizechange").style.height=value+"px";
document.getElementById("sizechange").style.height=value+"px";
var value = $("#slider" ).slider( "option", "value" );
then in button click event we change dimension of div to show animation effect.
document.getElementById("sizechange").style.height=value+"px";
document.getElementById("sizechange").style.height=value+"px";
Detailed programme
<html>
<head>
<link
rel="stylesheet"
type="text/css" href="http://www.programmingduniya.com/common/jquery/jquery-ui.css" />
<script
type="text/javascript"
src="http://www.programmingduniya.com/common/jquery/jquery.min.js">
</script>
<script
type="text/javascript"
src="http://www.programmingduniya.com/common/jquery/jquery-ui.min.js">
</script>
</head>
<body>
<div id="sizechange" style="background-color:green;width:30px;height:30px;"></div>
<br/>
<br/>
<div id="slider"></div>
<br/>
<br/>
<input type="button" onclick="changestatus()" value="Change slider and click me"/>
<br/><br/>
<script>
$(document).ready(function() {
$("#slider").slider({});
});
function changestatus()
{
$(document).ready(function() {
var value = $("#slider" ).slider( "option", "value" );
document.getElementById("sizechange").style.width=value+"px";
document.getElementById("sizechange").style.height=value+"px";
});
}
</script>
</body>
</html>
<head>
<link
rel="stylesheet"
type="text/css" href="http://www.programmingduniya.com/common/jquery/jquery-ui.css" />
<script
type="text/javascript"
src="http://www.programmingduniya.com/common/jquery/jquery.min.js">
</script>
<script
type="text/javascript"
src="http://www.programmingduniya.com/common/jquery/jquery-ui.min.js">
</script>
</head>
<body>
<div id="sizechange" style="background-color:green;width:30px;height:30px;"></div>
<br/>
<br/>
<div id="slider"></div>
<br/>
<br/>
<input type="button" onclick="changestatus()" value="Change slider and click me"/>
<br/><br/>
<script>
$(document).ready(function() {
$("#slider").slider({});
});
function changestatus()
{
$(document).ready(function() {
var value = $("#slider" ).slider( "option", "value" );
document.getElementById("sizechange").style.width=value+"px";
document.getElementById("sizechange").style.height=value+"px";
});
}
</script>
</body>
</html>
No comments:
Post a Comment