可缩放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 相关文章推荐
js中top/parent/frame概述及案例应用
Feb 06 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
JavaScript数组 几个常用方法总结
Nov 11 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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
php session的应用详细介绍
2017/03/22 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
javascript document.referrer 用法
2009/04/30 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
python常见数制转换实例分析
2015/05/09 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
windows下python和pip安装教程
2018/05/25 Python
django自定义模板标签过程解析
2019/12/14 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
基于python实现操作redis及消息队列
2020/08/27 Python
《曹刿论战》教学反思
2014/03/02 职场文书
三方股份合作协议书
2014/10/13 职场文书
英语教师个人总结
2015/02/09 职场文书
郭明义电影观后感
2015/06/08 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
python神经网络Xception模型
2022/05/06 Python