0

我正在尝试将名为 jQuery Booklet 的翻页 jQuery 模块用于 Apex 搜索报告。此处显示：http: //builtbywill.com/code/booklet/

我的目标是在页面上显示一个搜索结果行。

Booklet jQuery 带有许多 js 和 css 文件。

首先：我在哪里可以通过 Apex 前端上传这些文件？

其次：如何通过html引用这些文件？

第三：如何将 Apex 项目集成到 HTML 中？

我知道这完全是新手，但任何形式的建议都会很有用。

干杯。

4

1 回答 1

1
  1. 下载小册子 zip 文件
  2. 在您的 Apex 应用程序中，转至共享组件 > 静态文件并从小册子子文件夹上传以下文件。（我没有包含 Jquery 文件，因为 APEX 已经有这个）。
    • jquery.booklet.latest.min.js
    • jquery.easing.1.3.js
    • jquery-ui-1.10.1.custom.min
  3. 转到共享组件 > 级联样式表并上传以下内容：
    • jquery.booklet.latest.css
  4. 返回到相关的顶点页面。在左侧栏（页面渲染），点击页面旁边的编辑按钮。如果您在树视图中，请双击页面进行编辑

  5. 将以下内容添加到Javascript > 文件 URLS文本区域。

    #WORKSPACE_IMAGES#jquery-ui-1.10.1.custom.min.js
#WORKSPACE_IMAGES#jquery.easing.1.3.js
#WORKSPACE_IMAGES#jquery.booklet.latest.min.js

    将以下行添加到CSS > File URLS textarea

    #WORKSPACE_IMAGES#jquery.booklet.latest.css

    注意：如果你有旧版本的 apex，找不到上面的 textareas，不用担心，只需将以下内容添加到HTML Header

    <script src="#WORKSPACE_IMAGES#jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>    
<script src="#WORKSPACE_IMAGES#jquery.easing.1.3.js" type="text/javascript"></script>
<script src="#WORKSPACE_IMAGES#jquery.booklet.latest.min.js" type="text/javascript"></script>
<link href="#WORKSPACE_IMAGES#jquery.booklet.latest.css" type="text/css" rel="stylesheet" media="screen, projection, tv" />

  6. 创建一个名为“Booklet”的新 HTML 区域。确保区域模板设置为“无模板”。将源设置为以下。

    <div id="mybook">
    <div> 
        <h3>Yay, Page 1!</h3>
    </div>
    <div> 
        <h3>Yay, Page 2!</h3>
    </div>
    <div> 
        <h3>Yay, Page 3!</h3>
    </div>
    <div> 
        <h3>Yay, Page 4!</h3>
    </div>
</div>

<script>

$(function() {
    //single book
    $('#mybook').booklet();
});

</script>

  7. 运行页面进行测试！如果它不起作用，请查看源代码并确保所有文件都正确链接。

  8. &P1_ITEM.使用Region Source 中的格式集成 APEX 项目。

  9. 要配置小册子，请参阅http://builtbywill.com/code/booklet/demos/size

    编辑 - 如何创建基本的小册子报告模板

    刚刚看到您想要一个报告，而不是一个普通的旧 HTML 区域。我仍然建议您执行上述步骤以确保插件正常工作。当它工作顺利时，请执行以下操作：

  10. 转到共享组件 > 模板。在Reports子标题下，复制报告One Column Unordered List。如果不存在，请复制任何垂直报告。

  11. 在新的报告模板中，输入以下内容：

    • 行前：<div id="mybook">
    • 每行之前：<div>
    • 列模板 1：#COLUMN_VALUE#
    • 每行之后：</div>

    • 行后：

      </div>
<script>

$(function() {
//single book
$('#mybook').booklet();

});

</script>
    • 所有其他字段应为空白。

  12. 转到新的 Apex 页面。创建一个新报告，将区域模板设置为无模板，将报告模板设置为您刚刚创建的模板。

于 2013-05-14T07:36:14.797 回答