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

目录

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

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

2. 定义卡片的 HTML 结构

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

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

5. 运行效果

---

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

目标如下：
正面： 显示员工姓名 (ENAME) 和职位 (JOB)。 
背面： 显示员工编号 (EMPNO)、薪水 (SAL) 和佣金 (COMM)。

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

1-1. 在您的 APEX 页面上，添加一个新的区域 (Region)，将类型设置为 卡片 (Cards)。
1-2. 为该区域设置一个标题，例如 "员工卡片 (Employee Cards)"。
1-3. 在 源 (Source) 部分，使用与之前相同的 SQL 查询：

SELECTEMPNO,ENAME,JOB,SAL,NVL(COMM, 0) AS COMM
FROMEMP

2. 定义卡片的 HTML 结构

2-1. 转到卡片区域的 属性 (Attributes) 选项卡。
2-2. 找到 卡片 (Card) -> HTML 表达式 (HTML Expression) 属性。
2-3. 将以下 HTML 代码粘贴到 HTML 表达式 框中。这段代码利用了 SQL 查询中的列（用 #COLUMN_NAME# 的形式引用），并构建了卡片的正反面。

<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 代码粘贴进去。

/*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代码：

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

5. 运行效果