easyUI resizable组件使用：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="easyui/jquery.min.js"></script>

    <script src="easyui/jquery.easyui.min.js"></script>

    <script src="easyui/locale/easyui-lang-zh_CN.js"></script>

    <script src="js/test005.js"></script>

    <link rel="stylesheet" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" href="easyui/themes/icon.css">

</head>

<body>

    <div id="box2" class="easyui-resizable" style="border:1px solid black;width:300px;height:300px"></div>

    <div id="box" style="border: 1px solid red;width:300px;height:300px"></div>

</body>

</html>
$(function(argument) {

    var obj = {

        //disabled:true,//不能拖动了；

        handles: 'all', //能够拖动的方向；n-上北，all-全部

        minHeight: 200, //最小能够拖到的高度

        minWidth: 200,

        maxHeight: 400, //最大能够拖到的高度

        maxWidth: 400,

        edge: 10, //拖动的边的宽度

        onStartResize: function(e) { //mousedown

            console.log('onStartResize');

            console.log(e);

        },

        onResize: function(e) { //mousemove

            // console.log('onResize');

            // console.log(e);

            console.log($(this).resizable('options')); //获得options对象；

        },

        onStopResize: function(e) { //mouseup

            console.log('onStopResize');

            console.log(e);

        }

    };

    $('#box').resizable(obj);
$('#box').resizable('disable'); //有效果呀；

$('#box2').resizable('disable'); //有效果呀；
});

easyUI resizable组件使用的更多相关文章

  1. Easyui部分组件讲解

    Easyui部分组件讲解 目  录 1.... Accordion(可折叠标签)... 2 1.1          实例... 2 1.2          参数... 3 2.... DateBo ...

  2. Easyui主要组件用法

    Easyui主要组件用法说明: 1.  combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...

  3. 对easyui datagrid组件的一个小改进

    #对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...

  4. easyUI panel组件

    easyUI panel组件: 属性的使用: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. easyUI progressbar组件

    easyUI progressbar组件: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. easyUI linkbutton组件

    easyUI linkbutton组件: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. easyUI tootip组件使用

    easyUI tootip组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. easyUI droppable组件使用

    easyUI droppable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. easyUI draggable组件使用

    easyUI draggable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. PAT (Advanced Level) 1026. Table Tennis (30)

    情况比较多的模拟题. 交了50发的样子才AC......AC之后我的天空星星都亮了. #include<iostream> #include<cstring> #include ...

  2. USACO Section 1.1 Greedy Gift Givers 解题报告

    题目 问题描述 有若干个朋友,朋友之间可以选择互相赠送一些有价值的礼物.一个人可以选择将一部分钱分给若干个朋友,例如某人送给其他两个人钱,总共赠送3元,两个人平均分,原本应该是每人1.5元,但是只能取 ...

  3. BP神经网络的Java实现

    http://fantasticinblur.iteye.com/blog/1465497

  4. PHP处理多表查询时的SQL语句拆分与重新组装

    在自己写框架时候会发现,多表查询组装SQL语句<?php $pre = "pre_"; $aid = "44"; $data = array(" ...

  5. hibernate--多对多单向关联 (重点!!!)

    老师和学生的关系, 一个老师对多个学生, 一个学生也对应多个老师. 数据库会需要3个表, 一个老师表, 一个学生表, 一个老师对应学生表. 单向: 老师知道自己有多少学生, 但是学生不知道自己有多少个 ...

  6. 程序ajax请求公共组件：app-jquery-http.js

    // --------网络操作-------------------- $.HTTP = { getUrlParam : function(name) { var reg = new RegExp(& ...

  7. Spring--注入类型--setter

    setter注入: package com.bjsxt.service; import com.bjsxt.dao.UserDAO; import com.bjsxt.model.User; publ ...

  8. stm32-ucos移植lwip-1（raw）

    之前在裸机环境下移植了lwip,功能还是很强大的,但是就我看来,这和uip其实差别也不大,其实lwip更强大的功能需要在操作系统之下才能发挥出来,今天就来做这个 首先我们需要移植操作系统,系统选择uc ...

  9. bzoj4010: [HNOI2015]菜肴制作【拓扑排序】

    想到了一个分治方法,每一次尽量放小的那个,把它依赖的放在左边,不依赖的放在右边. TLE 80: #include <bits/stdc++.h> #define rep(i, a, b) ...

  10. 【转】Linux强大命令 Awk 20分钟入门介绍

    什么是Awk Awk是一种小巧的编程语言及命令行工具.(其名称得自于它的创始人Alfred Aho.Peter Weinberger 和 Brian Kernighan姓氏的首个字母).它非常适合服务 ...