apex报告页面转动结果

Question

我正在尝试将一个名为jQuery Booklet的jQuery模块转换为Apex搜索报告。如下所示：http://builtbywill.com/code/booklet/

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

Booklet jQuery附带了许多js和css文件。

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

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

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

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

干杯。

Answer 1

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

5. 将以下内容添加到 Javascript＆gt;文件URL textarea。

   #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＆gt;文件网址 textarea

   #WORKSPACE_IMAGES#jquery.booklet.latest.css
   

   注意：如果你有旧版本的apex并且找不到上面的textareas，请不要担心，只需将以下内容添加到 HTML标题

   <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.格式整合APEX项目。

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

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

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

10. 转到共享组件＆gt;模板即可。在报告子标题下，复制报告一列无序列表。如果它不存在，请复制任何垂直报告。

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

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

    • 行后：

      </div>
      <script>
      
      $(function() {
      //single book
      $('#mybook').booklet();
      
      });
      
      </script>
      

    • 所有其他字段应为空白。

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