Oracle JET（三）Oracle JET 响应布局

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 响应布局

标签：sel   ddl   技术分享   -o   字母   end   fine   ons   view