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

目录

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 表查询数据并为每个员工生成一个卡片HTML
    FOR rec IN (SELECT ENAME, JOB, EMPNO, SAL, COMM FROM EMP) LOOP
        l_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. 看效果

点击后实现翻转↓