可缩放Reloaded-一个针对可缩放元素的复用组件


Posted in Javascript onMarch 10, 2007

原文地址:http://www.jackslocum.com/blog/2006/11/24/resizable-reloaded/

这些范例展示了元素如何应用了一个浮动(默认)和装上可缩放的组件。

查看 basic.js 完整代码。

基本范例
这是个简单的可缩放的范例。在矩形附近可调节大小。这个例子采用了“浮动”的默认处理。

Resize Me!
 
 
 
var basic = new YAHOO.ext.Resizable('basic', {
    width: 200,
    height: 100,
    minWidth:100,
    minHeight:50
});

包裹元素

一些元素并没有子元素,例如images and textares。过去的做法是,你把这些元素放进一个可缩放的元素里面,作为其的子元素。到了yui-ext .33rc2,组件会将这些元素包裹好,即通过计算borders/padding应调整多少,偏移出合适的句柄。你所需要做的只是声明"wrap:true"。手工加入resizeChild做法也是支持的

调节栏
注意蓝色的调节栏。属性为 "pinned:true".

动态调整
如果您不想代理调整,可打开动态调整,只要"dynamic:true" 。

下面的textarea打开了动态调整,并附有调节栏。

 
 
 

如此简单的代码,连电脑装机的都会写

var dwrapped = new YAHOO.ext.Resizable('dwrapped', {
  wrap:true,
  pinned:true,
  width:450,
  height:150,
  minWidth:200,
  minHeight: 50,
  dynamic: true
});

按比例缩放
有些图像的按比例缩放,属性为: preserveRatio:true.

可缩放Reloaded-一个针对可缩放元素的复用组件
 
 
 
var wrapped = new YAHOO.ext.Resizable('wrapped', {
  wrap:true,
  pinned:true,
  minWidth:50,
  minHeight: 50,
  preserveRatio: true
});

直接方式
一种直接了当,不用花俏的处理方式。属性为 transparent to true.

可缩放Reloaded-一个针对可缩放元素的复用组件
 
 
 
var transparent = new YAHOO.ext.Resizable('transparent', {
  wrap:true,
  minWidth:50,
  minHeight: 50,
  preserveRatio: true,
  transparent:true
});

自定义方式
       八个方向的缩放。要使得元素在x、y方向可调节,那么这个元素应该是绝对定位的(positioned absolute). 你也可以通过属性"handles"来确定某一方向出现与否,而且允许你在CSS里修改它的样式。

这是一张八个方向的缩放的、自定义调节栏的、可移动的按正比例缩放的图片 (做起来不太容易!).
双击图片隐藏

var custom = new YAHOO.ext.Resizable('custom', {
  wrap:true,
  pinned:true,
  minWidth:50,
  minHeight: 50,
  preserveRatio: true,
  dynamic:true,
  handles: 'all', // shorthand for 'n s e w ne nw se sw'
  draggable:true
});

固定调节(译者注,这个功能好像有点问题,间歇性运行不正常,待修复!)
每次调节量都是 固定值

 
var snap = new YAHOO.ext.Resizable('snap', {
  pinned:true,
  width:250,
  height:100,
  handles: 'e',
  widthIncrement:50,
  minWidth: 50,
  dynamic: true
});
注意: 固定调节 和 按比例 是冲突的 ,不能用于一起。

加入动画效果
动画效果有两个参数 easing(特性) 和 duration(持续时间) 并 设置 animate:true,

Animate Me!
 
 
 
var animated = new YAHOO.ext.Resizable('animated', {
  width: 200,
  height: 100,
  minWidth:100,
  minHeight:50,
  animate:true,
  easing: YAHOO.util.Easing.backIn,
  duration:.6
});
注意:很明显的原因动画和动态调整dynamic是不能用在一起的。
Javascript 相关文章推荐
javascript静态的url如何传递
May 03 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
如何使用CocosCreator对象池
Apr 14 Javascript
代码解析React中setState同步和异步问题
Jun 03 Javascript
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 #Javascript
Gird事件机制初级读本
Mar 10 #Javascript
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 #Javascript
对YUI扩展的Gird组件 Part-2
Mar 10 #Javascript
对YUI扩展的Gird组件 Part-1
Mar 10 #Javascript
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
Mar 10 #Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 #Javascript
You might like
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
PHP多例模式介绍
2013/06/24 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
python爬虫要用到的库总结
2020/07/28 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
追悼会上的答谢词
2014/01/10 职场文书
统计系教授推荐信
2014/02/28 职场文书
爱国演讲稿500字
2014/05/04 职场文书
超市客服工作职责
2014/06/11 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
工程造价专业求职信
2014/07/17 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
2014年少先队工作总结
2014/12/03 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL