Ionic – Javascript Action Sheet

ورقة العمل عبارة عن خدمة Ionic service ستؤدي إلى تشغيل جزء منزلق لأعلى في الجزء السفلي من الشاشة، والذي يمكنك استخدامه لأغراض مختلفة.

إستخدام Action Sheet

في المثال التالي، سنوضح لك كيفية استخدام Ionic action sheet. أولاً، سنقوم بإدخال خدمة $ionicActionSheet باعتبارها تبعية لوحدة التحكم الخاصة بنا، ثم سنقوم بإنشاء وظيفة $scope.showActionSheet()، وأخيرًا سنقوم بإنشاء زر في قالب HTML الخاص بنا لاستدعاء الوظيفة التي أنشأناها.

Controller Code

.controller('myCtrl', function($scope, $ionicActionSheet) {
   $scope.triggerActionSheet = function() {
      // Show the action sheet
      var showActionSheet = $ionicActionSheet.show({
         buttons: [
            { text: 'Edit 1' },
            { text: 'Edit 2' }
         ],
			
         destructiveText: 'Delete',
         titleText: 'Action Sheet',
         cancelText: 'Cancel',
			
         cancel: function() {
            // add cancel code...
         },
			
         buttonClicked: function(index) {
            if(index === 0) {
               // add edit 1 code
            }
				
            if(index === 1) {
               // add edit 2 code
            }
         },
			
         destructiveButtonClicked: function() {
            // add delete code..
         }
      });
   };
})

HTML Code

<button class = "button">Action Sheet Button</button>

شرح الكود

عندما نضغط على الزر، سيتم تشغيل وظيفة $ionicActionSheet.show وستظهر Action Sheet. يمكنك إنشاء الوظائف الخاصة بك والتي سيتم استدعاؤها عند تسجيل أحد الخيارات. ستقوم وظيفة الإلغاء بإغلاق الجزء، ولكن يمكنك إضافة بعض السلوكيات الأخرى، والتي سيتم استدعاؤها عند النقر على خيار الإلغاء قبل إغلاق الجزء.

وظيفة ButtonClicked هي المكان الذي يمكنك من خلاله كتابة الرمز الذي سيتم استدعاؤه عند النقر على أحد خيارات التحرير. يمكننا تتبع أزرار متعددة باستخدام معلمة الفهرس. إن DestructiveButtonClicked هي وظيفة سيتم تشغيلها عند النقر على خيار الحذف. يكون هذا الخيار باللون الأحمر بشكل افتراضي.