溫馨提示×

jQuery組件easyui基本布局實現(xiàn)代碼

小云
95
2023-08-16 12:58:49
欄目: 編程語言

下面是使用 jQuery EasyUI 實現(xiàn)基本布局的示例代碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>EasyUI Layout</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jquery-easyui@1.9.21/themes/default/
 easyui.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-easyui@1.9.21/jquery.easyui.min.js">
 </script>
</head>
<body>
  <div id="layout" class="easyui-layout" style="width: 500px; height: 300px;">
    <div data-options="region:'north', split:true" style="height: 50px;">North Panel</div>
    <div data-options="region:'west', split:true" style="width: 100px;">West Panel</div>
    <div data-options="region:'center'">Center Panel</div>
    <div data-options="region:'east', split:true" style="width: 100px;">East Panel</div>
    <div data-options="region:'south', split:true" style="height: 50px;">South Panel</div>
  </div>
  <script>
    $(function () {
      $('#layout').layout();
    });
  </script>
</body>
</html>

在上面的代碼中，我們使用 jQuery EasyUI 的 layout 組件實現(xiàn)了一個基本布局。布局被包含在一個具有 easyui-layout 類的 <div>元素中，并設(shè)置了寬度和高度。在布局中包含了五個區(qū)域：north、west、center、east 和 south。每個區(qū)域都是一個 <div> 元素，并使用 data-options 屬性指定了該區(qū)域的配置選項，例如 `region`（區(qū)域位置）和 split（是否可拖動分割線）。區(qū)域內(nèi)的內(nèi)容可以根據(jù)需要進行填充。

最后，在 JavaScript 代碼中調(diào)用 layout() 方法來初始化布局組件。

你可以將上述代碼保存為一個 HTML 文件并打開查看效果。請注意，在實際使用時，你可能需要根據(jù)自己的需求調(diào)整布局的樣式和配置選項。另外，由于示例代碼中引用了 CDN 上的 EasyUI CSS 和 JavaScript 文件，所以確保你的網(wǎng)絡(luò)連接正常才能加載這些文件。

0 踩