0
点赞
收藏
分享

微信扫一扫

【EasyUI篇】Resizable (调整大小组件)


​​查看--> 全套EasyUI示例目录​​

Resizable (调整大小组件)

 

【EasyUI篇】Resizable (调整大小组件)_html

【EasyUI篇】Resizable (调整大小组件)_javascript_02

【EasyUI篇】Resizable (调整大小组件)_css_03

 

JSP文件

<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Droppable</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Resizable.js"></script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>

<%--使用class加载方式--%>
<%--maxWidth:600, maxHeight:400 设置最大高度和最大宽度--%>
<%-- <div id="rr" class="easyui-resizable"
data-options="maxWidth:600, maxHeight:400,"
style="width: 100px; height: 100px; border: 1px solid black;">
</div>--%>

<div id="rr" style="width: 100px; height: 100px; border: 1px solid black;">
</div>

</body>
</html>

JS文件

$(function () {


//使用$.fn.resizable.defaults 重写默认值对象。
$.fn.resizable.defaults.disabled = true;

/*使用js加载方式*/
$("#rr").resizable({

//-------------- 属性列表 ----------------
//设置为不可改变大小,即禁用
// disabled : true,
//设置可拖动该变大小的方向
// handles:'e,s',
minWidth:200,
minHeight:200,
maxWidth:400,
maxHeight:400,
//设置触发区域离边框的距离
// edge:20,
//-------------- 事件列表 ----------------
onStartResize:function (e) {
// alert("开始改变时触发");
// $(this).css('background','green');
},
onResize: function (e) {
//改变过程中触发
// alert("改变过程中触发");
// $(this).css('background','red');
//return false; 表示在改变的过程中不是立即改变DOM的大小,而是直接显示停止改变的额结果。
},
onStopResize: function (e) {
// alert("停止改变时触发");
}


});
//------------- 方法列表 -----------------
console.log($("#rr").resizable('options'));
//禁用
// $("#rr").resizable('disable');
//启用
$("#rr").resizable('enable');

});

注意

onResize 如果返回false,不会立即改变元素的大小,而是直接显示改变停止的结果。

 

 

------------------------------------------------

【EasyUI篇】Resizable (调整大小组件)_css_04

举报

相关推荐

0 条评论