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

4 سال پیش

امتیاز دهید post

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

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

یک جعبه اسلاید حاوی صفحاتی است که با کشیدن صفحه محتوا قابل تغییر است.

استفاده از جعبه اسلاید

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

کد HTML

&lt;ion-slide-box&gt;

   &lt;ion-slide&gt;
      &lt;div class = "box box1"&gt;
         &lt;h1&gt;Box 1&lt;/h1&gt;
      &lt;/div&gt;
   &lt;/ion-slide&gt;

   &lt;ion-slide&gt;
      &lt;div class = "box box2"&gt;
         &lt;h1&gt;Box 2&lt;/h1&gt;
      &lt;/div&gt;
   &lt;/ion-slide&gt;

   &lt;ion-slide&gt;
      &lt;div class = "box box3"&gt;
         &lt;h1&gt;Box 3&lt;/h1&gt;
      &lt;/div&gt;
   &lt;/ion-slide&gt;

&lt;/ion-slide-box&gt;

.box1, box2, box3 {
   height: 300px;
   border: 2px solid blue;
}

<ion-slide-box>

<ion-slide>

</div>

</ion-slide>

<ion-slide>

</div>

</ion-slide>

<ion-slide>

</div>

</ion-slide>

</ion-slide-box>

.box1, box2, box3 {

height: 300px;

border: 2px solid blue;

}

خروجی مطابق تصویر زیر نشان داده می شود –

Ionic Javascript Slide Box 1

با کشیدن محتوا به سمت راست می توانیم کادر را تغییر دهیم. همچنین می توانیم به سمت چپ بکشید تا کادر قبلی نشان داده شود.

Ionic Javascript Slide Box 2
چند ویژگی که می توانند برای کنترل رفتار جعبه اسلاید استفاده شوند ، در جدول زیر ذکر شده است.

متدهای Delegate

ویژگی	نوع	جزئیات
does-continue	Boolean	به اولین یا آخرین جعبه ، حلقه جعبه اسلاید ادامه می دهد.
auto-play	Boolean	به صورت خودکار اسلاید می شود.
slide-interval	number	مقدار زمان بین تغییرات اسلاید خودکار در میلی ثانیه. مقدار پیش فرض 4000 است.
show-pager	Boolean	پیجر قابل مشاهده است.
pager-click	expression	هنگام ضربه زدن بر روی صفحه ای فراخوانی می شود (اگر پیجر قابل مشاهده است). $ index برای مطابقت با اسلایدهای مختلف استفاده می شود.
on-slide-changed	expression	در اسلاید هنگام تغییر اسلاید فراخوانی می شود. $ index برای مطابقت با اسلایدهای مختلف استفاده می شود.
active-slide	expression	ه عنوان مدلی برای اتصال شاخص اسلاید فعلی به استفاده می شود.
delegate-handle	string	برای شناسایی جعبه اسلاید با $ ionicSlideBoxDelegate استفاده می شود.

نماینده اسلاید جعبه

ionicSlideBoxDelegate$ سرویسی است که برای کنترل همه جعبه های اسلاید استفاده می شود. باید آن را به کنترل کننده تزریق کنیم.

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

.controller('MyCtrl', function($scope, $ionicSlideBoxDelegate) {
   $scope.nextSlide = function() {
      $ionicSlideBoxDelegate.next();
   }
})

.controller('MyCtrl', function($scope, $ionicSlideBoxDelegate) {

$scope.nextSlide = function() {

$ionicSlideBoxDelegate.next();

}

})

کد HTML

&lt;button class = "button button-icon icon ion-navicon" ng-click = "nextSlide()"&gt;&lt;/button&gt;

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

منبع.

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

امتیاز دهید post

نویسنده مطلب saber

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

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

استفاده از جعبه اسلاید

کد HTML

متدهای Delegate

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

کد HTML

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

دیدگاه شما

بدون دیدگاه

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

استفاده از جعبه اسلاید

کد HTML

متدهای Delegate

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

کد HTML

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه