This
article will show you how you can create a resizable div control with the help
of mouse control using jquery ui and css for your asp.net, mvc, html
application.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
Now add the below style into the header of the page.
<style>
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
background-color:red;
}
#resizable h3 {
text-align: center;
margin: 0;
background-color:red;
}
</style>
|
Now have a
look of the below javascript code.
<script>
$(function () {
$("#resizable").resizable();
});
</script>
|
The above code is responsible for creating the re sizable div control. In this I have passed the div id. Now check the complete code of the page.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery UI
Resizable Div Control</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
background-color:red;
}
#resizable h3 {
text-align: center;
margin: 0;
background-color:red;
}
</style>
<script>
$(function () {
$("#resizable").resizable();
});
</script>
</head>
<body>
<div id="resizable"
class="">
<h3>Resizable</h3>
</div>
</body>
</html>
|
Now we have done run the application and check the output.
About the Author
0 comments:
Please let me know your view