YUI example for loading dependencies

gistfile1.js

// Our modules.js file
var MyApp = MyApp || {};
MyApp.Modules = {
    common: {},
    css: {
        'farbtastic.css': { type: 'css', varName: 'farbtastic.css', path: 'vendor/farbtastic/farbtastic.css' },
        'jquery.gritters.css': { type: 'css', varName: 'jquery.gritters.css', path: 'vendor/jquery.gritter/jquery.gritter.css' },
        'jquery.uploadify.css': { type: 'css', varName: 'jquery.uploadify.css', path: 'vendor/uploadify/uploadify.css' },
        'jquery.daterangepicker.css': { type: 'css', varName: 'jquery.daterangepicker.css', path:  'vendor/jquery.daterangepicker/ui.daterangepicker.css'}
    },
    
    js: {
        // The color picker for the partner look and feel customization        
        'farbtastic': { type: 'js', varName: 'farbtastic', path: 'vendor/farbtastic/farbtastic.js', requires: ['farbtastic.css']},
        'lightbox' : { type: 'js', varName: 'lightbox', path: 'vendor/jquery.lightbox_me.js'},
        'jquery.daterangepicker' : { type: 'js', varName: 'jquery.daterangepicker', path: 'vendor/jquery.daterangepicker/jquery.daterangepicker.js', requires: ['jquery.daterangepicker.css', 'lightbox'] }
    }

}

// In the HTML, store YUI loader in a var...
<script type="text/javascript">
    MyApp.Loader = YUI({
        base: 'static/script',
        modules: MyApp.Modules.common,
        charset: 'utf-8',
        timeout: 10000,
        combine: true,
        groups: {
            js: {
                root: 'script/',
                modules: MyApp.Modules.js,
                combine: true,
                comboBase: '/concat?'
            },
            css: {
                root: 'script/',
                modules: MyApp.Modules.css,
                combine: true,
                comboBase: '/concat?' // will hit http://mysite.com/concat?script/vendor/jquery.daterangepicker.js (etc)
            }
        }
    });
</script>

// Now load whatever you want...
<script type="text/javascript">
    MyApp.Loader.use('jquery.daterangepicker', function(){
        // Calling this module will call its requirements (requires array) before
        // it gets loaded.. so it will load jquery.daterangepicker.css and lightbox before itself.
        alert('lightbox is loaded!');
        alert('daterangepicker css is loaded!');
    })
</script>