Framework7 - 內容塊

上一頁
下一頁

描述

內容塊可用於新增具有不同格式的額外內容。

示例

以下示例演示了在 Framework7 中使用內容塊：

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Content Block</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Content Block</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <p>This is out side of content block!!!</p>
                     
                     <div class = "content-block">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis 
                        et quasi architecto beatae vitae dicta sunt explicabo.</p>
                     </div>
                     
                     <div class = "content-block">
                        <div class = "content-block-inner">This is another text block wrapped with "content-block-inner"</div>
                     </div>
                     
                     <div class = "content-block-title">Content Block Title</div>
                     
                     <div class = "content-block">
                        <p>Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur 
                        magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales. 
                        Integer blandit varius nisi quis consectetur.</p>
                     </div>
                     
                     <div class = "content-block-title">This is another long content block title</div>
                     
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                           accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo 
                           inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Content Block Inset</div>
                     
                     <div class = "content-block inset">
                        <div class = "content-block-inner">
                           <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. 
                           Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, 
                           vulputate turpis vel, sagittis felis. </p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Content Block Tablet Inset</div>
                     
                     <div class = "content-block tablet-inset">
                        <div class = "content-block-inner">
                           <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
                           Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, 
                           vulputate turpis vel, sagittis felis. </p>
                        </div>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
         var mainView = myApp.addView('.view-main');
      </script>
   </body>

</html>

輸出

讓我們執行以下步驟來檢視上面給出的程式碼是如何工作的：

  • 將上面給出的 HTML 程式碼儲存為content_block.html檔案，放在伺服器根目錄下。

  • 開啟此 HTML 檔案，地址為 https:///content_block.html，輸出結果如下所示。

  • 程式碼為文字內容添加了額外的格式和所需的間距。

列印頁面
上一頁
下一頁
廣告