jQuery之尺寸调整组件的深入解析


Posted in Javascript onJune 19, 2013

1:尺寸调整组件(Resizable)组件可以使选定的DOM元素变成可调整尺寸的对象,即可以通过拖动调整手柄来改变其尺寸大小。
$(".selector").resizeable(options);
简单实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>resizable组件</title>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.resizable.js"></script>
<style type="text/css">
body {
 font-size:14px;
}
#wrap {
 clear:both;
 margin: 10px auto 10px auto;
 width: 287px;
 height:164px;
 border: 1px solid #BFBFBF;
 background-color: #fff;
 background-image: url(images/40.JPG);
}
h1 {
 color:#006;
 font-size:24px;
 font-weight:bold;
 text-align:center;
 margin-top:0px;
}
.drag {
 width:140px;
 height:100px;
 border: 1px solid #000;
 float:left;
 margin:20px 0  0 20px;
 background:#FFF;
}
img {
 width:200px;
 border:1px solid #D6D6D6;
 padding:4px;
 margin:2px;
}
</style>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
$(document).ready(function(){
  $("#car").resizable();
});
</script>
</head>
<body>
<img src="images/happy.gif" id="car" />
</body>
</html>

效果图:
jQuery之尺寸调整组件的深入解析

其实,在调用resizable()方法之后,将会在目标对象的右边框、下边框和右下角分别添加div元素,并对div元素依次添加ui-resizable-e, ui-resizable-s, ui-resizable-se类,从而形成拖动手柄

2:延迟调整

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>resizable组件</title>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.resizable.js"></script>
<style type="text/css">
body {
 font-size:14px;
}
#wrap {
 margin: 10px 20px 10px auto;
 padding: 10px;
 width: 350px;
 height:150px;
 background: #fff;
 border: 5px solid #000;
 float: right;
 overflow: auto;
}
.message_box {
 width:220px;
 height:200px;
 filter:dropshadow(color=#666666, offx=3, offy=3, positive=2);
 float:left;
 margin-right:10px;
}
#mask {
 position:absolute;
 top:0;
 left:0;
width:expression(body.clientWidth);
height:expression(body.clientHeight);
 background:#666;
 filter:ALPHA(opacity=60);
 z-index:1;
 visibility:hidden
}
.message {
 border:#036 solid;
 border-width:1 1 3 1;
 width:95%;
 height:95%;
 color:#036;
 font-size:12px;
 line-height:150%
}
.header {
 background:#036;
 height:22px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 padding:3px 5px 0px 10px;
 color:#fff;
 cursor:move;
}
ul {
 margin-right:25px;
}
.header div {
 display:inline;
 width:150px;
}
.header span {
 float:right;
 display:inline;
 cursor:hand;
}
fieldset {
 margin-bottom:5px;
}
.area {
 width:120px;
 border:2px solid #D6D6D6;
 margin:10px;
 background:#FFF;
 height: 80px;
 padding: 5px;
}
</style>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
$(document).ready(function(){
 $("#message_box1").resizable({
   delay: 500,      //delay属性设置时间延迟
   distance: 20,    //distance属性设置距离延迟
   minWidth:200,
   minHeight:200,
   alsoResize:".area"
  });
});
</script>
</head>
<body>
<div id="message_box1" class="message_box" >
  <div class="message" >
    <div class="header">
      <div>延迟调整</div>
      <span>×</span></div>
    <div class="area">拖动最外边框查看效果,参数如下<br/>
    时间延迟:500<br/>
     距离延迟:20</div>
  </div>
</div>
</body>
</html>

jQuery之尺寸调整组件的深入解析
3:动态调整效果
需要借助尺寸调整组件的一下属性来实现:
*为helper属性设置一个CSS样式类,该样式类将在调整过程中显示元素大小的轮廓,操作结束后才调整原始元素的大小
*设置ghost属性为true,在调整过程中显示一个半透明的辅助元素
*将animate属性设置为true,为元素的调整过程添加动画效果
*为animateDuration属性指定一个值,设置动画过程持续的时间
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>resizable组件</title>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.resizable.js"></script>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
body {
 margin:0;
 padding:0;
 font-size:14px
}
.content {
 margin-left:10px;
 line-height:24px;
}
#wrap {
 margin: 20px auto 10px auto;
 width: 390px;
 background: #fff;
 padding: 10px;
 border: 5px solid #000;
 text-align: left;
}
h1 {
 color:#006;
 font-size:24px;
 font-weight:bold;
 text-align:center;
 margin-bottom:0px;
}
h2 {
 font-size:12px;
 text-align:center;
 font-weight:normal;
 border-top:#ccc 1px dashed;
 color:#666;
 height:24px;
 margin:3px 5px 8px 0;
 background:#f5f5f5
}
p {
 text-indent: 20px;
}
.ui-resizable-helper {
 border: 2px dashed #600;
}
</style>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
$(document).ready(function(){
 $("#wrap").resizable({
  ghost: true,   
  animate: true,
  animateDuration: 1000,
  helper: "ui-resizable-helper",
  minWidth: 300,
  minHeight: 200
 });
});
</script>
</head>
<body>
<div id="wrap">
  <h1>魔兽争霸</h1>
  <h2>来源:知识宝库网 | 浏览次数:431052次 | 创建时间:2010-10-23</h2>
  <p>魔兽争霸是一款非常著名的即时战略游戏。制作公司是美国的暴雪公司。最新版本为“魔兽争霸3:冰封王座”,目前的版本号为1.24.1.6374(更新至2009年8月26号)。</p>
  <p>目前是单机游戏中非常受欢迎的游戏,除此之外,魔兽争霸还包括了游戏的同名电影。 </p>
