Ajouter un plugin jquery à Phonegap (Cordova)

Soumis par GoZ le lun 24/03/2014 - 09:53

Ajouter un plugin jquery à Phonegap (Cordova)

Le datepicker d'Android n'étant pas exceptionnel et orienté US (certains mots non traduits, pas d'options avancées pour modifier l'affichage), je veux intégrer le plugin pickadate.

Dans mon cas, je n'utilise que le JS pour la date, je n'ai pas besoin de celui du temps.

Il faut dans un premier temps déclarer notre plugin. Pour cela, modifier le fichier main.js et y ajouter le script de base picker.js et celui pour la date picker.date.js :
mains.js

require.config({
    shim:{
        Backbone:{
            deps:['underscore', 'jquery'],
            exports:'Backbone'
        },
        underscore:{
            exports:'_'
        },
        jquery:{
            exports:'$'
        },
        "pickadate": { // On déclare pickadate comme dépendant à jquery
            export: "$",
            deps: ['jquery']
        },
        "pickadateDate": { // On déclare pickadate comme dépendant à jquery et pickadate
            export: "$",
            deps: ['jquery', 'pickadate']
        }
    },
    paths:{
        // RequireJS plugin
        text:'libs/require/text',
        // RequireJS plugin
        domReady:'libs/require/domReady',
        // underscore library
        underscore:'libs/underscore/underscore',
        // Backbone.js library
        Backbone:'libs/backbone/backbone',
        // jQuery
        jquery:'libs/jquery/jquery.min',
        // pickadate
        pickadate: 'libs/pickadate/picker', // chemin vers la librairie de base pickadate
        pickadateDate: 'libs/pickadate/picker.date' // chemin vers la librairie de date de pickadate
    }
});

Nous pouvons maintenant faire appel à notre script.

app.js

define([
  // These are path alias that we configured in our bootstrap
  'jquery',     // lib/jquery/jquery
  'underscore', // lib/underscore/underscore
  'Backbone',    // lib/backbone/backbone
  'pickadate', // On déclare l'utilisation de notre lib de base datepicker
  'pickadateDate' // On déclare l'utilisation de notre lib de date datepicker
], function($, _, Backbone, pickadate, pickadateDate){
  // Above we have passed in jQuery, Underscore and Backbone
  // They will not be accessible in the global scope
  var viewApp = Backbone.View.extend({
    initialize: function() {
      this.render();
    },
    render: function() {
      Router.initialize();
      $('.datepicker').pickadate(); // Toutes les classes datepicker auront un pickadate.
    }
  });
  return viewApp;
  // What we return here will be used by other modules
});

Et voilà, au clique sur mon champ, j'ai un beau datepicker configurable :

Datepicker pickadate phonegap