JQueryEasyUI Layout布局框架的使用

layout就是一个布局面板：

也就是布局的容器，有五个布局区域：北部，南部，东部，西部和中心。其中中心区域面板是必需的，但中心区域面板边缘区域面板是可选的。通过拖动它的边框，面板，可以调整每一个边缘地区。可以嵌套的布局，以便用户可以建立复杂的布局。

如果想要各个区域中的框架随框架的大小改变，请嵌套到layout框架中；


代码如下:

<script type="text/javascript">
        //split属性：如果设置为true将显示一个分隔条，用户可以拖动分隔条来改变布局面板的尺寸。
        //href属性：在指定区域内加载页面的body中的部分，其他不加载
        //在panel框架中我们可以看到这样一个正则选择（可根据自己需求进行更改）：
        //        extractor: function (data) {
        //            var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
        //            var matches = pattern.exec(data);
        //            if (matches) {
        //                return matches[1]; // only extract body content
        //            } else {
        //                return data;
        //            }
        //        }
        //panel属性：返回特定的布局面板，'region'参数的可取值为：'north','south','east','west','center'。
        function getPanel() {
            var southPanel = $("#layoutbody").layout('panel', 'south');
            //获得panel的属性
            var attributes = southPanel.panel('options');
            console.info(attributes); //可以看到其中的各个属性，浏览器调试，这里说明下：使用这种框架和使用js自己书写前台代码，浏览器调试是必不可少的：火狐或者谷歌
        }
    </script>
</head>
<body id="layoutbody" class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height: 100px;">
    </div>
    <div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
    </div>
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 100px;">
    </div>
    <div data-options="region:'west',title:'West',split:true" style="width: 100px;">
        <input type="button" value="获取panel" onclick="getPanel();" />
    </div>
    <div data-options="region:'center',title:'center title'" href="Index.htm" style="padding: 5px;
        background: #eee;">
        <input type="button" value="获取panel" onclick="getPanel();" /><!--如果这里指定了href属性，那么我们自己在这个部分写的代码将不会被现实-->
    </div>
</body>
</html>

赞 (0)

