0

我正在尝试使用 Kendo UI 和 angular-kendo 构建一个 UI。但是不想使用 Kendo CSS。想要一个 Bootstrap 集成。

以下链接提供了有关如何执行此操作的信息：docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap

并且有一个示例演示页面： demos.telerik.com/kendo-ui/bootstrap/

现在我们从演示页面和说明中观察到，Bootstrap 可以与 JQuery 编码一起使用。尽管我们可以将 jQuery 作为 Kendo UI 的依赖项，但我们不想在 JQuery 中编写代码。我们只想使用 Angular 指令。

我们注意到上面显示的演示页面绘制了一个下拉框，如下所示：

 <div id="configurator-wrap" class="col-sm-9 hidden-xs">
      <div id="configurator" class="row">
                  <label class="col-sm-4">
                      <div class="description">Dimensions</div>
                      <select id="dimensions">
                      </select>
                  </label>
     </div>
 </div>

Bootstrap 要求这样的 JQuery：

 <script>
      $("#dimensions").kendoDropDownList({
          dataTextField: "text",
          dataValueField: "value",
          value: "common",
          dataSource: [
              { text: "Default", value: "common" },
              { text: "Bootstrap", value: "common-bootstrap" }
          ],
          change: function(e) {
              var commonLink = Application.getCurrentCommonLink();
              Application.updateLink(commonLink, Application.getCommonUrl(this.value()));
          }
      });
  </script>

相反，我们希望能够使用 angular-kendo 的书写方式下拉。我们将包含 Bootstrap CSS 等，它应该给 Bootstrap 外观。像这样：

<select kendo-drop-down-list>
  <option value="1">Thing 1</option>
  <option value="2">Thing 2</option>
  <option value="3">Thing 3</option>
</select>

如本演示所示，（但这是使用剑道 CSS 文件）： http: //kendo-labs.github.io/angular-kendo/#/

4

1 回答 1

2

当谈到 Kendo UI 的外观和感觉时，它都是由 CSS 主题驱动的。这意味着无论您使用 jQuery 方法、AngularJS 方法还是您想要采用的任何方法，主题都会驱动组件的外观。

因此，在Kendo UI Bootstrap 演示中，您会看到引用了以下 CSS 文件：

<link href="[...]/kendo.common-bootstrap.min.css" rel="stylesheet">
<link href="[...]/kendo.bootstrap.min.css" rel="stylesheet">
<link href="[...]/kendo.dataviz.min.css" rel="stylesheet">
<link href="[...]/kendo.dataviz.bootstrap.min.css" rel="stylesheet">

这些都可以在 Kendo UI 的本地安装目录中找到。在这种情况下，专门使用 AngularJS 并没有什么特别之处。

对于这个特定的演示，您需要做的只是将 Kendo UI 组件的 jQuery 实例化替换为 angular-kendo 版本。

另外，旁注：如果您使用任何 Bootstrap JS 插件，您还需要 jQuery，因为它们也依赖于 jQuery。

于 2014-03-26T20:00:07.400 回答