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

layout 布局组件，依赖于panel，自己开发个web小程序的时候直接用这个组件布局很方便。

对于一个web程序原来说，特别是像我这种一遇到界面美化问题就找美工的程序员，想自己独立的开发一个东西，除了套用以前的项目中的界面布局之外就没别的办法了，虽然我们可以用ifame切分出一个界面布局，但是我不会添加样式啊。使用layout组件就可以帮我们快速的有一个界面布局，而且美观效果也看得过去。

看个例子：

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <script type="text/javascript" src="easyui/jquery.min.js"></script>
 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
 <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
 <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css" rel="external nofollow" />
 <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" />
 <title>Document</title>
 </head>
<body class="easyui-layout">
 <div data-options="region:'north',border:false" style="height:60px;background:#00ffcc;padding:10px"><strong><font size=2 color="color">您好，欢迎<span style="white-space:pre">  </span>来到地球！</br>这个世界充满了危险，劝你早点回去！</font></strong></div>
 <div id="menu" data-options="region:'west',split:true,title:'2014-15赛季赛程'" style="height:100px;width:150px;padding:10px;">
  <ul>
   <li>
    <strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >西甲赛程</a></strong>
   </li>
   <br>
   <br>
   <li>
    <strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >英超赛程</a></strong>
   </li>
   <br>
   <br>
   <li>
    <strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >德甲赛程</a></strong>
   </li>
   <br>
   <br>
   <li>
    <strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >法甲赛程</a></strong>
   </li>
   <br>
   <br>
   <li>
    <strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >意甲赛程</a></strong>
   </li>
   <br>
   <br>
   <li>
    <strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >欧冠赛程</a></strong>
   </li> 

  </ul> 

 </div>
 <div data-options="region:'east',split:true,collapsed:true,title:'快速通道'" style="width:100px;padding:10px;"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >购买船票</a></br><a href="http://blog.csdn.net/caohaicheng" rel="external nofollow" >逃生指南</a></div>
 <div data-options="region:'south',border:false" style="height:25px;background:#A9FACD;padding:10px;"><center>http://blog.csdn.net/caohaicheng</center></div>
 <div data-options="region:'center',title:'主界面'"> 

 </div>
</body>
</html>

效果图：

点此下载源代码：jQuery Easy UI Layout(布局)组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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

  • JS组件Bootstrap Table布局详解

    JS组件Bootstrap Table布局详解

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

  • 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

  • 有关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 在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

  • 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

  • JQueryEasyUI Layout布局框架的使用

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

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

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

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

  • 使用jQuery和ajax代替iframe的方法(详解)

    iframe虽然好用,但是其弊端也很明显,一是它不能使用于响应式布局,iframe的使用必须指定高度,而响应式布局的高度兵分固定的.其次iframe不易被搜索引擎的爬虫解读,特别是iframe中嵌套iframe,这是会被搜索引擎认为是个死网站而被放过. 目前主流的应用都使用了ajax代替了iframe. html: <ul class="nav navbar-nav" id="indexMenu"> <li><a target=&quo

  • vuejs动态组件给子组件传递数据的方法详解

    通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定 <div class="app" id="deviceready"> <component :is="currentView" :user_name.s

  • vue 父组件通过$refs获取子组件的值和方法详解

    前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式 今天我们要看的是父组件如何直接调

  • 在Vue2中注册全局组件的两种方法详解

    第一种:在main.js中直接注册 //引入 import FixedTop from '@/components/FixedTop //注册为全局组件 Vue.componet('FixedTop',FixedTop) //页面直接使用 <FixedTop /> 缺点:如果我们需要注册的全局组件非常多,那么需要一个一个引入,然后分别调用Vue.componet方法,main.js文件会变得很大很臃肿,不好维护,所以当需要注册的全局组件非常多的时候可以采用插件的形式注册 第二种:使用插件的形式

  • Vue父子组件属性传递实现方法详解

    目录 前言 组件之间属性的传递 父组件传递属性给子组件 子组件传递属性给父组件 前言 这节我们主要从案例出发,用Vue3的写法写父子组件之间的属性传递. 组件之间属性的传递 我们定义一个Rate组件,具有以下功能: 接收来自外部组件传入的参数,starCount代表星星个数.color代表星星颜色. 需要根据传入星星的个数,展示对应数量的星星. 父组件传递属性给子组件 那么在编写组件的时候,我们需要注意什么? 我们可以使用defineProps来规范传递数据的格式.可以结合withDefault

  • Android组件ViewStub基本使用方法详解

    Android组件ViewStub基本使用方法详解

    ViewStub可以在运行时动态的添加布局.帮助文档给定的定义是: "A ViewStub is an invisible, zero-sized View that can be used to lazily inflate layout resources at runtime. When a ViewStub is made visible, or when inflate() is invoked, the layout resource is inflated. The ViewStu

  • jQuery事件对象的属性和方法详解

    jQuery事件对象的属性和方法详解

    jQuery事件对象的属性和方法,供大家参考,具体内容如下 事件对象的属于与方法有很多,但是我们经常用的只有那么几个,这里我主要说下作用与区别 event.type:获取事件的类型 触发元素的事件类型 $("a").click(function(event) { alert(event.type); // "click"事件 }); event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标 通过这2个属性,可以确定元素在当前页面的坐标值,鼠标

  • jQuery给元素添加样式的方法详解

    本文实例讲述了jQuery给元素添加样式的方法.分享给大家供大家参考,具体如下: 1.获取和设置样式 $("#tow").attr("class")//获取ID为tow的class属性 $("#two").attr("class","divClass")//设置Id为two的class属性. 2.追加样式 复制代码 代码如下: $("#two").addClass("divCl

  • jQuery遍历DOM元素与节点方法详解

    本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,

随机推荐