Resizable(调整大小)组件

一、class加载方式

<div id="pop" class="easyui-resizable" data-options="maxWidth:400, maxHeight:400" style="width: 100px;height: 100px;background-color: powderblue"></div>

二、js加载方式

$("#pop").resizable({

//属性
            disabled:false , //设置为 true 则禁用调整,默认为 false
            handles:‘s,e‘, //值为string ,声明调整的方位 n/s/w/e/ne/se/sw/nw/all -> 北/南/西/东
            minWidth:200 , //最小宽度 默认为10
            minHeight:200, //最小高度 默认为10
            maxWidth:400 , //最大宽度 默认为10000
            maxHeight:400 , //最大高度 默认为10000
            edge:50 , //边框边缘触发大小 默认 5
      //事件
           onResize:function () {
                 return false
           }, //在调整大小期间触发。当返回 false 的时候, 不会实际改变 DOM 元素大小,直到松开鼠标左键才会改变DOM元素大小
          onStartResize : function (e) {}, //在开始改变大小的时候触发
          onStopResize : function (e) {}, //在停止改变大小的时候触发

});
     //方法
         $(‘#pop‘).resizable(‘options‘); //返回属性对象
         $(‘#box‘).resizable(‘disable‘); //禁止调整
         $(‘#box‘).resizable(‘enable‘); //启用放置

三、可以使用重写默认值对象?  如:$.fn.resizable.defaults.disabled = true

原文地址:https://www.cnblogs.com/Alaic2052243080/p/11437646.html

时间: 2024-11-05 21:40:48

Resizable(调整大小)组件的相关文章

jQuery Easy UI Resizable(调整大小)组件

Resizable(调整大小)组件,easyui基础组件之一,调整大小就是可以对元素可以拖着调整大小,这个组件不依赖于其他组件,使用比较简单,相关的属性.事件都 在例子中介绍了. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/jav

JQuery-Easyui----Resizable( 调整大小) 组件

学习要点: 1.加载方式2.属性列表3.事件列表4.方法列表 本节重点了解 EasyUI 中 Resizeable(调整大小)组件的使用方法,调整大小就是可以对元素可以拖着调整大小,这个组件不依赖于其他组件. 一.加载方式 在Easyui中所有的组件都有二种加载方式 class加载方式 <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset=&quo

EasyUI系列学习(五)-Resizable(调整大小)

一.创建组件 1.使用标签创建可变大小的窗口 <div id="rBox" class="easyui-resizable" style="width: 200px; height: 100px; left: 100px; background:cyan"></div> 2.使用JavaScript创建可变大小的窗口 <div id="rBox" style="width: 200px;

EasyUI - Resizable 调整大小

效果: html代码: <div id="rr" style="width: 100px; height: 100px; border: 2px solid #ccc;"></div> JS代码: $(function () { $('#rr').resizable({ maxWidth: 800, maxHeight: 600 }); })

07 jQuery EasyUI 之Resizable调整大小

如果初始化一个DIV并设置了高度宽度,但是又想动态改变div尺寸大小,就需要使用Resizable Resizable插件有2种方式实现 第一种 通过标记创建Resizable对象 <div class="easyui-resizable" style="width:100px;height:100px;border:1px solid #ccc;"   data-options="maxWidth:800,maxHeight:600"&g

第二百零二节,jQuery EasyUI,Layout(布局)组件

jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个组件依赖于 Panel(面 板)组件和 resizable(调整大小)组件. 一.加载方式 class 加载方式,这个属性一般使用class方法使用 <body id="box" class="easyui-layout"> <div data-opt

layout(布局)组件

一.依赖于 Panel(面 板)组件和 resizable(调整大小)组件. 二.class加载方式    <div id="box" class="easyui-layout" style="height: 600px;width: 400px"> <div data-options="region:'north'" title="north" style="height: 1

jQuery Easy UI整理笔记目录

jQuery Easy UI整理笔记目录 ps:最近对Easy UI比较感兴趣,打算系统的学习一下,前面基础部分的东西很简单,都是参照API去写的,例子也就是随便举的,没有列举项目中的实际应用. 打算基础部分后面的知识多投入点时间,多与项目中的实际相结合一些,也尽量多想象出一些应用场景. 计划最慢每周更新一篇文章. 一.基础组件部分 1. jQuery Easy UI的使用 2. jQuery Easy UI Draggable(拖动)组件 3. jQuery Easy UI Droppable

JqueryEasyUI教程

第一章EasyUI中弹出框dialog的使用为div标签加上class="easyui-dialog"即可使用一.引入文件介绍jquery.min.js:jquery核心文件,不再支持IE9以下文件:jquery.easyui.min.js:easyui核心文件:easyui-lang-zh_CN.js:EasyUI中文提示信息easyui.css:EasyUI核心UI文件CSSicon.css:EasyUI图标文件二.Parser解析器,Parser解析器是专门解析渲染各种UI组件的