首页 » WEB开发 » 正文

jQuery UI 学习 — resizable的使用

resizable的作用,就是可以通过鼠标的拖拉改变对象的“型号”,也就是size。只不过这种size仅仅是二维的,以后或许能够支持3D的,这是有可能的。

resizable小常识:一个对象可以缩放,自然就能够具有向不同的方向进行缩放了。也就能向八个方向进行缩放。那么它是怎样缩放的呢?当然是通过我们的鼠标去触发动作事件了。所以鼠标通过拖动进行缩放的那个点就是handle。resizable对象最多可以设置八个方向的handle,也就是”n, e, s, w, ne, se, sw, nw”,对应就是北,东,南……,感觉改成上下左右更好理解一点……

那么如何构建一个具有resizable功能的对象呢?下面让我们一起见证resizable发生的时刻!

第一,加入相应的js库文件以及css样式文件:

   1: <link rel="stylesheet" href="js/themes/flora/flora.all.css"
   2:     type="text/css" media="screen" title="Flora (Default)"/>
   3: <script type="text/javascript" src="js/.js"></script>
   4: <script type="text/javascript" src="js/ui/ui.core.js"></script>
   5: <!--resizable.js很显然就是resizable的核心文件-->
   6: <script type="text/javascript" src="js/ui/ui.resizable.js"></script>
   7: <script type="text/javascript" src="js/ui/ui.draggable.js"></script>

第二,在html加入div:

   1: <div id='example' class="resizable">
   2: <div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>Resize me</div>
   3: </div>

第三,添加JavaScript代码,实现resizable:

   1: $(document).ready(function(){
   2:       $("#example").resizable();
   3: });

很简单三个步骤就可以实现对具有resizable属性的对象了。当然resizable还有很多属性可以设置的,达到实现不同的效果。请看下面的代码:

   1: $("#example").resizable({
   2:         handles:"all",            //定义可变化大小的方向,可选值"n, e, s, w, ne, se, sw, nw","all"代表全部
   3:         //helper:"proxy",
   4:         aspectRatio: true,        //是否同步向x,y变化大小,也就是按照原有的比例缩放 默认是false
   5:         autoHide: true,          //是否自动隐藏变化控制器
   6:         transparent: false,
   7:         grid: [10, 10],            //定义x,y轴两个方向的变化步进,单位px
   8:         animate: true,           //定义延迟是否变化大小
   9:         animateDuration: "slow", //变化速度
  10:         animateEasing: "swing",
  11:         ghost: true,             //是否显示变化影子,利用此属性可以较为精确定位 (估计这比较难理解,尝试改变属性值就清楚了)
  12:         start:function(e,ui){$(this).append("Start!");},  //定义开始变化大小时执行的函数
  13:         resize:function(e,ui){},                          //定义在变化大小时执行的函数
  14:         stop:function(e,ui){$(this).append("Stop!");}    //与start相反
  15:         //draggable() 是使一个对象具有拖动的功能
  16:     }).draggable();

resizable不仅可以操作一个div节点,还可以对一个img元素以及<textarea/>.对于img我们就通过拖拉改变img的大小了。<textarea/>就类似一个公告栏了。这里讲到的就是resizable的应用了。呵呵!

先看如何通过resizable来改变img的大小:1.定义一个<img/> 2.调用resizable

   1: <div id="example2" class="resizable">
   2: <img id="image" src="image/resizable.jpg"/>
   3: </div>
   4: --我是分隔符哦!!以上是html代码,以下是JavaScript代码----------
   5: $(document).ready(function(){
   6:   //变化图片的大小,也可以直接使用$("#image").resizable();
   7:   $("#example2").resizable({
   8:       handles: "all",
   9:       resize:function(e,ui){
  10:           $("#image").width(ui.size.width);
  11:           $("#image").height(ui.size.height);
  12:       }
  13:   }).draggable();
  14:   $("#image").width($("#example2").width());
  15:   $("#image").height($("#example2").height());
  16: });

<textarea/>的demo就留给读者自己完成了。

OK,resizable就是这样的了,不知道大家是否自己尝试了没有?

To Be continue……

PS:有些属性没有具体讲解,只是贴出代码,因为有些是用语言难以表达的,大家可以尝试改变属性值来认识他们的作用。

本文链接地址: jQuery UI 学习 — resizable的使用

转载请注明: 转载自技安后院

本文共 1 个回复

发表评论