web-dev-qa-db-fra.com

Comment utiliser jquery ui avec bower?

J'expérimente avec yeoman et bower .

J'ai créé une webapp yeoman en utilisant la commande suivante

yo webapp

Je veux utiliser jqueryui donc je l'ai installé en utilisant bower:

bower install jquery-ui --save

Cela fonctionne très bien, mais le composant jQuery UI ne contient pas de fichier javascript avec "tous" les composants, il contient juste beaucoup de fichiers javascript, un pour chaque composant.

Dois-je inclure uniquement les fichiers javascript dont j'ai besoin? Ou dois-je faire autre chose avant d'utiliser l'interface utilisateur jQuery?

Merci pour les conseils!

jquery-uiyeomanbower
23
cremersstijn

Ajoutée jquery-ui dans dependencies sur bower.json (ou component.json) avec jquery.

{
  …,
  "dependencies": {
    "jquery": "~1.9.1",
    "jquery-ui": "~1.10.3",
    ...
  },
  …
}

Installez-les:

bower install

Ensuite, chemin d'accès ajouté à jqueryui Dans main.js et l'exige:

require.config({
  paths: {
    jquery: '../components/jquery/jquery',
    jqueryui: '../components/jquery-ui/ui/jquery-ui',
    …
  },
  shim: {
    jqueryui: 'jquery',
    …
  },
  …
});
require(['app', 'jquery', 'jqueryui', 'bootstrap'], function (app, $) {
  'use strict';
   ...
});

Ça marche pour moi.

16
hiroshi

Pour référence, bower install jquery-ui --save ajouterait le jquery-ui.js la dépendance au projet, mais pas les styles. Pour cela, je devais ajouter au bower.json classer une section overrides, comme ci-dessous

{
  ...,
  "dependencies": {
    ...,
    "jquery-ui": "^1.11.4" // already added with --save from bower install command
  },
  ...,
  "overrides": {
    "jquery-ui": {
      "main": [
        "themes/smoothness/jquery-ui.css",
        "jquery-ui.js"
      ]
    }
  }
}

Références:

https://stackoverflow.com/a/27419553/4126114

https://github.com/taptapship/wiredep/issues/86

5
shadi

Dans le dernier composant de jQuery UI bower en ce moment (v. 1.10.3), vous pouvez effectuer les opérations suivantes:

  1. Pour les thèmes CSS, incluez le lien suivant:

    <link rel="stylesheet" href="bower_components_path/jquery-ui/themes/base/jquery-ui.css">

  2. Pour obtenir la plupart des composants et widgets de jQueryUI en cours d'exécution, incluez le script suivant:

    <script src="bower_components_path/jquery-ui/ui/jquery-ui.js" ></script>

5
ambodi

Je voudrais simplement inclure les fichiers dont j'ai besoin ou utiliser la construction personnalisée par défaut dans le dossier (qui, je crois, a tous les composants) si vous avez besoin de tout ou si c'est juste pour l'expérimentation.

<script src="components/jqueryui/ui/jquery-ui.custom.js"></script>

À l'heure actuelle, bower retire la totalité du référentiel et puisque (à partir de leur site Web) "bower n'est qu'un gestionnaire de paquets", tout autre élément nécessaire, comme la concaténation ou le chargement de modules, est géré par d'autres outils tels que sprockets/requirejs.

Références:

Utilisation de packages avec bower sur la page d'accueil http://bower.io/

Dissusion sur Bower et tirage de repos entiers https://github.com/bower/bower/issues/45

3
Craig MacGregor