zoukankan      html  css  js  c++  java
  • 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="100px;height:100px;border:1px solid black"></div> </body> </html>

    点击下载源码

  • 相关阅读:
    Fedora安装ati显卡驱动
    [转]SQLite 3入门教程
    [转]QT:不规则窗口的实现
    Ubuntu 10.10可用源
    [转]Qtopia2.2.0移植
    [转]嵌入式Qtopia2.2.0开发环境的搭建和使用
    ES6 find 和 filter 的区别
    “/ArcGIS/rest”应用程序中的服务器错误——解决办法
    Java:String和Date、Timestamp之间的转换
    UVA 100 The 3n+1 Problem
  • 原文地址:https://www.cnblogs.com/blfshiye/p/5093467.html
Copyright © 2011-2022 走看看