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

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

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

این سرویس برای ایجاد یک پنجره پاپ آپ در بالای نمای عادی استفاده می شود ، که برای تعامل با کاربران استفاده می شود. چهار نوع پنجره پاپ آپوجود دارد – نمایش، تأیید، هشدار و بی درنگ.

استفاده از پاپ آپ نمایش

این پنجره از همه پیچیده ترین است. برای راه اندازی پنجره های بازشو ، باید سرویس  ionicPopup$ را به کنترل کننده خود تزریق کنیم و سپس فقط روشی اضافه کنیم که پنجره پاپ آپ را که می خواهیم استفاده کنیم ، در این مورد  ()ionicPopup.show$  راه اندازی کند. از تابع onTap (e) می توان برای افزودن روش ()e.preventDefault  استفاده کرد که اگر تغییری در ورودی اعمال نشود ، پنجره پاپ آپ را باز نگه می دارد. هنگامی که پنجره پاپ آپ بسته شود، مورد وعده داده شده حل خواهد شد.

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

.controller('MyCtrl', function($scope, $ionicPopup) {
   // When button is clicked, the popup will be shown...
   $scope.showPopup = function() {
      $scope.data = {}
    
      // Custom popup
      var myPopup = $ionicPopup.show({
         template: '<input type = "text" ng-model = "data.model">',
         title: 'Title',
         subTitle: 'Subtitle',
         scope: $scope,
            
         buttons: [
            { text: 'Cancel' }, {
               text: '<b>Save</b>',
               type: 'button-positive',
               onTap: function(e) {
                        
                  if (!$scope.data.model) {
                     //don't allow the user to close unless he enters model...
                     e.preventDefault();
                  } else {
                     return $scope.data.model;
                  }
               }
            }
         ]
      });

      myPopup.then(function(res) {
         console.log('Tapped!', res);
      });    
   };
})

کد HTML

<button class = "button" ng-click = "showPopup()">Add Popup Show</button>

احتمالاً در مثال ذکر شده متوجه شده اید که از برخی گزینه های جدید استفاده شده است. جدول زیر همه این گزینه ها و مورد استفاده آنها را توضیح می دهد.

گزینه های پاپ آپ

استفاده از پاپ آپ تأیید 

پنجره تأیید ساده ترین نسخه پنجره پاپ آپاست. این شامل دکمه های لغو و تأیید است که کاربران می توانند با فشار دادن آنها عملکرد متناظر را ایجاد کنند. این شی promised وعده داده شده را باز می گرداند که با فشار دادن یکی از دکمه ها حل می شود.

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

.controller('MyCtrl', function($scope, $ionicPopup) {
   // When button is clicked, the popup will be shown...
   $scope.showConfirm = function() {
       var confirmPopup = $ionicPopup.confirm({
         title: 'Title',
         template: 'Are you sure?'
      });

      confirmPopup.then(function(res) {
         if(res) {
            console.log('Sure!');
         } else {
            console.log('Not sure!');
         }
      });
    };
})

کد HTML

<button class = "button" ng-click = "showConfirm()">Add Popup Confirm</button>

جدول زیر گزینه های قابل استفاده برای این پنجره را توضیح می دهد.

  استفاده از پنجره پاپ آپ هشدار

Alert یک پنجره بازشوی ساده است که برای نمایش اطلاعات هشدار به کاربر استفاده می شود. این تنها یک دکمه دارد که برای بستن پنجره بازشو و حل شی promised وعده داده شده پنجره ها استفاده می شود.

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

.controller('MyCtrl', function($scope, $ionicPopup) {
   $scope.showAlert = function() {
      var alertPopup = $ionicPopup.alert({
         title: 'Title',
         template: 'Alert message'
      });

      alertPopup.then(function(res) {
         // Custom functionality....
      });
   };
})

کد HTML

<button class = "button" ng-click = "showAlert()">Add Popup Alert</button>

جدول زیر گزینه های قابل استفاده برای یک پنجره هشدار را نشان می دهد.

گزینه های پنجره پاپ آپ هشدار

 استفاده از پنجره پاپ آپ سریع

این یک دکمه تأیید دارد که وعده را با مقدار از ورودی و دکمه لغو را که با مقدار تعریف نشده حل می شود

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

.controller('MyCtrl', function($scope, $ionicPopup) {
   $scope.showPrompt = function() {
      var promptPopup = $ionicPopup.prompt({
         title: 'Title',
         template: 'Template text',
         inputType: 'text',
         inputPlaceholder: 'Placeholder'
      });
        
      promptPopup.then(function(res) {
         console.log(res);
      });
   };
})

کد HTML

<button class = "button" ng-click = "showPrompt()">Add Popup Prompt</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 جاوا اسکریپت در برنامه نویسی آیونیک