李炎恢_PHP_jQuery EasyUI[015] ~ Window(視窗)元件 [自訂義浮動視窗]
李炎恢_PHP_jQuery EasyUI[015] ~ Window(視窗)元件 [自訂義浮動視窗]
參考資料: https://github.com/jash-git/jash-WebSI
GITHUB: https://github.com/jash-git/richie_jQuery_EasyUI
My code:
$(function () {
$('#box').window({
width : 300,
height : 250,
//iconCls : 'icon-add',
//fit : true,
/*
width : 600,
height : 400,
title : '窗口',
collapsible : false,
minimizable : false,
maximizable : false,
closable : false,
//closed : true,
zIndex : 9999,
draggable : false,
resizable : false,
shadow : false,
modal : true,
inline : true,
width : 200,
height : 150,
inline : true,
onClose : function () {
alert('关闭后触发！');
}*/
});
//console.log($('#box').window('window'));
//console.log($('#box').window('body'));
$(document).click(function () {
$('#box').window('move', {
left : 0,
top : 0,
})
});
$(document).dblclick(function () {
$('#box').window('vcenter');
});
});
<!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 class="easyui-window" data-options="modal:true"> </div> <div style="position:relative;overflow:hidden;width:600px;height:400px;border:1px solid #ccc;"> <div id="box">窗口</div> </div> <div class="easyui-window" style="width:400px;height:250px;"> <div class="easyui-layout" data-options="fit:true,"> <div data-options="region:'west',split:true," style="width:100px;">左边</div> <div data-options="region:'center'">内容</div> <div data-options="region:'south',border:false" style="height:40px;text-align:right;padding:5px 5px 0 0"> <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="width:80px;">确认</a> <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" style="width:80px;">取消</a> </div> </div> </div>
PDF:
執行結果:
