Adobe的Flex在有些地方确实不尽如人意,比如前面提到的HTML嵌入式支持,而TitleWindow不支持“缩放和调整大小”也是很让人不爽,这种情况下只能外围扩展。
在很多实际应用中都需要Popup窗口,这个窗口一般都是TitleWindow,当然我们也希望其能够支持Resizable,min,max。
我之前一直是模拟Jove写的那个ResizeManager的自己写的一个ResizeTitleWindow,勉强可以使用。Jove那个ResizeManager可以从 http://www.adobe.com/cfusion/communityengine/index.cfm?event=showDetails&loc=en_US&postId=1685&productId=2这个地址获取,有源码和样例可供参考。一般来讲直接使用ResizeManager来操作就可以了,但我这边还需要对一些额外事件多监听和处理,所以不得不改写它。
前些日子,又看了看FlexLib(http://flexlib.googlecode.com)
的MDI Window组件。MDI Window功能很cool,不过不支持模态。另外就是“侵入性”太强,其必须在一个MDI
Canvas画布中,并被MDI
Manager所管理。所以如果很简单使用(就像PopupManager简单弹出一个TitleWindow)那样使用,是不可能的了。
但MDI Window用于解决符合那种“在一个控件内存在很多Panel”的场景非常适合,也非常cool。
最近发现一个新的ResiableTitleWindow,比较好用,推荐一下。在http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1207017&loc=en_us#可以下载到。基本上直接引入就可以使用了。不过你们很多事件处理方式采用了private方法,所以建议大家改成protect,以便于扩展。
如果你想实现不同的“最大”“最小”“关闭”按钮图标,也非常容易,只需要设置相应的css即可。在下载的样例中有详细的参考。
分享到:
相关推荐
flex.resizable.comp Flex 可调整大小的组件。
ResizableTitleWindow 可拖拽和改变大小的titlewindow.挺好用的。
前端开源库-re-resizable可重新调整大小,可调整大小的组件用于响应。
前端项目-angular-resizable,用于以角度创建可调整大小的容器的指令。
通过jquery.ui.resizable实现通过拖拽改变左右两个容器的大小。
可调整大小的 一个简单的小部件,可以通过一个或多个手柄调整...const Resizable = require ( 'react-resizable' ) . Resizable ; // or, const ResizableBox = require ( 'react-resizable' ) . ResizableBox ; // ES
JQueryUI--Resizable()---为拖动层添加右下角的拖动图标,对应博客地址:http://blog.csdn.net/harvic880925/article/details/8469248
bootstrapTable 拖动调整列宽,极其简单的示例,在浏览器中打开resizable.html即可
最近因为项目需要,可拖动宽度的类似excel中的table布局,这个代码需要好好研究下子,应该是可以满足需求的
可调整角度的元素 演示版 目录 关于 6.0+角度指令,允许拖动和调整元素的大小 安装 通过npm安装: npm install --save angular-resizable-element 然后像下面这样在您的应用... display: flex; align-items: center
arrowRight:增加宽度20px ctrl + arrowUp:将高度增加20像素ctrl + arrowDown:降低高度20像素目录安装要安装,您可以使用或 : $ npm install react-modal-resizable-draggable$ yarn add react-modal-resizable-...
基本用法:< ReSizable xss=removed xss=removed> Your Content</ ReSizable> 这将使<ReSizable>根据用户输入调整其大小。 如果要手动控制其大小,请绑定到onResize而不设置width和height 。 当然也可以手动设置...
var resizable = require('resizable'); var element = document.querySelector('.myResizable'); var myResizable = new resizable(element); 您还可以传入一些选项来配置可调整大小的行为。 这些如下: ...
Re-F | ex是我创建的基于React flex的布局组件库,因为在那里发现的所有组件都不能满足我的要求。 它旨在以简单的方式解决需要可调整大小的布局的高级React Web应用程序的需求。 这是一个基本的演示: import ...
请转到或者,您可以在自己的计算机上运行游乐场: 克隆此存储库npm install npm run storybook 访问安装和基本用法$ npm install --save vue-draggable-resizable 注册组件import Vue from 'vue'import ...
其实这个也不算是 resizable 的BUG,但从官网下载下来的确实存在问题
react-resizable-and-movable - 可调整大小、可拖动的React
安装npm install --save react-resizable-rotatable-draggable 然后,您将需要安装对等依赖性npm install --save styled-components用法import React , { Component } from 'react'import ResizableRect from 'react...
使用react-resizable-bar的最简单方法是从NPM安装它,并将其包含在您自己的React构建过程中(使用 , 等)。 您还可以通过在页面中包含dist/react-resizable-bar.js来使用独立构建。 如果使用它,请确保已经包含...