当前位置 : 主页 > 网页制作 > Dojo >

dojo bootstrap的使用

来源:互联网 收集:自由互联 发布时间:2021-06-15
前段时间关注了bootstrap的使用,bootstrap听说很火,但是自己最近一直在用dojo,以为两者是不相干的东西。extjs5都已经扁平化了,dojo的步伐好慢啊(难道dojo真的没人用了么?管他呢,反

前段时间关注了bootstrap的使用,bootstrap听说很火,但是自己最近一直在用dojo,以为两者是不相干的东西。extjs5都已经扁平化了,dojo的步伐好慢啊(难道dojo真的没人用了么?管他呢,反正我用着好就行了,我还会继续研究dojo)。当时也想着dojo赶紧出一套bootstrap的皮肤就好了。

前几天,无意中发现了dojo bootstrap,完全不理解什么东西,当时扫了一眼就过去了,没有在意。

直到今天,试着运行了下dojo bootstrap的demo才知道,正是我想要的!相当华丽啊!

废话不多说了,直接入正题。

------------------------------------------------我是分割线---------------------------------------------------------

先来个官方的demo看看,地址:http://martinpengellyphillips.github.io/dbootstrap/

需要的文件:1.dojo文件

                      2.bootstrap文件

                      3.dojo bootstrap文件  官网地址:http://xsokev.github.io/Dojo-Bootstrap/index.html

先上个效果图:

只是个演示,要注意看button的样式,纯bootstrap的样式啊。

这里是代码:

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Dojo-Bootstrap</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <%--这里是bootstrap的css文件,而不是dojo boorstrap的文件 --%>
            <link rel="stylesheet" href="bootstrap.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: [
                               //这里指向dojo bootstrap的文件夹路径
                        { name: "bootstrap", location: "../DojoBootstrap" }
                    ]
                };
            </script>
        
        	<%--这里指向dojo.js文件 --%>
            <script type="text/javascript" src="../js/dojo/dojo.js"></script>
    
            <script>
            //这里添加dojo bootstrap的js文件,比如Button.js文件,Dropdown.js的文件等,用到哪个就引入哪个控件吧,记得一定要引用,否则出不来效果。
                require(["bootstrap/Button", "bootstrap/Dropdown", "dojo/query"], 
                		function (Button, Dropdown, query) {
                    query("#loading-button").on("click", function(e){
                        query(e.target).button('loading');
                        setTimeout(function(){
                            query(e.target).button('reset');
                        }, 2000);
                    });
                });
            </script>
			
        </body>
    </html>

 这是dojo bootstrap中的readMe的例子,相当有用啊。 

好了,dojo可以使用bootstrap的样式了。

先到这里,有其他东西了再补充。

临结束了,再吐槽一句,dojo资料好少啊!英语不行啊!js功力不深啊!用着好费劲啊!

不过我就喜欢受虐:)

网友评论