李炎恢_PHP_jQuery EasyUI[005] ~ Resizable(調整/改變 大小)元件
李炎恢_PHP_jQuery EasyUI[005] ~ Resizable(調整/改變 大小)元件
參考資料: https://github.com/jash-git/jash-WebSI
GITHUB: https://github.com/jash-git/richie_jQuery_EasyUI
My code:
$(function () {
$.fn.resizable.defaults.disabled = true;
$('#rr').resizable({
//disabled : true,
//handles : 'e,s,se',
//minWidth : 200,
//minHeight : 200,
//maxWidth : 600,
//maxHeight: 400,
//edge : 50,
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');
});
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="../../easyui_15/jquery.min.js"></script> <script type="text/javascript" src="../../easyui_15/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../easyui_15/locale/easyui-lang-zh_TW.js" ></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="../../easyui_15/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="../../easyui_15/themes/icon.css" /> </head> <body> <div id="rr" style="width:100px;height:100px;border:1px solid black"></div> </body> </html>
PDF:
執行結果:
