Предварительный экран предварительного просмотра Bootstrap с использованием Adobe CQ 5.5

Я использую CQ 5.5 на работе, и мне необходимо создать мобильный экран предварительного просмотра.Предварительный экран предварительного просмотра Bootstrap с использованием Adobe CQ 5.5

Я использовал форму диалога extjs для создания активов в репозитории. Эти активы обслуживаются через веб-службу в приложениях IOS и Android.

Мне нужно следить за этим, имея возможность просматривать эти данные для использования в мобильных устройствах.

У меня есть два шипа - один с помощью руля js, который извлекает данные на экране с помощью регулярного выражения, а затем отображает его. Другой - это ускоритель для отображения чувствительного экрана OUTSIDE cq.

Любая помощь для достижения экрана предварительного просмотра для мобильных устройств будет отличной. Вещи, которые я создал с помощью диалогового окна, - это слайд-шоу, изображения, поле даты и текст. Я хотел бы поместить это в маленький экран предварительного просмотра. Это может быть модальным или iframe.

источник

2013-12-20 user2019339

Я не понимаю, что вы пытаетесь сделать. Вы пытаетесь создать веб-страницу, отображающую активы, как если бы они находились на мобильном устройстве, или создать веб-страницу для просмотра с мобильного устройства? –

первая - это то, что я хочу - веб-страница, отображающая активы, как будто они находятся на мобильном устройстве. – user2019339

Я смог достичь решения, используя два отдельных 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>

источник

2014-01-02 00:59:49 user2019339

ПОЖАЛУЙСТА, ПОДТВЕРЖДАЙТЕ РЕШЕНИЕ, ЕСЛИ ВЫ НАЙДЕТЕ ЭТО ПОМОЩЬ – user2019339

Предварительный экран предварительного просмотра Bootstrap с использованием Adobe CQ 5.5

ответ

Смежные вопросы