相关推荐

  • 有关easyui-layout中的收缩层无法显示标题的解决办法

    有关easyui-layout中的收缩层无法显示标题的解决办法

    easyui-layout中的收缩层无法显示标题的问题原因分析: 在easyui-layout中设置面板初始化为可以折叠,然后就发现标题还有图标都木有了 嗯,就是结果列表上面.一片空白,出现了问题就要去解决它,在网上查了资料之后呢,决定修改jquery.easyui.min.js 版本为:jQuery EasyUI 1.4.1 在5105行有_39d方法,在其中设置两个变量_Cstitle,_CsIcon添加代码如下: var _Cstitle; var _closedTitle = p.pan

  • jQuery布局组件EasyUI Layout使用方法详解

    jQuery布局组件EasyUI Layout使用方法详解

    layout 布局组件,依赖于panel,自己开发个web小程序的时候直接用这个组件布局很方便. 对于一个web程序原来说,特别是像我这种一遇到界面美化问题就找美工的程序员,想自己独立的开发一个东西,除了套用以前的项目中的界面布局之外就没别的办法了,虽然我们可以用ifame切分出一个界面布局,但是我不会添加样式啊.使用layout组件就可以帮我们快速的有一个界面布局,而且美观效果也看得过去. 看个例子: <!doctype html> <html lang="en"&

  • jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)

    本文实例讲述了jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果.分享给大家供大家参考,具体如下: function openTopWindow(url, title, width, height) { title = title == undefined ? ' ' : title; width = width == undefined ? 800 : width; height = height == undefined ? 300 : height; if (url

  • jQuery EasyUI 中文API Layout(Tabs)

    jQuery EasyUI 中文API Layout(Tabs)

    Tabs[标签] 创建一个tab标签 使用说明 使用到的头文件:easyui.css.icon.css.jquery-1.4.2.min.js.jquery.easyui.min.js html 复制代码 代码如下: <div id="tt" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;&qu

  • JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法

    JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法

    在jQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄. 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置布局. 经实验,新版本的JQuery EasyUI中布局可以采用以下方式来达到自动适应大小: 首先设置样式,使html和body高度为100%(因form和div高度设置为100%需要继承上级): <style type="text/css"> html,body { heig

  • JS组件Bootstrap Table布局详解

    JS组件Bootstrap Table布局详解

    Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 表格类 下表样式可用于表格中: <tr>, <th> 和 <td> 类 下表的类可用于表格的行或者单元格: 基本的表格 如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示: <div class="row"> <table class="table"

  • jQuery组件easyui基本布局实现代码

    jQuery组件easyui基本布局实现代码

    本文实例为大家分享了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Layout - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyu

  • JQueryEasyUI Layout布局框架的使用

    layout就是一个布局面板: 也就是布局的容器,有五个布局区域:北部,南部,东部,西部和中心.其中中心区域面板是必需的,但中心区域面板边缘区域面板是可选的.通过拖动它的边框,面板,可以调整每一个边缘地区.可以嵌套的布局,以便用户可以建立复杂的布局. 如果想要各个区域中的框架随框架的大小改变,请嵌套到layout框架中: 复制代码 代码如下: <script type="text/javascript">        //split属性:如果设置为true将显示一个分隔条

  • 使用jquery-easyui的布局layout写后台管理页面的代码详解

    使用jquery-easyui的布局layout写后台管理页面的代码详解

    先在官网下载easyui文档 引入头部文件 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/themes/default/easyui.css" rel="external nofollow" rel="external nofollow"

  • iOS App开发中Masonry布局框架的基本用法解析

    iOS App开发中Masonry布局框架的基本用法解析

    Masonry是一个轻量级的布局框架,拥有自己的描述语法,采用更优雅的链式语法封装自动布局,简洁明了并具有高可读性,而且同时支持 iOS 和 Max OS X.Masonry是一个用代码写iOS或OS界面的库,可以代替Auto layout.Masonry的github地址:https://github.com/SnapKit/Masonry Masonry使用讲解: mas_makeConstraints 是给view添加约束,约束有几种,分别是边距,宽,高,左上右下距离,基准线.添加过约束后

  • 深入理解IOS控件布局之Masonry布局框架

    前言: 回想起2013年做iOS开发的时候,那时候并没有采用手写布局代码的方式,而是采用xib文件来编写,如果使用纯代码方式是基于window的size(320,480)计算出一个相对位置进行布局,那个时候windows的size是固定不变的,随着iphone5的发布,windows的size(320,568)也发生了变化,而采用autoresizingMask的方式进行适配,到后来iphone 6之后windows size的宽度也随之变化,开始抛弃autoresizingMask改用auto

  • JavaSwing基础之Layout布局相关知识详解

    JavaSwing基础之Layout布局相关知识详解

    一.View layout方法 首先,还是从ViewRootImpl说起,界面的绘制会触发performMeasure.performLayout方法,而在performLayout方法中就会调用mView的layout方法开始一层层View的布局工作. private void performLayout(WindowManager.LayoutParams lp, int desiredWindowWidth, int desiredWindowHeight) { final View ho

  • Element-ui Layout布局(Row和Col组件)的实现

    目录 基本说明以及用法 Row组件的分析 render函数 源码分析 Col组件的分析 组件分析 响应式布局 我们在实际开发中遇到一些布局的时候会用到Layout布局,这个布局只要配置一些参数就能够达到很好的布局效果甚至可以响应式,那里面的具体是怎么实现的呢,让我们去剖开Element-UI的源码,学习里面的一些细节吧. 基本说明以及用法 Element-UI的Layout布局是通过基础的24分栏,迅速简便地创建布局.根据不同的组合,很快的就能够生成一个很美观的响应式布局.具体的用法如下: <e

  • jQuery布局插件UI Layout简介及使用方法

    jQuery布局插件UI Layout简介及使用方法

    UI Layout是一种基于jQuery的布局框架,项目主页http://layout.jquery-dev.net/.该框架的参考原型是ExtJS的border-layout,因此十分适用于将原有使用ExtJS的项目改造成jQuery项目.其核心是一个大小自适应的中心面板(必选),面板的上下左右四个方向可以放置可折叠.可缩放的面板(可选),各个面板可以添加任意数量的页眉和页脚面板.UI Layout支持内层布局的嵌套,任意块元素都可以当作布局的容器,最基本的布局容器是body. 基本使用方法:

  • Thinkphp5.0框架视图view的模板布局用法分析

    本文实例讲述了Thinkphp5.0框架视图view的模板布局用法.分享给大家供大家参考,具体如下: 使用include,文件包含: <!-- 头部 --> <div class="header"> {include file="common/header" /} </div> 模板继承: common\base.html: <!doctype html> <html lang="en">

  • 微信小程序 flexbox layout快速实现基本布局的解决方案

    问题描述 flexbox layout --弹性盒子布局.弹性盒子可以快速的对小程序进行布局.一般传统的小程序布局方法对内容量少的页面而言很方便,但对页面比较复杂的来讲就很繁琐了.所以使用 flexbox layout 对小程序页面内容进行整体封装布局,这样既方便又快捷.那么如何使用弹性盒子快速实现小程序的基本布局呢? 传统的布局方式对布局目标的实现属性赋值非常的分散,严重依赖内容的大小和页面的结构,这样操作起来非常的麻烦.而弹性盒子就比较灵活.统一,可以对整个页面的布局进行总体把控设置.弹性盒

随机推荐