欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

[DikeJS]RequireJS引入CSS样式文件(五)_html/css_WEB-ITnose

程序员文章站 2024-01-09 21:12:28
...
在实际开发组件时,我们常常需要关注组件的样式,样式如何定义,以及样式如何引用,我关注此问题时也纠结了一小下,不过还好,RequireJS周边给我们提供了丰富的插件,我们可以直接使用css.js,具体的使用方法如下:
(function () {
    requirejs.config({
        paths: {
            jquery   : 'lib/jquery-1.11.1.min',
            Template : 'Component/util/Template',
            Button   : 'Component/view/button/Button',
            Canvas   : 'Component/view/canvas/Canvas',
            Container: 'Component/view/container/Container'
        },
        /**
         * 设置css.js文件路径
         */
        map  : {
            '*': {
                'css' : 'lib/css'
            }
        },
        /**
         * 样式按照需要加载加载 键值名和加载模块的名称一致,目的是加载模块时加载对应的css样式
         */
        shim : {
            'Canvas1': ['css!./Component/view/canvas/css/login.css'],
            'Button' : ['css!./Component/view/button/css/ty-main.css']
        }
    });

    define(function (require) {
        var $ = require('jquery');
        $(document).ready(function () {
            var container = new (require('Container'))({
                id    : 'container',
                name  : 'container',
                width : '300px',
                height: '500px',
                render: $('body')
            });

            var canvas = new (require('Canvas'))({
                id       : 'Canvas',
                name     : 'Canvas',
                //render   : $('body'),
                listeners: {
                    onReady: function (_this) {
                        var ctx = _this.getContext2D();
                        ctx.fillStyle = '#FF0000';
                        ctx.fillRect(0, 0, 80, 100);
                    },
                    click  : function () {
                        alert(1);
                    }
                }
            });

             container.add(canvas);

        });
    });
})();

请仔细查看注释,你就明白如何引入css样式了,而且是在初次加载页面的时候就会将css样式写入到

以上就是[DikeJS]RequireJS引入CSS样式文件(五)_html/css_WEB-ITnose的内容,更多相关内容请关注PHP中文网(www.php.cn)!