目錄
0. 以 Oracle 的標準示例表?EMP?為例，實現卡片翻轉
1.?創建PL/SQL動態內容區域
2.?添加 CSS 實現翻轉效果
3.?添加動態操作 (Dynamic Action)
4. 看效果
0. 以 Oracle 的標準示例表?EMP?為例，實現卡片翻轉
- 正面：?顯示員工姓名 (
ENAME) 和職位 (JOB)。 - 背面：?顯示員工編號 (
EMPNO)、薪水 (SAL) 和傭金 (COMM)。
1.?創建PL/SQL動態內容區域
在頁面上添加一個新區域，類型設置為 PL/SQL 動態內容 (PL/SQL Dynamic Content)。
將以下代碼粘貼到區域的 源 (Source) > PL/SQL 代碼 中。
DECLARE-- 定義卡片HTML模板，使用 #占位符#l_html_template VARCHAR2(4000) := q'!<div class="flip-card"><div class="flip-card-inner"><div class="flip-card-front"><span class="fa fa-user fa-5x u-color-4"></span><h4 style="margin-top: 20px;"><b>#ENAME#</b></h4><p>#JOB#</p></div><div class="flip-card-back"><h1>#ENAME#</h1><hr><p><b>Employee No:</b> #EMPNO#</p><p><b>Salary:</b> #SAL#</p><p><b>Commission:</b> #COMM#</p></div></div></div>!';l_final_html CLOB;
BEGIN-- 從 EMP 表查詢數據并為每個員工生成一個卡片HTMLFOR rec IN (SELECT ENAME, JOB, EMPNO, SAL, COMM FROM EMP) LOOPl_final_html := l_final_html ||REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(l_html_template, '#ENAME#', apex_escape.html(rec.ENAME)),'#JOB#', apex_escape.html(rec.JOB)),'#EMPNO#', apex_escape.html(rec.EMPNO)),'#SAL#', apex_escape.html(rec.SAL)),'#COMM#', apex_escape.html(NVL(rec.COMM, 0)) -- 如果COMM為空則顯示0);END LOOP;-- 輸出最終的HTML-- htp.p(l_final_html);return l_final_html;
END;2.?添加 CSS 實現翻轉效果
在頁面的屬性編輯器中，找到 CSS > 內聯 (Inline) 部分。
添加以下 CSS 代碼。
CSS 代碼示例:
/* 卡片容器，需要3D效果的視角 */
.flip-card {background-color: transparent;width: 220px;height: 280px;perspective: 1000px; /* 3D效果的關鍵 */margin: 10px;float: left; /* 讓卡片并排顯示 */font-family: Arial, sans-serif;
}/* 內層容器，用于實現翻轉動畫 */
.flip-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);border-radius: 10px;
}/* 當卡片被點擊時，通過JS添加 .is-flipped 類來觸發翻轉 */
.flip-card.is-flipped .flip-card-inner {transform: rotateY(180deg);
}/* 卡片的正面和背面樣式 */
.flip-card-front, .flip-card-back {position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden; /* Safari */backface-visibility: hidden;border-radius: 10px;padding: 20px;box-sizing: border-box; /* 確保內邊距不會撐大盒子 */
}/* 正面樣式 */
.flip-card-front {background-color: #f8f9fa;color: black;display: flex;flex-direction: column;justify-content: center;align-items: center;
}/* 背面樣式 (初始時是翻轉180度的) */
.flip-card-back {background-color: #007bff;color: white;transform: rotateY(180deg);padding-top: 30px;
}
.flip-card-back h1 {font-size: 1.5em;margin-bottom: 10px;
}
.flip-card-back p {font-size: 1em;
}3.?添加動態操作 (Dynamic Action)
右鍵單擊您創建的 PL/SQL 區域，選擇 創建動態操作 (Create Dynamic Action)。
事件 (Event): 點擊 (Click)
選擇類型 (Selection Type): jQuery 選擇器 (jQuery Selector)
jQuery 選擇器 (jQuery Selector): .flip-card
在 真 (True) 操作下，創建 執行 JavaScript 代碼 (Execute JavaScript Code) 操作。
在 代碼 (Code) 中輸入: $(this.triggeringElement).toggleClass('is-flipped');
4. 看效果
點擊后實現翻轉↓
