目錄
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
FROMEMP2.?定義卡片的 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. 運行效果
