JQuery UI Resizable Example

Jqury UI

Nicesnippets

285

05-06-2020


Hi Dev,

In this blog, I will show you resible element in jquery ui. Resible selected element using jquery ui.The resizeable widget of jquery ui helps to drag and resize the selected elements.

jquery ui resizable() method used to resize selected element.It is easy and simply to resize select element.This method show icon in the right bottom to the selected element.

Example :

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Resizable Example</title>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<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>

<style>

#resizable { width: 150px; height: 150px;margin:40px auto; padding: 0.5em; border:2px solid #008B8B;}

#resizable h3 { text-align: center; margin: 0;padding:5px;letter-spacing:1px; background: #008B8B;color:#fff;border:1px solid #fff; }

</style>

</head>

<body>

<h2>jQuery UI Resizable Example - NiceSnippets.com</h2>

<div id="resizable" class="ui-widget-content">

<h3 class="ui-widget-header">Resizable</h3>

</div>

<script>

$( function() {

$("#resizable").resizable();

});

</script>

</body>

</html>

It will help you....


Recommended Posts