能够调整大小功能可与JqueryUI中的交互配合使用。可以在任何DOM元素上启用"调整大小功能"功能。使用光标抓住右边框或底边框并拖动到所需的宽度或高度。
Resize able - 语法
$( "#resizable" ).resizable();
Resize able - 示例
以下是显示可调整大小的用法的简单示例-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable functionality</title>
<link
href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<!-- CSS -->
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable-14{ width: 150px; height: 150px;
padding: 0.5em;text-align: center; margin: 0; }
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#resizable-14" ).resizable({
create: function( event, ui ) {
$("#resizable-15").text ("I'm Created!!");
},
resize: function (event, ui) {
$("#resizable-16").text ("top=" + ui.position.top +
", left=" + ui.position.left +
", width=" + ui.size.width +
", height=" + ui.size.height);
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id="resizable-14" class="ui-widget-content">
<h3 class="ui-widget-header">Resize !!</h3>
</div><br>
<span id="resizable-15"></span><br>
<span id="resizable-16"></span>
</body>
</html>
这将产生以下输出-
参考链接
https://www.learnfk.com/jquery/interactions-resizeable.html
标签：jQuery,resizable,text,无涯,height,width,ui,Resizeable,Resize From： https://blog.51cto.com/u_14033984/6893104