</div>
</body>
</html>

效果图:
 jQuery之尺寸调整组件的深入解析
4:尺寸调整组件的方法
尺寸调整组件有4个方法,他们都是拖动组件和投放组件所共有的,即disable方法、enable方法、destroy方法和option方法
   //禁止调整尺寸功能
  $(".selector").resizable('disable');
  //重新激活对象的可调整尺寸功能
  $(".selector").resizable('enable');
 //移除可调整尺寸功能
 $('.selector').resizable('destroy');
 //在初始化后设置maxHeight属性的值为480
  $('.selector').resizable('option', 'maxHeight', 480);
 //在初始化后获取maxHeight属性的值
  $('.selector').resizable('option', "maxHeight");

5:调整事件回调函数
start:事件类型resizestart, 开始拖动改变大小时触发
resize: 事件类型resize, 拖动过程中,鼠标每移动一像素就触发一次
stop: 事件类型resizestop, 停止拖动时触发
  $("#droppable").droppable({ 
     eventName: function(event, ui) {
        //具体处理代码,this表示可调整尺寸的对象
    }
});

ui则是一个包含附加信息的jQuery对象,该jQuery对象具有一下属性:
helper: 一个jQuery对象,表示可拖动助手元素
originalPosition: 一个包含top属性和left属性的对象,表示开始调整前元素相对于原始对象的位置
originalSize: 一个包含width和height属性的对象,表示开始调整前元素的尺寸大小
position: 一个包含top属性和left属性的对象,表示当前元素相对于原始对象的位置
size: 一个包含width属性和height属性的对象,表示当前元素的尺寸大小
简单示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>resizable组件</title>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.resizable.js"></script>
<style type="text/css">
body {
 font-size:14px;
}
#wrap {
 margin: 10px 20px 10px auto;
 padding: 10px;
 width: 450px;
 height:150px;
 background: #fff;
 border: 5px solid #000;
 float: right;
 overflow: auto;
}
.message_box {
 width:200px;
 height:200px;
 /* filter:dropshadow(color=#666666, offx=3, offy=3, positive=2);*/
 float:left;
 margin-right:10px;
}
/*#mask {
 position:absolute;
 top:0;
 left:0;
width:expression(body.clientWidth);
height:expression(body.clientHeight);
 background:#666;
 filter:ALPHA(opacity=60);
 z-index:1;
 visibility:hidden
}*/
.message {
 border:#036 solid;
 border-width:1 1 3 1;
 width:95%;
 height:95%;
 color:#036;
 font-size:12px;
 line-height:150%
}
.header {
 background:#036;
 height:22px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 padding:3px 5px 0px 10px;
 color:#fff;
 cursor:move;
}
ul {
 margin-right:25px;
}
.header div {
 display:inline;
 width:150px;
}
.header span {
 float:right;
 display:inline;
 cursor:hand;
}
fieldset {
 margin-bottom:5px;
}
img {
 width:100px;
 border:2px solid #D6D6D6;
 margin:10px;
}
.ui-active {
 background:#CC0;
}
.ui-hover {
 background:#339;
}
.ui-highlight {
 background:#000;
}
</style>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="message_box1" class="message_box" >
  <div class="message" >
    <div class="header">
      <div>茄菲猫</div>
      <span>×</span></div>
    <img src="images/jiafeimao.jpg" id="pic1"/> </div>
</div>
<div id="wrap"></div>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
 $("#pic1").resizable({alsoResize:"#message_box1",
  minHeight:100,
  minWidth:100,
  start:eventCallback,
  resize:eventCallback,
  stop:eventCallback
  });
 function eventCallback(e, ui) {
  var content = "事件类型:" + e.type + ",当前大小:" + ui.size.width+ "*" + ui.size.height + ",原始大小:"+ui.originalSize.width+"*"+ui.originalSize.height+"<br/>";
  var message = $("<span>").text(content);
  $("#wrap").append(content);
 }
});
</script>
</body>
</html>

jQuery之尺寸调整组件的深入解析
Javascript 相关文章推荐
jquery ui对话框实例代码
May 10 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
JavaScript严格模式详解
Nov 18 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
jQuery之排序组件的深入解析
Jun 19 #Javascript
jQuery之日期选择器的深入解析
Jun 19 #Javascript
jQuery之按钮组件的深入解析
Jun 19 #Javascript
jQuery之自动完成组件的深入解析
Jun 19 #Javascript
jQuery之折叠面板的深入解析
Jun 19 #Javascript
jQuery之选择组件的深入解析
Jun 19 #Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 #Javascript
You might like
PHP错误提示的关闭方法详解
2013/06/23 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
python中return的返回和执行实例
2019/12/24 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
名人演讲稿范文
2013/12/28 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
小学生校园广播稿
2014/09/28 职场文书
小石潭记导游词
2015/02/03 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
Nginx报404错误的详细解决方法
2022/07/23 Servers