提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery EasyUI布局容器layout实例精讲

jQueryEasyUI实例容器 布局 layout 精讲
2023-09-14 09:01:58 时间

这个布局容器,有五个区域:北、南、东、西和中心。 他中心地区面板是必需的,但是边缘地区面板是可选的。每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建立他想要的复杂的布局。layout可以基于body或者 div 进行布局。
效果：
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>easyui-layout的使用</title>
        <!-- 导入jquery核心类库 -->
        <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
        <!-- 导入easyui类库 -->
        <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../css/default.css">
        <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    </head>
    <body class="easyui-layout">
        <div data-options="region:'north',title:'你我他学习吧-学习Java的好博客！'" style="height:100px"></div>
        <div data-options="region:'west',title:'西部区域'" style="width:100px"></div>
        <div data-options="region:'center',title:'中部区域'"></div>
        <div data-options="region:'east',title:'东部区域'" style="width:100px"></div>
        <div data-options="region:'south',title:'南部区域'" style="height:100px"></div>
    </body>
</html>

相关文章