Dojo-Bootstrap 项目教程

最新推荐文章于 2024-09-15 07:11:52 发布

钟胡微Egan

最新推荐文章于 2024-09-15 07:11:52 发布

阅读量407

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00860/article/details/142084688

版权

Dojo-Bootstrap 项目教程

Dojo-BootstrapAn implementation of the Twitter Bootstrap framework using Dojo.项目地址:https://gitcode.com/gh_mirrors/do/Dojo-Bootstrap

1. 项目介绍

Dojo-Bootstrap 是一个使用 Dojo Toolkit 实现的 Twitter Bootstrap 框架。它将 Bootstrap 的 JavaScript 组件替换为 AMD 兼容的 Dojo 模块，使得开发者可以在 Dojo 项目中无缝使用 Bootstrap 的 UI 组件。该项目经过测试，兼容 Dojo 1.9.3 和 Bootstrap 3.1.1。

2. 项目快速启动

2.1 克隆项目

首先，克隆 Dojo-Bootstrap 项目到本地：

git clone git://github.com/xsokev/Dojo-Bootstrap.git

2.2 安装依赖

将 Dojo SDK 添加到 vendor/dojo 目录中，运行以下命令：

bower install

2.3 配置和运行

在浏览器中打开 http://host/path/to/Dojo-bootstrap/tests/index.html，即可查看示例和测试页面。

2.4 示例代码

以下是一个简单的示例，展示如何使用 Dojo-Bootstrap 中的按钮组件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dojo-Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="path/to/bootstrap/styles.css">
</head>
<body>
    <button type="button" id="loading-button" class="btn btn-primary" data-loading-text="Loading...">Load</button>
    <script>
        var dojoConfig = {
            async: 1,
            packages: [
                { name: "bootstrap", location: "path/to/Dojo-Bootstrap" }
            ]
        };
    </script>
    <script type="text/javascript" src="path/to/dojo/dojo/dojo.js"></script>
    <script>
        require(["bootstrap/Button", "dojo/query"], function (Button, query) {
            query("#loading-button").on("click", function(e) {
                query(e.target).button('loading');
                setTimeout(function() {
                    query(e.target).button('reset');
                }, 2000);
            });
        });
    </script>
</body>
</html>