Oracle JET 提供了一系列的 CSS 样式以直接使用。

  Oracle JET CSS样式链接:http://docs.oracle.com/middleware/jet310/jet/reference-css/index.html

  进入主题,在Oracle JET 的样式中提供了响应式布局。

  一、Oracle JET Flex布局

  要创建Flex布局,首先将 oj-flex 添加到容器中,然后将 oj-flex-item 添加到每个自容器。

  例1:

<div id="container">
<div class="oj-flex">
<div class="oj-flex-item">A</div>
<div class="oj-flex-item">B</div>
<div class="oj-flex-item">C</div>
</div>
<div class="oj-flex">
<div class="oj-flex-item">D</div>
<div class="oj-flex-item">E</div>
<div class="oj-flex-item">F - 这里添加更多内容来对比,这里添加更多内容来对比</div>
</div>
</div>

  显示:

  

  当子容器宽度大于最大显示宽度,则会自动换行:

  

  1.Oracle JET flex 布局默认属性为 auto ,可缩小或增长。设为 initial ,只允许缩小,不允许增长。

  例2:(oj-flex-items-pad用来填充撑开,只有字母撑开太小)

  

<div id="container" class="oj-flex-items-pad">
<div class="oj-flex oj-sm-flex-items-initial">
<div class="oj-flex-item">A</div>
<div class="oj-flex-item">B</div>
<div class="oj-flex-item">C</div>
</div>
<div class="oj-flex">
<div class="oj-flex-item">D</div>
<div class="oj-flex-item oj-sm-flex-initial">E</div>
<div class="oj-flex-item">F</div>
</div>
</div>

  显示:

  

  2.Oracle JET flex 布局默认自动换行,像例1,可在父容器添加 oj-sm-flex-wrap-nowrap ,取消默认换行。

  例3:

  

<div id="container" class="oj-flex-items-pad">
<div class="oj-flex">
<div class="oj-flex-item">A</div>
<div class="oj-flex-item">B</div>
<div class="oj-flex-item">C</div>
</div>
<div class="oj-flex oj-sm-flex-wrap-nowrap">
<div class="oj-flex-item">D</div>
<div class="oj-flex-item">E</div>
<div class="oj-flex-item">F - 这里添加更多内容来对比,这里添加更多内容来对比</div>
</div>
</div>

  显示:

  

  二、oracle JET 网格布局

  Oracle JET 提供了12列的网格系统用于响应式布局

  oj-sm-num 小屏幕 oj-md-num 中屏幕 oj-lg-num 大屏幕 oj-xl-num 超大屏幕

  例4:

<div id="container" class="oj-flex">
<div class="oj-md-6 oj-lg-2 oj-xl-8 oj-flex-item">A</div>
<div class="oj-md-3 oj-lg-4 oj-xl-2 oj-flex-item">B</div>
<div class="oj-md-3 oj-lg-6 oj-xl-2 oj-flex-item">C</div>
</div>

  显示:

  sm:

            

  md:

          

  lg:

      

  xl:

  

  

  1. Grid convenience classes:

  可以轻松地设置具有指定宽度的两列和四列布局。

  方法:在父容器的“父级”上添加 oj-size-odd-cols-num 和 oj-size-even-cols-num

  两列布局:指定奇数列使用12列中的多少,剩余偶数列占用。

  例5:

<div id="container">
<div class="oj-md-odd-cols-4">
<div class="oj-flex">
<div class="oj-flex-item">A</div>
<div class="oj-flex-item">B</div>
</div>
</div>
<div class="oj-flex">
<div class="oj-md-4 oj-flex-item">A</div>
<div class="oj-md-8 oj-flex-item">B</div>
</div>
</div>

  显示:

  

  可见,和直接设置 oj-md-num 相同效果。

  四列布局:指定奇数列和偶数列的占用数

  例6:

<div id="container">
<div class="oj-md-odd-cols-2 oj-md-even-cols-4">
<div class="oj-flex">
<div class="oj-flex-item">A</div>
<div class="oj-flex-item">B</div>
<div class="oj-flex-item">C</div>
<div class="oj-flex-item">D</div>
</div>
</div>
<div class="oj-flex">
<div class="oj-md-2 oj-flex-item">A</div>
<div class="oj-md-4 oj-flex-item">B</div>
<div class="oj-md-2 oj-flex-item">C</div>
<div class="oj-md-4 oj-flex-item">D</div>
</div>
</div>

  显示:

  

  三、oracle JET 响应类JavaScript API

  oracle JET 提供了 ResponsiveUtils 和 ResponsiveKnockoutUtils 响应的 JavaScript API提供,具体参阅 API 文档

    http://docs.oracle.com/middleware/jet320/jet/reference-jet/oj.ResponsiveUtils.html

  使用例子:

  1.根据屏幕尺寸更改组件

  例7:

  HTML:

<div id="container">
<button id="btndisplay" data-bind="ojComponent:{
component: 'ojButton',
icons: { start: 'oj-fwk-icon oj-fwk-icon-calendar'},
label: 'calendar',
display: large() ? 'all' : 'icons'
}"></button>
</div>

  JS:(在ViewModule下编写)

