آموزش jQuery Mobile - تک صفحه

Single Page

یک قالب استاندارد برای ایجاد چندین بار بدون تغییر آن صفحات استفاده می شود. فرمت استاندارد زیر برای ایجاد یک Single Page در موبایل جی کوئری استفاده می شود.

<div data-role = "page">
   <div data-role = "header">
      <h1>عنوان صفحه</h1>
   </div>

   <div role = "main" class = "ui-content">
      <p>محتوای صفحه اینجا می رود.</p>
   </div>

   <div data-role = "footer">
      <h4>پاورقی صفحه</h4>
   </div>
</div>

مثال زیر استفاده از Single Page در jQuery Mobile را نشان می دهد.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   
   <body>
      <div data-role = "page" id = "pageone">
         <div data-role = "header">
            <h1>Single Page</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to example.com</h2>
            <p>Lorem Ipsum به سادگی متن ساختگی چاپ و حروفچینی است
            صنعت. لورم ایپسوم از آن زمان تاکنون متن ساختگی استاندارد صنعت بوده است
            در دهه 1500، زمانی که یک چاپگر ناشناس یک گالری از نوع خود را برداشت و آن را به هم زد
            یک کتاب نمونه تایپ بسازید.</p>

            <p>Iاین یک واقعیت ثابت طولانی مدت است که حواس خواننده با آن پرت می شود
            محتوای قابل خواندن یک صفحه هنگام مشاهده طرح بندی آن. نکته استفاده
            Lorem Ipsum این است که دارای توزیع کم و بیش نرمال حروف است.
            برخلاف استفاده از «محتوا در اینجا، محتوا در اینجا»، که باعث می‌شود خوانا به نظر برسد
            انگلیسی. بسیاری از بسته های انتشارات دسکتاپ و ویرایشگرهای صفحه وب اکنون از Lorem استفاده می کنند
            Ipsum به عنوان متن مدل پیش‌فرض آن‌ها و جستجوی «lorem ipsum» آشکار می‌شود
            بسیاری از وب سایت ها هنوز در مراحل اولیه خود هستند</p>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

صفحه بندی - درس قبلی

درس بعدی - چند صفحه ا ی