شنبه ۲۹ دي ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

آموزش jQuery Mobile - صفحه دیالوگ ها

دیالوگ ها(dialogs)

محتوا را در یک پوشش تعاملی در بالای صفحه باز می کنند.

 انواع صفحات دیالوگ :

1-Basic Dialogs: شامل  خصیصه data-dialog = "true" برای هر صفحه ای برای نمایش دیالوگ.

2-افزونه transition:  جلوه انتقال ساده ای را ارائه می دهد.

3-Closing دیالوگ :دکمه بستن را می توان با افزودن data-close-btn = "راست" به محفظه گفتگو در سمت راست تنظیم کرد.

4-Chaining Dialogs:از ویژگی data-rel = "back" برای پیمایش برای بازگشت به گفتگوی قبلی استفاده می شود.

5-استایل و طرح زمینه(Styling & theming): استایل و طرح زمینه متفاوت را می توان در یک گفتگو اعمال کرد.

6-عرض و حاشیه(width and margins):گفتگو به طور پیش فرض، عرض و حاشیه گفتگو تنظیم شده است.

Basic Dialogs:

ویژگی data-dialog = "true" را در هر صفحه ای برای نمایش یک دیالوگ اضافه کنید. به طور پیش‌فرض، اگر هدر گفت‌وگو گنجانده شده باشد، کادر محاوره‌ای یک دکمه بستن نیز خواهد داشت. وقتی صفت گفتگو گنجانده شد، فریم ورک به آن استایل اضافه می کند، یعنی گوشه گرد، حاشیه و غیره.

مثال

مثال زیر استفاده از دیالوگ های اساسی در 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 = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div role = "main" class = "ui-content">
            <p><a href = "#page2" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline">
            Open dialog</a></p>
         </div>

         <div data-role = "footer">
            <h4>Footer</h4>
         </div>
      </div>

      <div data-role = "page" data-dialog = "true" id = "page2">
         <div data-role = "header">
            <h1>Dialogs</h1>
         </div>

         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
            industry. Lorem Ipsum has been the industry's standard dummy text ever 
            since the 1500s.</p>
            
            <p><a href = "#page1" class = "ui-btn ui-corner-all">Back</a></p>
         </div>
      </div>
   </body>
</html>

افزونه transition :

یک جلوه انتقال ساده را ارائه می دهد. ویژگی انتقال داده برای اعمال یک انتقال متفاوت بر روی دیالوگ طبق انتخاب استفاده می شود.

مثال زیر استفاده از انتقال را در 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 = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div role = "main" class = "ui-content">
            <a href = "#page2" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline" 
               data-transition = "slidedown">SlideDown Dialog</a>
            <a href = "#page3" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline"
               data-transition = "flip">Flip Dialog</a>
         </div>

         <div data-role = "footer">
            <h4>Footer</h4>
         </div>
      </div>

      <div data-role = "page" data-dialog = "true" data-close-btn = "right" id = "page2">
         <div data-role = "header">
            <h1>Dialogs</h1>
         </div>

         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s.</p>
      
            <p><a href = "#page1" class = "ui-btn ui-corner-all">Back</a></p>
         </div>
      </div>
      
      <div data-role = "page" data-dialog = "true" data-close-btn = "none" id = "page3">
         <div data-role = "header">
            <h1>Dialogs</h1>
         </div>

         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s.</p>
            
            <p><a href = "#page1" class = "ui-btn ui-corner-all">Back</a></p>
         </div>
      </div>
   </body>
</html>

دکمه بستن (closing button):

را می توان با افزودن data-close-btn = "right" به محفظه گفتگو در سمت راست تنظیم کرد. به طور پیش فرض، دکمه بستن در سمت چپ در کادر محاوره ای وجود دارد، زمانی که گفتگوی ویژگی گنجانده شده است. اگر به دکمه بستن در کادر محاوره ای نیاز ندارید، می توانید data-close-btn = "none" را به ظرف محاوره اضافه کنید.

تنظیم متن دکمه بستن

  • از طریق ویژگی داده گفتگو، می توان متن دکمه بستن را تنظیم کرد.
  • این یک ویژگی دسترسی مهم است زیرا متن دکمه بستن را می توان برای ترجمه به زبان های مختلف تغییر داد.
  • به طور پیش فرض، یک دکمه فقط نماد نمایش می دهد.
  • متن روی صفحه نمایش نامرئی است اما صفحه خوان می تواند آن را بخواند.
  • data-attribute data-close-btn-text برای پیکربندی متن از نشانه گذاری شما تنظیم شده است.
  • ویژگی mobile.dialog.prototype.options.closeBtnText.$را می توان روی یک رشته خاص تنظیم کرد و می توانید با اتصال به رویداد mobileinit برای همه دیالوگ ها پیکربندی کنید.