define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojbutton'],
function(oj, ko, $) {
function DashboardViewModel() {
var self = this;
var lgQuery = oj.ResponsiveUtils.getFrameworkQuery(oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP);
self.large = oj.ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery); }
return new DashboardViewModel();
}
);

  显示:

  小尺寸屏幕下:      大尺寸屏幕下:

            

  根据屏幕大小调整文字和图片类似方法。

  四、其他响应类 classes

  oj-size-hide:在指定的 size中 隐藏内容。

  oj-size-text-align-end:在指定的 size 中文本内容位置为末尾。

  oj-size-float-end:在指定 size 中元素向右浮动。

  oj-size-float-start:在指定 size 中元素向左浮动。

Oracle JET(三)Oracle JET 响应布局的更多相关文章

  1. JBOSS EAP 6 系列三 Oracle、Mysql数据源的配置(驱动)—认识模块的使用

    本文介绍JBOSS EAP 6.2中Oracle数据源的配置方式.结合之前JBOSS EAP 6.2新功能,本文初识JBOSS模块申明式容器这一特性. 模块申明式容器:JBOSS EAP不再有lib的 ...

  2. Oracle数据库三种备份方案

    Oracle数据库有三种标准的备份方法,它们分别是导出/导入(EXP/IMP).热备份和冷备份.导出备件是一种逻辑备份,冷备份和热备份是物理备份. 一. 导出/导入(Export/Import) 利用 ...

  3. 7.27实习培训日志-Oracle SQL(三)

    Oracle SQL(三) 视图 特性 简单视图 复杂视图 关联的表数量 1个 1个或多个 查询中包含函数 否 是 查询中包含分组数据 否 是 允许对视图进行DML操作 是 否 CREATE [OR ...

  4. Oracle数据库三种标准的备份方法

    Oracle数据库的三种标准的备份方法: 1.导出/导入(EXP/IMP). 2.热备份. 3.冷备份. 注释:导出备件是一种逻辑备份,冷备份和热备份是物理备份. 一.导出/导入(Export/Imp ...

  5. jdbc连接oracle的三种方法

    jdbc连接oracle的三种方法 使用service_name,配置方式:jdbc:oracle:thin:@//<host>:<port>/<service_name ...

  6. Oracle GoldenGate 三、加密

    写在开始前 从上周开始,我花了大量的业余时间阅读GoldenGate官方文档,并根据文档实践和进一步学习了解GoldenGate,以下便是根据官方文档理解总结的GoldenGate学习内容: Orac ...

  7. [译]MVC网站教程(三):动态布局和站点管理

    目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.   自定义操作结果和控制器扩展 1)   OpenFileResult 2)   ImageR ...

  8. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  9. Oracle实例和Oracle数据库(Oracle体系结构)

    --========================================== --Oracle实例和Oracle数据库(Oracle体系结构) --==================== ...

随机推荐

  1. CentOS下搭建docker+.net core

    运行环境: CentOS 7.0 容器:Docker 1.13.1 .Net Core版本: .NET Core 2.1,安装详见 CentOS 7 下安装.NET Core SDK 2.1 1.安装 ...

  2. js--事件--事件代理

    js--事件--事件代理:https://blog.csdn.net/github_34514750/article/details/53067133

  3. tableview(model base)

    该tableview控件的用法: 1.原理: 数据存放在“表”对象中,而将这个对象关联到tableview控件之后,将实现在UI中展示出来. class Query_Students : public ...

  4. so easy(并查集+unordered_map)

    There are nn points in an array with index from 11 to nn, and there are two operations to those poin ...

  5. [集合]Map的 entrySet() 详解以及用法(四种遍历map的方式)

    Entry 由于Map中存放的元素均为键值对,故每一个键值对必然存在一个映射关系. Map中采用Entry内部类来表示一个映射项,映射项包含Key和Value (我们总说键值对键值对, 每一个键值对也 ...

  6. webshell查杀

    大部分Webshell查杀工具都是基于关键字特征的,通常他们会维护一个关键字列表,以此遍历指定扩展名的文件来进行扫描,所以可能最先想到的是各种字符串变形,下面总结了一些小的方法,各种不足之前还请看官拍 ...

  7. vue 防抖和节流

    函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时. 函数节流(throttle):当持续触 ...

  8. XIB约束布局问题(button)

    button默认不给宽度:系统Xib自动适配,最小宽度30.在使用宽度计算时,无法小于这个值

  9. STM32F407 正点原子按键输入实验

    库函数版本: 库函数 源文件 头文件 GPIO_Init(GPIOE, &GPIOE_initstructure) stm32f4xx_gpio.c stm32f4xx_gpio.h RCC_ ...

  10. 数据结构课后练习题(练习一)1007 Maximum Subsequence Sum (25 分)

    Given a sequence of K integers { N​1​​, N​2​​, ..., N​K​​ }. A continuous subsequence is defined to ...