Skip to content

Instantly share code, notes, and snippets.

@jbmoelker

jbmoelker/bootstrap.js

Last active January 15, 2016 19:22
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jbmoelker/b8c3c4359db7ca94439f to your computer and use it in GitHub Desktop.
Save jbmoelker/b8c3c4359db7ca94439f to your computer and use it in GitHub Desktop.
Download ZIP
requirejs-bootstrap-plugin
Raw
bootstrap.js
// Create shim for requested bootstrap component and require
// and return jQuery so you do not have to inject it separately
// every time you use a bootstrap component.
define({
load: function (name, req, onload, config) {
// Set this path to wherever the bootstrap components live.
// Contents should match https://github.com/twbs/bootstrap/tree/master/js
var component = 'path/to/bootstrap/js/'+name;
var shim = {};
shim[component] = {
deps: ['jquery'],
exports: '$.fn.'+name
}
require.config({ shim: shim });
req(['jquery', component], function ($, value) {
// return jQuery, just like jQuery's own $.fn methods do
onload($);
});
}
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="path/to/bootstrap.min.css" />
</head>
<body class="container">
<h1>Demo: Load bootstrap tooltip as module using RequireJS plugin.</h1>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<script data-main="index.js" src="path/to/require.js"></script>
</body>
</html>
Raw
index.js
// Simply use the bootstrap plugin helper.
// No need to include jQuery manually.
define(['bootstrap!tooltip'], function($){
$('[data-toggle="tooltip"]').tooltip();
});
// Note: if bootstrap.js is not in the baseUrl, then first set path:
// require.config({ paths:{ bootstrap: 'path/to/bootstrap-plugin' }});
@alsoicode
Copy link

What would the syntax be for using multiple Bootstrap plugins? What would be the value that you pass to the callback?

    define(['bootstrap!tooltip', 'bootstrap!modal'], function($, ?){
        $('[data-toggle="tooltip"]').tooltip();
    });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment