当前位置：首页 > news >正文

Oracle APEX 利用卡片实现翻转

news 2025/9/9 6:50:52

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');