jQuery Easy UI Resizable(调整大小)组件
Resizable(调整大小)组件，easyui基础组件之中的一个。调整大小就是能够对元素能够拖着调整大小，这个组件不依赖于其它组件，使用比較简单，相关的属性、事件都
在样例中介绍了。
演示样例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script>
$(function () {
$.fn.resizable.defaults.disabled = true;
$('#rr').resizable({
disabled : false, //设置为true的时候禁止调整
handles : 'e,s,se', //声明调整的方位：n：北 e：东 s：南 w：西 除此之外还有ne、se、sw、nw和all。
minWidth : 200, //默觉得10 调整大小的时候最小宽度
minHeight : 200, //默觉得10 调整
maxWidth : 600, //默觉得10000 调整大小时默认最大宽度
maxHeight: 400, //默觉得10000 调整大小时默认最大高度
edge : 10, //默认5 边框边缘触发大小(就是多大区域触发可拖拽边线) //通过浏览器控制台能够清晰的看到以下几个事件的触发时机以及触发次数
onStartResize : function (e) {
console.log('開始调整的时候触发！ ');
},
onResize : function (e) {
console.log('调整期间的时候触发！');
//return false;
},
onStopResize : function (e) {
console.log('停止调整的时候触发！ ');
},
}); console.log($('#rr').resizable('options'));//返回对象属性 $('#rr').resizable('disable'); //禁用调整功能
$('#rr').resizable('enable'); //启用调整功能
});
</script>
</head>
<body>
<div id="rr" style="width:100px;height:100px;border:1px solid black"></div>
</body>
</html>
jQuery Easy UI Resizable(调整大小)组件的更多相关文章
- 第一百九十五节，jQuery EasyUI，Resizable(调整大小)组件
jQuery EasyUI,Resizable(调整大小)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Resizeable(调整大小)组 ...
- jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
- jQuery Easy UI Draggable(拖动)组件
上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...
- jQuery Easy UI Panel(面板)组件
panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...
- jQuery Easy UI Tooptip(提示框)组件
我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...
- 7个jquery easy ui 基本组件图解
以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...
- jQuery Easy UI ProgressBar（进度条）组件
ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...
- jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
随机推荐
- php 判断是否登录
<?php // 本类由系统自动生成,仅供测试用途 class IndexAction extends Action { public function _before_index(){ //做 ...
- 百度——地图API——IOS v2.0.2—入门篇
建议高手飘过------ 本以为一个地图的helloworld很简单.实际使用却不是那么回事.就想把地图的头文件和静态库添加到文件中.应该就能用了. baidu提供的xcode工程是支持ios4.3的 ...
- Shell脚本运行hive语句 | hive以日期建立分区表 | linux schedule程序 | sed替换文件字符串 | shell推断hdfs文件文件夹是否存在
#!/bin/bash source /etc/profile; ################################################## # Author: ouyang ...
- 10994 - Simple Addition(规律)
Problem E Simple Addition Input: Standard Input Output: Standard Output Let’s define a simple recurs ...
- python读写xml
来自http://blog.csdn.net/liuyuehui110/article/details/7287897 备份防止链接失效 一.XML的读取. 在 NewEdit 中有代码片段的功能,代 ...
- CodeForces 189A 166E 【DP ·水】
非常感谢 Potaty 大大的援助使得我最后A出了这两题DP ================================== 189A : 求切分后的ribbon最多的数目,不过要求切分后只能存 ...
- QDebug &operator<<出错（根据QString来找，是不得要领的，而是应该根据QString所在的对象来思考）
程序运行后,总是崩溃在这个地方:inline QDebug &operator<<(const QString & t) 我应该用什么办法找出是哪个QString出了问题呢 ...
- WPF: 针对Windows 8优化菜单栏和工具栏
原文 WPF: 针对Windows 8优化菜单栏和工具栏 目录 1. 关于菜单图标大小 2. 关于IsEnabled和工具栏图标 3. 针对.NET 3.x的菜单栏和工具栏外观 返回目录 1. 关于菜 ...
- 数据分析≠Hadoop+NoSQL
数据分析≠Hadoop+NoSQL 目录(?)[+] Hadoop让大数据分析走向了大众化,然而它的部署仍需耗费大量的人力和物力.在直奔Hadoop之前,是否已经将现有技术推向极限 ...
- eclipse中build workspace的相关优化
网上流传的各种的eclipse的调优的方法都大同小异,但是调优的基本上针对eclipse或者myclipse的本身,比如关掉validate和启动项,文件拼写,和自动构建等,调过之后,等个eclips ...