极客教程EasyUI jQuery 窗口小部件
在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个窗口。窗口部件是可拖动的面板，可以作为一个应用程序窗口使用。它漂浮在页面上，可以在任何需要的地方移动。 EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。
EasyUI for jQuery的下载：
https://www.jeasyui.com/download/index.php
语法:
<input class="easyui-window">
属性:
- title。它是窗口的标题文本。
- collapsible:它定义了是否显示可折叠的按钮。
- minimizable。它定义了是否显示可最小化的按钮。
- maximizable：它定义了是否显示可最大化的按钮。
- closable。它定义了是否显示可关闭的按钮。
- closed。它定义了该窗口是否被关闭。
- zIndex。它是窗口的z-index。
- draggable。它定义了该窗口是否可以被拖动。
- resizable。它定义了窗口是否可以调整大小。
- shadow：它定义了窗口的阴影。如果设置为真，将显示阴影。
- inline。它定义了如何使窗口停留在它的父类里面。
- modal: 它定义了该窗口是否是一个模态窗口。
- border。它定义了窗口的边框样式。
- constrain。它定义了是否要约束窗口的位置。
方法:
- window。它返回外部窗口对象。
- hcenter:它使窗口在水平方向上居中。
- vcenter。它使窗口垂直居中。
- center。它使窗口在屏幕上居中。
CDN链接：首先，添加你的项目需要的jQuery Easy UI脚本。
<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>
示例:
<html>
<head>
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/mobile.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript"
src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
<script type="text/javascript">
(document).ready(function (){
('#gfg').window({
title: 'GfG',
resizable: true
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery window widget</h3>
<!-- Create the easyUI window -->
<input id="gfg" class="easyui-window">
</body>
</html>
输出:
