首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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之尺寸调整组件的深入解析

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
JavaScript之自定义类型
May 04 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
DOM 高级编程
May 06 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
详解Jquery EasyUI tree 的异步加载（遍历指定文件夹，根据文件夹内的文件生成tree）
Feb 11 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
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
systemctl(1) Spring Data JPA(4) 池化技术(1) 线程池(1) Android(19) DHCP(2) 主题(1) Repository接口(3) JAVA(88) Ubuntu Server(6)
You might like
php csv操作类代码
2009/12/14 PHP
php中error与exception的区别及应用
2014/07/28 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
javascript制作坦克大战全纪录（2）
2014/11/27 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
Python中分数的相关使用教程
2015/03/30 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python程序控制NAO机器人行走
2019/04/29 Python
Python模块的制作方法实例分析
2019/12/21 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
What is the purpose of Void class? Void类的作用是什么？
2016/10/31 面试题
一道Delphi面试题
2016/10/28 面试题
庆元旦文艺演出主持词
2014/03/27 职场文书
社保委托书怎么写
2014/08/02 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
python运行脚本文件的三种方法实例
2022/06/25 Python