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

原文地址: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打开了动态调整,并附有调节栏。

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa.
Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.

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

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


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

var wrapped = new YAHOO.ext.Resizable('wrapped', {
wrap:true,
pinned:true,
minWidth:50,
minHeight: 50,
preserveRatio: true
});


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

var transparent = new YAHOO.ext.Resizable('transparent', {
wrap:true,
minWidth:50,
minHeight: 50,
preserveRatio: true,
transparent:true
});


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

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

Show Me图片出现在上方

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是不能用在一起的。

(0)

相关推荐

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

    原文地址: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

  • vue集成一个支持图片缩放拖拽的富文本编辑器

    需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很难找到一个完美符合自己要求的编辑器.经过多次尝试,最终选择了wangEditor富文本编辑器. 最初使用的是vue2Editor富文本编辑器,vue2Editor本身是不支持图片拖拽的,但是提供了可配置图片拖拽的方法,需要借助Quill.js来实现图片拖拽.虽然满足了业务需求,但是在移动端展示的效果不是很理想. 此次编辑器主要是

  • 缩放文字,不仅仅只是缩放文字

    前些天Ian Liu发了篇有趣的发现:细致的易用性考虑,主要是讲网页的缩放,比如文章提到的IKEA网站.当然,最有价值的是评论部分,有兴趣的朋友可以先去看一下. 各个浏览器都有各自实现缩放的机制大约如下: IE7:整个页面缩放与文字缩放,鼠标操作(Ctrl+鼠标滚轮)为整个页面缩放,文字缩放没有提供快捷键,只能通过浏览器菜单操作(查看 ›文字大小 ›大|小)来选择. IE5~6:文字缩放,鼠标操作与浏览器菜单操作都是一样的功能. Firefox2:文字缩放,鼠标操作和浏览器菜单操作(菜单快捷键:

  • php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。

    array_push() 定义和用法 array_push() 函数向第一个参数的数组尾部添加一个或多个元素(入栈),然后返回新数组的长度. 该函数等于多次调用 $array[] = $value. 语法 array_push(array,value1,value2...)参数 描述 array 必需.规定一个数组. value1 必需.规定要添加的值. value2 可选.规定要添加的值. 提示和注释 注释:即使数组中有字符串键名,您添加的元素也始终是数字键.(参见例子 2) 注释:如果用 a

  • php使用array_rand()函数从数组中随机选择一个或多个元素

    使用array_rand() 函数从数组中随机选出一个或多个元素,并返回. 复制代码 代码如下: array_rand(array,number) 参数 描述 array 必需.规定输入的数组参数. number 可选.默认是 1.规定返回多少个随机的元素. 例子: 复制代码 代码如下: <?php $a=array("a"=>"Dog","b"=>"Cat","c"=>"

  • C#不重复输出一个数组中所有元素的方法

    本文实例讲述了C#不重复输出一个数组中所有元素的方法.分享给大家供大家参考.具体如下: 1.算法描述 0)输入合法性校验 1)建立临时数组:与原数组元素一样.该步骤的目的是防止传入的原数组被破坏 2)对临时数组进行排序 3)统计临时数组共有多少个不同的数字.该步骤的目的是为了确定结果集数组的长度 4)建立结果集数组,只存放不同的数字 5)返回结果集 2.函数代码 /// <summary> /// 建立包含原数组内所有元素且元素间互不重复的新数组 /// </summary> //

  • php数组函数序列之array_unshift() 在数组开头插入一个或多个元素

    array_unshift()定义和用法 array_unshift() 函数在数组开头插入一个或多个元素. 被加上的元素作为一个整体添加,这些元素在数组中的顺序和在参数中的顺序一样. 该函数会返回数组中元素的个数. 语法 array_unshift(array,value1,value2,value3...)参数 描述 array 必需.规定输入的数组. value1 必需.规定插入的值. value2 可选.规定插入的值. value3 可选.规定插入的值. 提示和注释 注释:所有的数值键名

  • python 求一个列表中所有元素的乘积实例

    如下所示: # 求一个列表中所有元素的乘积 from functools import reduce lt = [1,2,3,4,5] ln = reduce(lambda x,y:x * y,lt) print(ln) 以上这篇python 求一个列表中所有元素的乘积实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • python找出一个列表中相同元素的多个索引实例

    定义:X=[1,2,3,1,4] 任务:找出元素为1的索引 Solution: # 如果直接用X.index(1),只能得到0这一个索引,而我们需要所有索引. l = len(X) zip_list = zip(*(range(l),X)) id1 = [z[0] for i,z in enumerate(zip_list) if z[1]==1] # 或者更简单的 id1 = [i for i,x in enumerate(X) if x==1] 以上这篇python找出一个列表中相同元素的多

  • Vue学习笔记进阶篇之多元素及多组件过渡

    本文介绍了vue 多元素及多组件过渡,这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 多元素的过渡 对于原生标签可以使用 v-if/v-else.但是有一点需要注意: 当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容.即使在技术上没有必要,给在 <transition> 组件中的多个元素设置 key 是一个更好的实践. 示例: <transition> <button v

随机推荐