jquery------.resizable()的使用

最新推荐文章于 2025-07-26 10:34:35 发布

转载最新推荐文章于 2025-07-26 10:34:35 发布 · 95 阅读

文章标签：

#javascript #ui #ViewUI

本文介绍如何利用jQuery库中的resizable插件实现网页元素的动态调整大小功能，并通过具体的代码示例展示了如何设置元素的最小及最大尺寸、保持宽高比等特性。

index.jsp

//加上这两行代码，右下角会有样式效果
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">


<div id="other" >
        <div id="title" style="background-color:#aaa;width:100px;height:100px">哈哈</div>
</div>

my.js

$(document).ready(function(){
$("#other").find("#title").resizable({
        helper:"help",                  //移动时出现的边框
        handles: "se",                    //扩展的方向
        minHeight: 100,                    //滑动后最小高(宽)度
        maxHeight: 400,                    //滑动后最大高(宽)度
        animate:true,                    //滑动变化效果
        aspectRatio: 1/1,                //滑动宽高比
        //grid: 50,                        //以格子形式滑动
        alsoResize: "#tit",                //带动别的部件滑动
        ghost:true                        //带背影滑动
    });
});