Question

我正在使用CQ 5.5，我需要创建一个移动预览屏幕。

我使用extjs对话框表单在存储库中创建资源。这些资产通过Web服务提供给IOS和Android应用程序。

我需要关注此功能，以便预览此数据以供移动使用。

我有两个尖峰 - 一个使用手柄js使用正则表达式拉取屏幕中的数据，然后显示它。另一个是boostrap来显示响应式屏幕OUTSIDE cq。

实现移动预览屏幕的任何帮助都会很棒。我使用对话框创建的东西是幻灯片，图像，日期字段和文本。我想把它放到一个小的移动预览屏幕上。这可以是模态的或iframe。

Answer 1

我已经能够通过使用两个单独的div来显示手机内容和桌面内容来实现解决方案。以下是可能会对此有所帮助的人的代码。尊重这个网站

            <!DOCTYPE html>
            <html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
                  <link rel="stylesheet" type="text/css" href="css/style.css">
              </head>
            <body style="margin:0;padding:0;">

              <div id="container">

                <div id="switch">
                  <span id="data" class="active">DESKTOP</span>
                  <span id="preview">PHONE</span>
                </div>

                <div id="phonebezel" style="display:none;">

                  <div id="phonet-content">

                    <div id="toolbar">
                      <h1 id="title"><cq:text property="title"/></h1>
                   </div>

                  <div class="medicine--large">

                            <div class="medicine-name"><cq:text property="title"/></div>

                              <span class="checkmark"><img src="../contentmedicine-script/images/sample.png" width="18" height="18"></span>





                          <div class="description">

                            <h3><cq:text property="medicine-description"/></h3>

                          </div>

                  </div> 

                </div>

                <div id="meta-tags">

                  <div class="medicine--image">
                    <img src="<%= properties.get("medicineFileReference", "#") %>" width="320" height="480" />
                  </div>
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

              <script type="text/javascript">
                $(document).ready(function () {

                   $('#data').click(function(){
                      $(this).addClass('active');
                      $('#preview').removeClass('active');
                      $('#phonebezel').hide();
                      $('#meta-tags').fadeIn('slow');
                   });

                    $('#preview').click(function(){
                      $(this).addClass('active');
                      $('#data').removeClass('active');
                      $('#meta-tags').hide();
                      $('#phonebezel').fadeIn('slow');
                   });


                 });
              </script>

使用Adobe CQ 5.5的Bootstrap移动预览屏幕

1 个答案: