Question

我在下面的代码中显示了叠加层中的按钮。

<div class="overlay22" id="overlay22" style="display:none;"></div>  
<div class="box22" id="box22">
    <input type="submit" value="Submit" class="buttonclick" id="buttonclick"  /> 
</div>

我们可以在叠加层中显示cq5表单而不是叠加层中的硬编码吗？

Answer 1

如果您只是创建某种基本表单模板或组件，我认为您应该坚持使用常规HTML元素，然后使用CSS控制外观+感觉。虽然如果你绝对需要使用类似于你在CQ的对话框窗口中看到的表单元素，你需要通过使用CQ的Ext JS框架扩展来生成它们。

例如，如果您想创建一个类似于您提供的示例的按钮，则必须编写如下内容：

    CQ.Ext.onReady( function(){
         var button = new CQ.Ext.Button({
              text : "Submit",
              id : "buttonclick",
              cls : "buttonclick",
              renderTo : CQ.Ext.getBody(),
              listerners : {
                   click : function(){
                      // Write handler code here
                   }
              }
         });
    });

最新版CQ（5.5）的Widget API： http://dev.day.com/docs/en/cq/current/widgets-api/index.html

Sencha Ext JS 3.4上的材料（我相信5.5是基于的）： http://docs.sencha.com/ext-js/3-4/

Answer 2

我们也可以用以下方式做，比方说我们有一个页面，其中已拖入默认的cq5表单组件，让该页面在此路径中定义为/content/geometrix/loginpage.html 现在，我们可以使用以下代码

在叠加层中显示上述页面

    <div class="overlay22" id="overlay22" style="display:none;"></div>  
    <div class="box22" id="box22">
    <sling:include path="content/geometrix/loginpage/par" />  
    </div>

在那个标准之下我们可以找到表格的内容。这里的box22是灯箱（弹出），而overlay22是背景div

如何在叠加层中显示cq5表单页面

2 个答案: