`
sun201200204
  • 浏览: 300015 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

layout的用法

阅读更多
一般来说layout有如下五种:
gobal layout,controller layout,shared layout,dynamic layout,action layout

假设我们有一个views/projects/index.rhtml页面:
代码

   1. <h2>Projects</h2> 
   2. <ul> 
   3. <% for project in @projects %> 
   4.   <li><%= project.name %></li> 
   5. <% end %> 
   6. </ul> 


下面来看看各种layout的用法。

1,global layout
添加views/layouts/application.rhtml:
代码

   1. <h1>Application Layout!</h1> 
   2. <%= yield %> 


在layouts目录下添加application.rhtml即可,<%= yield %>即输出我们的projects/index.rhtml页面
由于我们的controller都继承自ApplicationController,所以application.rhtml会先解析

2,controller layout
添加views/layouts/projects.rhtml:
代码

   1. <h1>Projects Layout!</h1> 
   2. <%= yield %> 


道理同上,ProjectsController当然会使用同名的projects.rhtml作layout了
注意的是controller layout会覆盖global layout

3,shared layout
添加views/layouts/admin.rhtml:
代码

   1. <h1>Admin Layout!</h1> 
   2. <%= yield %> 


我们建立了admin layout,然后在需要使用该layout的controller中指定即可:
代码

   1. class ProjectsController < ApplicationController 
   2.   layout "admin" 
   3.  
   4.   def index  
   5.     @projects = Project.find(:all) 
   6.   end 
   7. end 

4,dynamic layout
有时候我们需要根据不同的用户角色来使用不同的layout,比如管理员和一般用户,比如博客换肤(也可以用更高级的theme-generator)
代码

   1. class ProjectsController < ApplicationController 
   2.   layout :user_layout 
   3.  
   4.   def index 
   5.     @projects = Project.find(:all) 
   6.   end 
   7.  
   8.   protected 
   9.  
  10.   def user_layout 
  11.     if current_user.admin? 
  12.       "admin" 
  13.     else 
  14.       "application" 
  15.     end 
  16.   end 
  17. end 

5,action layout
在action中指定layout即可:
代码

   1. class ProjectsController < ApplicationController 
   2.   layout :user_layout 
   3.  
   4.   def index 
   5.     @projects = Project.find(:all) 
   6.     render :layout => 'projects' 
   7.   end 
   8.  
   9.   protected 
  10.  
  11.   def user_layout 
  12.     if current_user.admin? 
  13.       "admin" 
  14.     else 
  15.       "application" 
  16.     end 
  17.   end 
  18. end 


上面的index方法指定使用projects layout,当然我们也可以指定不使用layout,如printable页面:
代码

   1. def index 
   2.   @projects = Project.find(:all) 
   3.   render :layout => false 
   4. end 

需要注意的是,这5种layout会按顺序后面的覆盖前面的layout
分享到:
评论

相关推荐

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

    布局组件EasyUI Layout使用方法详解首先介绍了该组件的基本概念和重要性。对于Web开发人员来说,界面布局通常是一个比较繁琐的任务,特别是对于那些不擅长美工设计的程序员来说,EasyUI Layout能够提供一个简单快捷...

    justified-layout, 通过长方体大小并获取合理布局的尺寸和坐标.zip

    justified-layout, 通过长方体大小并获取合理布局的尺寸和坐标 与flickr布局对齐 通过框大小并回收大小和坐标,如在Flickr上看到的一个好的合理布局。 探索页面是一个很好的例子。 下面是另一个使用 ...

    Sprint-Layout60 绝对好用

    本文将深入探讨Sprint-Layout60的核心功能、使用方法以及它如何帮助开发者优化项目。 首先,Sprint-Layout60的主要功能在于提供一套完善的布局解决方案,适用于各种复杂的界面设计需求。它包含了丰富的组件库,这些...

    layout.js布局插件

    三、使用方法 1. **引入插件**:在HTML文件中通过`&lt;script&gt;`标签引入layout.js库,可以使用CDN链接或者本地文件路径。 2. **定义布局**:使用JavaScript代码或者数据属性来定义元素的布局属性,如宽度、高度、间隔...

    HFSS 3D Layout用户手册

    由于HFSS 3D Layout是基于HFSS开发的,因此对于那些已经有HFSS使用经验的工程师来说,他们可以轻松地将HFSS 3D Layout项目导出为HFSS项目,从而利用HFSS的强大功能进行更深入的仿真分析。 HFSS 3D Layout用户手册...

    使用vue实现grid-layout功能实例代码

    使用 Vue 实现 Grid Layout 功能实例代码 本文主要介绍了使用 Vue 实现 Grid Layout 功能的代码讲解,涵盖了基本布局、节点排版、拖拽事件等多个方面的知识点。 基本布局 在实现 Grid Layout 功能之前,首先需要 ...

    jquery layout 经典布局(东南西北中)

    本文将深入探讨jQuery Layout的使用方法和关键特性。 首先,我们需要理解jQuery Layout的基本结构。在经典的“东南西北中”布局中,页面被划分为五个区域:北(North)、南(South)、东(East)、西(West)和中心...

    DynamicLayout:android动态布局

    使用`View.measure()`和`View.layout()`方法进行测量和布局。如果不进行这些步骤,新添加的视图可能不会显示或者位置不正确。 3. **响应事件** 动态创建的视图同样可以注册监听器,以便在用户交互时执行相应的操作...

    Android Layout多种使用方法源码演示.rar

    Android Layout多种使用方法源码演示,这个例子中演示了如何使用FrameLayout、如何使用RelativeLayout、如何使用RelativeLayout和LinearLayout以及如何使用TableLayout的例子,都挺实用,平时用的比较多,但是比较...

    pads-layout与router同步操作

    以上知识点总结了在PADS V9.3中实现Layout与Router同步操作的具体方法以及该版本的其他新功能。这些知识点对于电子设计工程师来说非常重要,它能够帮助他们在PCB设计中更加高效和准确地完成任务。

    Layout动画入门

    本篇文章将深入介绍如何入门Android的Layout动画,我们将结合源码分析和使用工具来理解其工作原理。 首先,让我们了解什么是Layout动画。在Android中,布局动画是指当一个布局中的View首次显示或者被添加到布局时,...

    Layout基础教程.pdf

    2. LayOut 的使用场景:LayOut 可以创建演示看板、小型手册和幻灯片,并且可以作为排版软件和分析图制作软件使用。 3. LayOut 的启动和设置:在启动 LayOut 时,可以选择要排版的纸张大小,单击打开就可以了。如果...

    基于JQUERY UI的全能布局插件LAYOUT,强烈推荐,附带DEMO例子

    Layout 还提供了一些API方法,允许在运行时动态控制布局,例如: - `toggle('region')`: 打开或关闭指定区域。 - `resize('region', value)`: 修改指定区域的大小。 - `destroy()`: 移除Layout,恢复原始DOM结构。 ...

    jQuery界面布局插件【UI.Layout】1.2.0 和 1.3.0

    使用方法** 使用 jQuery UI Layout 首先需要引入 jQuery 和 jQuery UI Layout 的库文件,然后在页面加载完成后调用 `$.layout()` 方法,传入配置对象来初始化布局。例如: ```javascript $(document).ready...

    Android FloatLayout的简单使用.zip

    在`说明.htm`文件中,可能会详细解释FloatLayout的工作原理和使用方法。通常,自定义布局需要重写`onMeasure()`和`onLayout()`方法来计算和布置子视图的位置。`onMeasure()`用于测量每个子视图的大小,`onLayout()`...

    Android自定义Layout布局

    需调用`getChildMeasureSpec()`生成子视图的测量规格,并使用`measure()`测量子视图,然后使用`layout()`方法设置子视图的位置。 4. **onDraw()**:绘制自定义布局的图形。如果只是布局,通常不需要重写此方法,因为...

    esayui layout

    Layout 提供了一些方法来控制其行为,如 `resize()` 用于调整整个布局的大小,`expandRegion()` 和 `collapseRegion()` 分别用于展开和折叠指定区域。 5. **事件**: - `onResize`: 当布局大小改变时触发。 - `...

    easyui 扩展layout的方法,支持动态添加删除块

    ### easyUI扩展Layout方法以支持动态添加与删除区块 #### 概述 easyUI是一款基于jQuery的用户界面库,它提供了丰富的UI组件和强大的布局管理功能。本文将详细介绍如何通过扩展easyUI的`layout`方法来实现动态添加...

    HFSS 3D Layout用户手册v1.1.pdf

    HFSS 3D Layout的用户手册为用户详细介绍了软件的使用方法,包括以下主要知识点: 1. HFSS 3D Layout概述:介绍了HFSS 3D Layout的基本概念、主要特性和优势,以及如何与传统HFSS软件进行对比,以突出其在PCB和封装...

Global site tag (gtag.js) - Google Analytics