首页
所有分类
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 相关文章推荐
Javascript 面向对象 重载
May 13 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
javascript实现倒计时（精确到秒）
Jun 26 Javascript
微信小程序 高德地图SDK详解及简单实例（源码下载）
Jan 11 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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
触发器(3) RabbitMQ(3) Bean(3) IOC(3) 入门基础(1) Hash(1) XML(1) 数据类型(8) Geospatial(1) Vmware(3)
You might like
用Flash图形化数据(一)
2006/10/09 PHP
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
无法在发生错误时创建会话，请检查 PHP 或网站服务器日志，并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
Javascript MD4
2006/12/20 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
Python实现合并字典的方法
2015/07/07 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
python实现数据写入excel表格
2018/03/25 Python
对Python 语音识别框架详解
2018/12/24 Python
中东地区为妈妈们提供一切的头号购物目的地：Sprii
2018/05/06 全球购物
高级方案规划工程师岗位职责
2013/11/29 职场文书
银行领导证婚词
2014/01/11 职场文书
商铺租赁意向书
2014/04/01 职场文书
师范生自荐信模板
2014/05/28 职场文书
2014小学年度工作总结
2014/12/20 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
八年级英语教学反思
2016/02/15 职场文书
CSS作用域（样式分割）的使用汇总
2021/11/07 HTML / CSS
vue项目如何打包之项目打包优化（让打包的js文件变小）
2022/04/30 Vue.js