Oracle APEX 利用卡片实现翻转（方法二）

[0. 以 Oracle 的标准示例表 EMP 为例，实现卡片翻转](#0. 以 Oracle 的标准示例表 EMP 为例，实现卡片翻转)

[1. 创建卡片区域 (Cards Region)](#1. 创建卡片区域 (Cards Region))

[2. 定义卡片的 HTML 结构](#2. 定义卡片的 HTML 结构)

[3. 添加 CSS 实现样式和翻转动画](#3. 添加 CSS 实现样式和翻转动画)

[4. 创建动态操作触发翻转](#4. 创建动态操作触发翻转)

[5. 运行效果](#5. 运行效果)

以 Oracle 的标准示例表 EMP 为例，实现卡片翻转

目标如下：

正面：显示员工姓名 (ENAME) 和职位 (JOB)。

背面：显示员工编号 (EMPNO)、薪水 (SAL) 和佣金 (COMM)。

1. 创建卡片区域 (Cards Region)

1-1. 在您的 APEX 页面上，添加一个新的区域 (Region)，将类型设置为卡片 (Cards)。

1-2. 为该区域设置一个标题，例如 "员工卡片 (Employee Cards)"。

1-3. 在源 (Source) 部分，使用与之前相同的 SQL 查询：

sql 复制代码

SELECT
    EMPNO,
    ENAME,
    JOB,
    SAL,
    NVL(COMM, 0) AS COMM
FROM
    EMP

2. 定义卡片的 HTML 结构

2-1. 转到卡片区域的属性 (Attributes) 选项卡。

2-2. 找到卡片 (Card) -> HTML 表达式 (HTML Expression) 属性。

2-3. 将以下 HTML 代码粘贴到 HTML 表达式框中。这段代码利用了 SQL 查询中的列（用 #COLUMN_NAME# 的形式引用），并构建了卡片的正反面。

html 复制代码

<div class="emp-card-container">
  <div class="emp-card-inner">
    <div class="emp-card-front">
      <div class="emp-card-content">
        <h2 class="emp-name">&ENAME.</h2>
        <p class="emp-job">&JOB.</p>
        <span class="emp-card-flipper">点击翻转</span>
      </div>
    </div>
    <div class="emp-card-back">
      <div class="emp-card-content">
        <h3>员工详情</h3>
        <p><strong>编号:</strong> &EMPNO.</p>
        <p><strong>薪水:</strong> &SAL.</p>
        <p><strong>佣金:</strong> &COMM.</p>
      </div>
    </div>
  </div>
</div>

3. 添加 CSS 实现样式和翻转动画

3-1. 在页面的属性编辑器中（在最顶层的页面节点上），找到 CSS -> 内联 (Inline)。

3-2. 将以下 CSS 代码粘贴进去。

css 复制代码

/*
 APEX 的 .a-Card 元素是实际的卡片容器。
 我们让它透明，以便我们的自定义内容可以完全控制外观。
*/
.t-Cards-region .a-Card {
    background: transparent;
    box-shadow: none;
    border: none;
}

/* 卡片容器，为3D效果提供透视 */
.emp-card-container {
    background-color: transparent;
    width: 100%; /* 宽度占满 APEX 卡片单元格 */
    height: 200px; /* 定义一个固定的高度 */
    perspective: 1000px; /* 3D 效果的关键 */
    cursor: pointer;
}

/* 内部容器，将执行翻转动画 */
.emp-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* 当容器被点击（添加 is-flipped 类）时，翻转内部容器 */
.emp-card-container.is-flipped .emp-card-inner {
    transform: rotateY(180deg);
}

/* 定义卡片的正面和背面 */
.emp-card-front, .emp-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden; /* 隐藏翻转到背面的元素 */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 正面样式 */
.emp-card-front {
    background-color: #f8f9fa;
    color: #333;
}

/* 背面样式，初始时是翻转过去的 */
.emp-card-back {
    background-color: #007bff;
    color: white;
    transform: rotateY(180deg);
}

.emp-card-content {
    padding: 20px;
}

.emp-name {
    font-size: 1.5em;
    margin: 0;
}
.emp-job {
    font-size: 1em;
    color: #6c757d;
    font-style: italic;
}
.emp-card-flipper {
    font-size: 0.8em;
    color: #999;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
}

4. 创建动态操作触发翻转

4-1. 选中卡片后右键创建动态操作(Dynamic Action)

4-2. 在时间标签中作如下选择

事件：单击
选择类型：jQuery Selector
jQuery 选择器：.emp-card-container

4-3. 在"真"下执行如下JavaScript代码：

javascript 复制代码

$(this.triggeringElement).toggleClass('is-flipped');