Resize able
描述 (Description)
Resize able函数可以与JqueryUI中的交互一起使用。 可以在任何DOM元素上启用此功能调整功能。使用光标抓住右边框或底部边框并拖动到所需的宽度或高度。
语法 (Syntax)
以下是使用可拖动的简单语法 -
$( "#resizable" ).resizable();
例子 (Example)
以下是一个简单的示例，显示了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;
font-weight: bold;
}
.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>
这将产生以下结果 -
新页面打开