李炎恢_PHP_jQuery EasyUI[015] ~ Window(視窗)元件 [自訂義浮動視窗]

李炎恢_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:


執行結果:

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *