如何在凉亭中使用jquery ui？

Question

我正在尝试自耕农和凉亭.

我使用以下命令创建了一个yeoman webapp

yo webapp

我想使用jqueryui所以我使用bower安装它:

bower install jquery-ui --save

这很好用,但是jQuery UI组件不包含带有"all"组件的javascript文件,它只包含很多javascript文件,每个组件一个.

我应该只包含我需要的javascript文件吗？或者我应该在使用jQuery UI之前做些什么？

谢谢你的提示!

Answer 1

新增jquery-ui的dependencies的bower.json(或component.json)沿jquery.

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

安装它们:

bower install

然后,添加到jqueryuiIn的路径main.js并要求它:

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';
   ...
});

这个对我有用.

Answer 2

在我们所说的最新的jQuery UI bower组件(v.1.10.3)中,您可以执行以下操作:

1. 对于CSS主题,请包含以下链接:

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

2. 要获得运行jQueryUI的大多数组件和小部件,请包含以下脚本:

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

Answer 3

作为参考,bower install jquery-ui --save将jquery-ui.js依赖项添加到项目,但不添加样式.为此,我需要在bower.json文件中添加一个overrides部分,如下所示

{
  ...,
  "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"
      ]
    }
  }
}

参考文献:

/sf/answers/1919368741/

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

Answer 4

如果您需要所有内容或者只是为了实验，我只会包含我需要的文件或使用文件夹中的默认自定义构建（我相信该文件夹包含所有组件）。

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

此时，bower 会拉下整个存储库，因为（从他们的网站）“bower 只是一个包管理器”，任何其他需要的东西（例如串联或模块加载）都由其他工具（例如 sprockets/requirejs）处理。

参考：

在主页http://bower.io/上使用带有 Bower 的包

关于 Bower 和拉取整个存储库的讨论 https://github.com/bower/bower/issues/45