跳到主要内容

32 篇博文 含有标签「ai」

查看所有标签

[React Native 2] Modern JavaScript Programming language with ES6/ES2015

· 阅读需 1 分钟
Kobkrit Viriyayudhakorn
Kobkrit Viriyayudhakorn
CEO, iApp Technology

The followings are slide presentation for ITS484: Mobile App Development, SIIT, Thammasat University, Thailand (1/2016)

  1. Walkthrough guides for setup ES6 develop environment in Mac by using Babel
  2. Walkthrough guides setup ESLint to check the JavaScript style guide.
  3. Teach Modern JavaScript programming language (ES6/ES2015)
  4. Teach how to write ES6/ES2015 with correct style guides (be the best practices from day one) based on Airbnb

Source code Git repository: https://github.com/kobkrit/react-native-class-2017

Quiz Submission Form: https://goo.gl/forms/TWoTk9nic5dY2r0F2

Quiz Submission Form Short: http://bit.ly/2kuKvlM

Angular Corousel with Image-Thumbnail

· 阅读需 1 分钟
Kobkrit Viriyayudhakorn
Kobkrit Viriyayudhakorn
CEO, iApp Technology

See http://plnkr.co/edit/8TACXGHmMDV4k0O7D6DC?p=preview

We have implemented the corousel with image thumbnail into an AngularJS (Angular version 1) project based on the bootstrap angular-ui library, http://angular-ui.github.io/bootstrap/.

Preview

HTML Code

Slide {{$index}}​

{{slide.text}}_P_ _N_ Add SlideInterval, in milliseconds:   
        
Enter a negative number to stop the interval.

JS Code

angular.module('plunker', ['ui.bootstrap']);  
function CarouselDemoCtrl($scope) {  
  $scope.myInterval = 5000;  
  $scope.thumbnailSize = 5;  
  $scope.thumbnailPage = 1;  
  var slides = $scope.slides = [];  
  $scope.addSlide = function(i) {  
    var newWidth = 600 + slides.length;  
    slides.push({  
      image: 'http://placekitten.com/' + newWidth + '/300',  
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +  
        ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4],  
      index: i  
    });  
  };  
  for (var i=0; i<8; i++) {  
    $scope.addSlide(i);  
  }  
    
  $scope.prevPage = function(){  
    if ($scope.thumbnailPage > 1){  
      $scope.thumbnailPage--;  
    }  
    $scope.showThumbnails = slides.slice(($scope.thumbnailPage-1)*$scope.thumbnailSize,$scope.thumbnailPage*$scope.thumbnailSize);  
  }  
    
  $scope.nextPage = function(){  
    if ($scope.thumbnailPage <= Math.floor(slides.length/$scope.thumbnailSize)){  
      $scope.thumbnailPage++;  
    }  
    $scope.showThumbnails = slides.slice(($scope.thumbnailPage-1)*$scope.thumbnailSize,$scope.thumbnailPage*$scope.thumbnailSize);  
  }  
    
  $scope.showThumbnails = slides.slice(($scope.thumbnailPage-1)*$scope.thumbnailSize,$scope.thumbnailPage*$scope.thumbnailSize);  
  $scope.setActive = function(idx) {  
    $scope.slides[idx].active=true;  
  }  
}
标签：