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

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

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

وقتی  modal آیونیک فعال شود ، صفحه محتوا در بالای محتوای معمولی ظاهر می شود. Modal در واقع پنجره پنجره بزرگتری با قابلیت های بیشتر است. Modal به طور پیش فرض کل صفحه را پوشش می دهد اما می تواند به روشی که می خواهید بهینه شود.

 استفاده از Modal

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

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

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

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('my-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
   }).then(function(modal) {
      $scope.modal = modal;
   });
    
   $scope.openModal = function() {
      $scope.modal.show();
   };
    
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
    
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
    
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
    
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

کد HTML

<script id = "my-modal.html" type = "text/ng-template">
   <ion-modal-view>
      <ion-header-bar>
         <h1 class = "title">Modal Title</h1>
      </ion-header-bar>
        
      <ion-content>
         <button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>
      </ion-content>
   </ion-modal-view>
</script>

روشی که ما در آخرین مثال نشان دادیم این است که از برچسب اسکریپت به عنوان ظرفی برای روش ما در داخل برخی از پرونده های HTML موجود استفاده می شود.

روش دوم ایجاد یک فایل الگوی جدید در داخل پوشه templates است. ما از کدی مشابه آخرین مثال خود استفاده خواهیم کرد ، اما تگ های اسکریپت را حذف خواهیم کرد و همچنین برای اتصال modal با الگوی جدید ایجاد شده ، باید از TemplateUrl در کنترلر تغییر کنیم.

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

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('templates/modal-template.html', {
      scope: $scope,
      animation: 'slide-in-up',
   }).then(function(modal) {
      $scope.modal = modal;
   });
    
   $scope.openModal = function() {
      $scope.modal.show();
   };
    
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
    
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
    
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
    
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

کد HTML

<ion-modal-view>
   <ion-header-bar>
      <h1 class = "title">Modal Title</h1>
   </ion-header-bar>
    
   <ion-content>
      <button class = "button icon icon-left ion-ios-close-outline"
         ng-click = "closeModal()">Close Modal</button>
   </ion-content>
</ion-modal-view>

روش سوم استفاده از Ionic modal درج HTML درون خطی است. ما از تابع fromTemplate به جای ازTemplateUrl استفاده خواهیم کرد.

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

.controller('MyController', function($scope, $ionicModal) {
   $scope.modal = $ionicModal.fromTemplate( '<ion-modal-view>' +
      ' <ion-header-bar>' +
         '<h1 class = "title">Modal Title</h1>' +
      '</ion-header-bar>' +
        
      '<ion-content>'+
         '<button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>' +
      '</ion-content>' +
        
   '</ion-modal-view>', {
      scope: $scope,
      animation: 'slide-in-up'
   })

   $scope.openModal = function() {
      $scope.modal.show();
   };
    
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
    
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
    
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
    
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

هر سه مثال تأثیر یکسانی دارند. ما یک دکمه ایجاد خواهیم کرد تا $ ionicModal.show () را باز کند تا modal باز شود.

کد HTML

<button class = "button" ng-click = "openModal()"></button>

وقتی modal را باز می کنیم، حاوی یک دکمه است که برای بستن آن استفاده می شود. ما این دکمه را در یک الگوی HTML ایجاد کردیم.

همچنین گزینه های دیگری برای بهینه سازی حالت وجود دارد. ما قبلاً نحوه استفاده از دامنه و انیمیشن را نشان دادیم. جدول زیر گزینه های دیگر را نشان می دهد.

جزئیات نوع گزینه

منبع.

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

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. آموزش بارگذاری جاوا اسکریپت در برنامه نویسی آیونیک