آموزش منوی جانبی جاوا اسکریپت در برنامه نویسی آیونیک

آموزش منوی جانبی جاوا اسکریپت در برنامه نویسی آیونیک

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش منوی جانبی جاوا اسکریپت در برنامه نویسی آیونیک خواهیم پرداخت.

منوی جانبی (Side menu) یکی از پر کاربردترین اجزای Ionic است. منوی جانبی را می توانید با کشیدن انگشت به چپ یا راست یا با زدن دکمه ایجاد شده برای آن منظور باز کنید.

 استفاده از منوی جانبی

اولین عنصری که به آن نیاز داریم منوهای سمت یون است. این عنصر برای اتصال منوی کناری با تمام صفحه هایی که از آن استفاده می کنند استفاده می شود. عنصر ion-side-menu-content محلی است که محتوا در آن قرار می گیرد و عنصر menu-side-yon جایی است که می توانیم دستورالعمل جانبی قرار دهیم. منوی کناری را به index.html اضافه می کنیم و نمای ion-nav را درون محتوای منوی کناری قرار می دهیم. به این ترتیب می توان از منوی کناری در کل برنامه استفاده کرد.

index.html

<ion-side-menus>

   <ion-side-menu>side = "left">
      <h1>SIde Menu</h1>
   </ion-side-menu>

   <ion-side-menu-content>
      <ion-nav-view>
      </ion-nav-view>
   </ion-side-menu-content>

</ion-side-menus>

اکنون ، ما دکمه ای با دستور menu-toggle = “left” ایجاد خواهیم کرد. این دکمه معمولاً در نوار هدر برنامه ها قرار می گیرد ، اما ما برای درک بهتر آن را در پرونده الگوی خود اضافه خواهیم کرد.

وقتی دکمه را لمس کردید یا وقتی انگشت را به سمت راست می کشیم ، منوی کناری باز می شود. اگر می خواهید فقط یک دکمه فقط برای بستن منوی کناری داشته باشید ، می توانید دستورالعمل بستن منو را تنظیم کنید ، اما ما برای این کار از دکمه ضامن استفاده خواهیم کرد.

الگوی HTML

<button menu-toggle = "left" class = "button button-icon icon ion-navicon"></button>

کد فوق صفحه زیر را تولید می کند –

می توانید برخی ویژگی های اضافی را به عنصر ion-side-menus اضافه کنید. هنگامی که دکمه برگشت نشان داده می شود ، می توانید منوی کناری را فعال کنید تا منوی کناری غیرفعال شود. همچنین این دکمه تغییر منو را از سرصفحه پنهان می کند. ویژگی دیگر delegate-handle است که برای اتصال با  ionicSideMenuDelegate$ استفاده خواهد شد.

عنصر محتوای منوی سمت یون می تواند از ویژگی خاص خود استفاده کند. وقتی صفت drag-content روی false تنظیم شود ، با کشیدن صفحه محتوا امکان باز کردن منوی کناری را غیرفعال می کند. ویژگی edge-drag-threshold دارای مقدار پیش فرض ۲۵ است. این به این معنی است که کشیدن انگشت فقط ۲۵ پیکسل از لبه سمت چپ و راست صفحه مجاز است. ما می توانیم این مقدار عددی را تغییر دهیم یا می توانیم آن را روی نادرست تنظیم کنیم تا بتواند کشیدن صفحه را فعال کند یا برای غیرفعال کردن آن درست باشد.

منوی آیونیک می تواند از ویژگی جانبی استفاده کند که در مثال بالا نشان دادیم. این تعیین خواهد کرد که آیا منو باید از سمت چپ یا سمت راست نشان داده شود. ویژگی ‘is-enabled’ با مقدار false ، منوی کناری را غیرفعال می کند و مقدار ویژگی width عددی است که نمایانگر میزان عرض منوی کناری است. مقدار پیش فرض ۲۷۵ است.

نماینده منوی کناری

ionicSideMenuDelegate$ سرویسی است که برای کنترل همه منوهای جانبی برنامه استفاده می شود. ما نحوه استفاده از آن را به شما نشان خواهیم داد و سپس تمام گزینه های موجود را مرور خواهیم کرد. مانند تمام سرویس های آیونیک، ما باید آن را به عنوان یک وابسته به کنترل کننده خود اضافه کنیم و سپس از آن در محدوده کنترلر استفاده کنیم. حالا ، وقتی روی دکمه کلیک می کنیم ، همه منوهای کناری باز می شوند.

کد کنترل کننده

.controller('MyCtrl', function($scope, $ionicSideMenuDelegate) {
   $scope.toggleLeftSideMenu = function() {
      $ionicSideMenuDelegate.toggleLeft();
   };
})

کد HTML

<button class = "button button-icon icon ion-navicon" ng-click = "toggleLeft()"></button>

منبع.

لیست جلسات قبل آموزش برنامه نویسی آیونیک

1. آموزش برنامه نویسی آیونیک
2. نگاهی کلی به آموزش برنامه نویسی آیونیک
3. آموزش تنظیمات محیطی در برنامه نویسی آیونیک
4. آموزش رنگ ها در برنامه نویسی آیونیک 
5. آموزش ایجاد محتوا در برنامه نویسی آیونیک
6. آموزش هدر در برنامه نویسی آیونیک
7. آموزش فوتر در برنامه نویسی آیونیک 
8. آموزش دکمه ها در برنامه نویسی آیونیک
9. آموزش لیست ها در برنامه نویسی آیونیک
10. آموزش کارت ها در برنامه نویسی آیونیک
11. آموزش فرم ها در برنامه نویسی آیونیک
12. آموزش Toggle در برنامه نویسی آیونیک
13. آموزش چک باکس در برنامه نویسی آیونیک
14. آموزش دکمه های رادیویی در برنامه نویسی آیونیک
15. آموزش محدوده در برنامه نویسی آیونیک
16. آموزش Select در برنامه نویسی آیونیک
17. آموزش زبانه ها در برنامه نویسی آیونیک
18. آموزش شبکه در برنامه نویسی آیونیک
19. آموزش آیکون ها در برنامه نویسی آیونیک
20. آموزش پدینگ در برنامه نویسی آیونیک
21. آموزش صفحه اقدام جاوا اسکریپت در برنامه نویسی آیونیک
22. آموزش محتوای جاوا اسکریپت در برنامه نویسی آیونیک
23. آموزش فرم های جاوا اسکریپت در برنامه نویسی آیونیک
24. آموزش رویدادهای جاوا اسکریپت در برنامه نویسی آیونیک
25. آموزش هدر جاوا اسکریپت در برنامه نویسی آیونیک
26. آموزش فوتر جاوا اسکریپت در برنامه نویسی آیونیک
27. آموزش صفحه کلید جاوا اسکریپت در برنامه نویسی آیونیک
28. آموزش لیست جاوا اسکریپت در برنامه نویسی آیونیک
29. آموزش بارگذاری جاوا اسکریپت در برنامه نویسی آیونیک
30. آموزش Modal جاوا اسکریپت در برنامه نویسی آیونیک
31. آموزش پیمایش جاوا اسکریپت در برنامه نویسی آیونیک
32. آموزش Popover جاوا اسکریپت در برنامه نویسی آیونیک
33. آموزش پاپ آپ جاوا اسکریپت در برنامه نویسی آیونیک
34. آموزش پیمایش جاوا اسکریپت در برنامه نویسی آیونیک