Oracle JET(三)Oracle JET 响应布局

  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 中元素向左浮动。

 

posted @   Easty  阅读(719)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示