مثال زیر استفاده از بستن دیالوگ ها در 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 = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div role = "main" class = "ui-content">
            <a href = "#page2" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline">
               Close Button</a>
            <a href = "#page3" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline">
               No Close Button</a>
         </div>

         <div data-role = "footer">
            <h4>Footer</h4>
         </div>
      </div>

      <div data-role = "page" data-dialog = "true" data-close-btn = "right" id = "page2">
         <div data-role = "header">
            <h1>Dialogs</h1>
         </div>

         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s.</p>
            
            <p><a href = "#page1" class = "ui-btn ui-corner-all">Back</a></p>
         </div>
      </div>

      <div data-role = "page" data-dialog = "true" data-close-btn = "none" id = "page3">
         <div data-role = "header">
            <h1>Dialogs</h1>
         </div>

         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s.</p>
            
            <p><a href = "#page1" class = "ui-btn ui-corner-all">Back</a></p>
         </div>
      </div>
   </body>
</html>

دیالوگ Chaining :

ویژگی data-rel = "back" برای پیمایش برای بازگشت به گفتگوی قبلی استفاده می شود. هنگامی که یک دیالوگ به کادر گفتگوی دوم و گفتگوی دوم به جعبه سوم زنجیر می شود، سپس با استفاده از data-rel = "back" در گفت و گوی سوم می توانید به کادر گفتگوی دوم بروید.

مثال زیر استفاده از گفتگوهای زنجیره ای را در 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 = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div role = "main" class = "ui-content">
            <a href = "#page2" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline">
               Open Dialog</a>
         </div>

         <div data-role = "footer">
            <h4>Footer</h4>
         </div>
      </div>

      <div data-role = "page" data-dialog = "true" id = "page2">
         <div data-role = "header">
            <h1>First Dialogs</h1>
         </div>

         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s.</p>
            
            <a href = "#page3" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline">
               Open Second Dialog</a>
         </div>
      </div>
      
      <div data-role = "page" data-dialog = "true" data-close-btn = "none" id = "page3">
         <div data-role = "header">
            <h1>Second Dialogs</h1>
         </div>

         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s.</p>
            
            <a href = "#page1" class = "ui-btn ui-corner-all" data-rel = "back">
               Back to First Dialog </a>
         </div>
      </div>
   </body>
</html>

دیالوگStyling and Theming:

استایل و مضمون متفاوتی را می توان در یک دیالوگ اعمال کرد. در زیر راه هایی برای اعمال تم ها و سبک ها در یک گفتگو وجود دارد

تم ها را می توان با افزودن ویژگی-موضوع به هر کانتینری مانند سرصفحه، پاورقی یا محتوا در گفتگو گنجاند.

شامل data-corners = "false" برای حذف گوشه گرد از گفتگو، زیرا به طور پیش فرض گوشه ها به صورت گرد تنظیم می شوند. ویژگی data-overlay-theme همپوشانی را روی هر حرف الگو تنظیم می کند.

از دکمه های چندگانه نیز می توان در دیالوگ ها استفاده کرد. گفتگو را می توان با اضافه کردن {margin-top:0} به کلاس مشخص شده برای صفحه در بالا ثابت کرد. ui-dialog.my-dialog .ui-dialog-contain

مثال:

