EasyUI jQuery面板小部件

EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。

在这篇文章中，我们将学习如何使用jQuery EasyUI来设计面板。面板是作为其他内容的容器使用的。它是构建其他组件的基础组件，如布局，标签，手风琴等。

EasyUI for jQuery的下载：

https://www.jeasyui.com/download/index.php

语法:

<div class="panel">
</div>

属性:

id。该面板的id属性。
title。要显示在面板标题中的标题文本。
iconCls。一个CSS类，用于在面板中显示一个16×16的图标。
width: 它设置面板的宽度。
height: 它设置面板的高度。
left。它设置面板的左边位置。
top。它设置面板顶部的位置。
cls:它为面板添加一个CSS类。
headerCls。它为面板的标题添加了一个CSS类。
bodyCls。它为面板主体添加一个CSS类。
style。它为面板添加了一个自定义的规格样式。
fit。当它被设置为_true时，面板尺寸适合它的父容器。
border。它显示一个面板边框。
doSize。如果设置为true，面板将被调整大小。
noheader。如果设置为 “true”，将不创建面板页眉。
content。它设置面板主体内容。
halign：它设置面板标题的对齐方式。
titleDirection。它设置标题的方向。
collapsible。如果设置了，就会显示可折叠的按钮。
minimizable。如果它被设置，它显示一个可最小化的按钮。
maximizable。如果它被设置了，就会显示一个可最大化的按钮。
closable。如果它被设置，它显示一个可关闭的按钮。
header。它设置面板的页眉。
footer。它设置面板的页脚。
openAnimation。它设置开场动画。
openDuration。它设置了打开的持续时间。
closeAnimation。它设置关闭动画。
closeDuration。它设置关闭持续时间。
collapsed: 如果它被设置，面板在初始化时被折叠。
minimized。如果它被设置，面板在初始化时被最小化。
maximized。如果它被设置，面板在初始化时被最大化。
closed。如果它被设置，面板在初始化时被关闭。
href: 一个URL，用于加载远程数据，然后显示在面板中。
cache。如果设置为 “true”，它将缓存从href加载的面板内容。
loadingMessage。当远程数据被加载时，会在面板上显示一条信息。
method。HTTP方法加载的是内容页。
queryParams。它设置了加载内容页时将发送的附加参数。
loader。它定义了如何从远程服务器加载内容页。

事件:

onBeforeLoad：在加载一个内容页之前启动，返回false以忽略这个动作。
onLoad：当远程数据被加载时，它就会启动。
onLoadError。当加载内容页发生一些错误时，它就会启动。
onBeforeOpen：它在面板打开前启动。
onOpen：它在一个面板被打开后启动。
onBeforeClose。它在面板关闭前启动
onClose。它在一个面板关闭后启动。
onBeforeDestroy：它在面板被销毁前启动。
onDestroy：它在面板被销毁后启动。
onBeforeCollapse。它在面板倒塌前启动。
onCollapse。它在一个面板被折叠后启动。
onBeforeExpand。它在面板展开前启动。
onExpand。它在面板被展开后启动。
onResize。它在面板被调整大小后启动。
onMove：它在面板被移动后启动。
onMaximize。它在窗口被最大化后启动。
onRestore。它在窗口恢复到原来的尺寸后启动。
onMinimize。它在窗口被最小化后启动。

方法:

options。它返回options属性。
panel。它返回外部面板对象。
header。它返回面板页眉对象。
footer。它返回面板的页脚对象。
body。它返回面板主体对象。
setTitle。设置页眉的标题文本。
open。当开放参数设置为真时
closed。当forceClose参数设置为true时，面板被关闭。
destroy。当forceDestroy参数设置为true时，面板被销毁。
clear: 清除面板内容。
refresh。刷新面板以加载远程数据。
resize。设置面板尺寸并进行布局。
doLayout:设置面板内的子组件的尺寸。
move。将面板移动到一个新的位置。
maximized。将面板装入其容器内。
minimized。最小化面板。
restore。将最大化后的面板恢复到原来的大小和位置。
collapse。折叠面板主体。
expand。。展开面板主体。

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>

示例:

<!doctype html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="initial-scale=1.0, 
        maximum-scale=1.0, user-scalable=no"> 
              
    <!-- 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> 
  
  
</head> 
  
<body>     
    <h1>GeeksforGeeks</h1>
    <h3>how to make a basic panel using jQuery UI?</h3>
    <div id="p" class="easyui-panel" title="gfg" 
         style="width:400px;height:200px;padding:3px">
    <p>geeks</p>
    <p>geeks2</p>
  
</div>
  
</body>
</html>

输出:

EasyUI jQuery面板小部件