码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-05-13 19:04:42      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:

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                        //带背影滑动
    });
});

 

效果图:

技术分享

 

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

标签:

原文地址:http://www.cnblogs.com/tianhengblogs/p/5490332.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!