<!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>
      
      <style>
         .ui-dialog.dialog-actionsheet .ui-dialog-contain {
            margin-top: 0;
         }
      </style>
   </head>
   
   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "header" data-theme = "b">
            <h2>Header</h2>
         </div>

         <div role = "main" class = "ui-content">
            <a href = "#page2" class = "ui-btn ui-corner-all ui-btn-inline">
            Open Dialog</a>
            <a href = "#page3" class = "ui-btn ui-corner-all ui-btn-inline">
            Photos Dialog</a>
         </div>

         <div data-role = "footer">
            <h4>Footer</h4>
         </div>
      </div>

      <div data-role = "page" data-dialog = "true" id = "page2" data-corners = "false" 
         data-overlay-theme = "b">
         <div data-role = "header">
            <h1>First Dialogs</h1>
         </div>

         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s.</p>
            
            <a data-rel = "back" class = "ui-btn ui-corner-all ui-btn-inline">Back</a>
         </div>
      </div>

      <div data-role = "page" class = "dialog-actionsheet" data-dialog = "true" 
         id = "page3">
         <div role = "main" class = "ui-content">
            <h3>Share Photos</h3>
            <a href = "#page4" data-transition = "slidedown" class = "ui-btn ui-shadow 
            ui-corner-all ui-btn-b">Email</a>
            
            <a href = "#page4" data-transition = "slidedown" class = "ui-btn ui-shadow 
            ui-corner-all ui-btn-b">Share on Facebook</a>
            
            <a href = "#page4" data-transition = "slidedown" class = "ui-btn ui-shadow 
            ui-corner-all ui-btn-b">Tweet photo</a>
            
            <a data-rel = "back" class = "ui-btn ui-shadow ui-corner-all ui-btn-a">
            Cancel</a>
         </div>
      </div>

      <div data-role = "page" class = "dialog-actionsheet" data-dialog = "true" 
         id = "page4">
         <div role = "main" class = "ui-content">
            <h3>Photos uploaded successfully</h3>
            <a href = "#page1" class = "ui-btn ui-shadow ui-corner-all ui-btn-a">
            View photo page</a>
            
            <a href = "#page1" class = "ui-btn ui-shadow ui-corner-all ui-btn-a">
            Done</a>
         </div>
      </div>
      
   </body>
</html>

 دیالوگ width and margins:

به طور پیش فرض، عرض و حاشیه گفتگو در موبایل جی کوئری تنظیم شده است. عرض پیش فرض گفتگو 92.5٪ است. در صفحه‌های بزرگ‌تر، حاشیه بالای محاوره بزرگ‌تر تنظیم می‌شود، یعنی 10٪ حاشیه بالا، اما در صفحه کوچک به یک حاشیه کوچک جمع می‌شود. در صورت نیاز می توان این سبک را نادیده گرفت.

ui-dialog-contain {
   width: 92.5%;
   max-width: 500px;
   margin: 10% auto 15px auto;
   padding: 0;
   position: relative;
   top: -15px;
}

کنوانسیون ها، نه الزامات

  • عناصر ویژگی نقش داده مانند سرصفحه، پاورقی، صفحه و محتوا برای ارائه قالب و ساختار اصلی یک صفحه استفاده می شود.
  • برای اسناد تک صفحه ای، بسته بندی صفحه برای راه اندازی خودکار مورد نیاز بود، به عنوان اختیاری تنظیم می شود.
  • عنصر ساختاری را می توان برای یک صفحه وب با طرح بندی سفارشی حذف کرد.
  • برای مدیریت صفحات، بسته بندی صفحه توسط فریمورک تزریق می شود، زمانی که توسط نشانه گذاری گنجانده نشده باشد.

واکشی اولیه صفحات

از جمله ویژگی data-prefetch، می‌توانیم صفحات را در قالب‌های تک صفحه‌ای از قبل در DOM واکشی کنیم.

کش DOM

هنگامی که حافظه مرورگر در DOM پر می شود، سرعت مرورگر موبایل را کاهش می دهد یا ممکن است به دلیل بارگیری چندین صفحه از کار بیفتد. یک روش ساده برای مرتب نگه داشتن DOM وجود دارد -

  • وقتی صفحه ای از طریق ajax بارگذاری می شود، نشان می دهد که وقتی به صفحه دیگری هدایت می کنید، صفحه را از DOM حذف کنید.
  • صفحه قبلی که از آن بازدید کرده اید را می توان در صورت بازدید مجدد از حافظه پنهان بازیابی کرد.
  • به جای حذف صفحات، می توانید با استفاده از خط زیر به jQuery mobile بگویید آن را در DOM نگه دارد .
$.mobile.page.prototype.options.domCache = true;

گزینه domCache را به عنوان true در افزونه صفحه تنظیم کنید تا تمام صفحات در DOM که قبلاً بازدید شده بود، باقی بماند.

pageContainerElement.page({ domCache: true });

* تبریک میگم شما درس صفحه بندی را با موفقیت مطالعه کردید و به پایان رساندید ،حالا پیش به سوی درس بعدی و یادگیر بیشتر...*

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