昆明做网站建设,网站微信建设方案,做网站内容字体多少pt,公司网站制作高端目录 0. 以 Oracle 的标准示例表 EMP 为例#xff0c;实现卡片翻转
1. 创建卡片区域 (Cards Region)
2. 定义卡片的 HTML 结构
3. 添加 CSS 实现样式和翻转动画
4. 创建动态操作触发翻转
5. 运行效果 0. 以 Oracle 的标准示例表 EMP 为例#xff0c;实现卡片翻转
目标如…目录 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 classemp-card-containerdiv classemp-card-innerdiv classemp-card-frontdiv classemp-card-contenth2 classemp-nameENAME./h2p classemp-jobJOB./pspan classemp-card-flipper点击翻转/span/div/divdiv classemp-card-backdiv classemp-card-contenth3员工详情/h3pstrong编号:/strong EMPNO./ppstrong薪水:/strong SAL./ppstrong佣金:/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 SelectorjQuery 选择器.emp-card-container
4-3. 在“真”下执行如下JavaScript代码
$(this.triggeringElement).toggleClass(is-flipped);
5. 运行效果
