如何在覆盖图中显示cq5表单页面

问题描述：

<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形式？

答

如果你只是创建一些基本的表单模板或组件，我认为你应该坚持使用普通的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 
        } 
       } 
     }); 
    });

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

材料上煎茶的Ext JS 3.4（我认为5.5是建立在）： http://docs.sencha.com/ext-js/3-4/

嗨西蒙，感谢您的回复，我会尝试按照您的建议进行实施。 – balaji

答

我们可以通过以下方式做的一样好，假设我们有一个页面，默认的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>

低于这个面值我们可以找到form.Here box22的内容是灯箱（弹出）和overlay22是背景DIV

如何在覆盖图中显示cq5表单页面

相关推荐