The iconic font designed for use with Bootstrap.

For more examples and usage, please visit the official website.

To display web fonts even though it is not supported, Cufon is used to render the icons as canvas elements. This is done for all included markup by IOUI when your page is loaded, but if you load external markup later (for instance using a template or through an UpdatePanel) and you have included icons, you must ensure that your icons are rendered on a device which do not support web fonts.

To do that, run the IOUI.applyCufon([selector]) function when you have inserted your rendered template into the DOM, and use the selector on which part that needs to be processd.

Example

Here we load a template which includes an icon and ensure Cufon processed the new markup.

var user = {
    Name : "Conny Bouvin"
}

var template = $.tmpl('<div id="external"><i class="icon icon-widget"></i><span class="text btn-text-left" data-bind="text: Name"></span></div>"', user);
template.appendTo("#target");

// Ensure Cufon process the included icon
IOUI.applyCufon("#target");
    

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or event handlers.

For more examples and usage, please visit the official website.

Examples

Alert

Confirm

Prompt

Custom Dialog

iOS-style overlays/notifications for the web.

Examples

Click the "Loading spinner" button to show a loading animation and click it again to hide it. You should use the predefined IOUI.spinner as spinner parameter. The "Success" and "Error" buttons have a two second duration to briefly inform the user.

It's possible to update a notification when it's already been added:

If you for instance wish to show the loading indicator whenever an AJAX-request is made, you can configure jQuery in the following way:

(function ($, undefined) {

    var ajaxLoading = null;

    $(document).ajaxStart(function () {                

        ajaxLoading = iosOverlay({
            text: "Loading",
            spinner: IOUI.spinner
        });
    }).ajaxStop(function () {

        ajaxLoading.hide();
        ajaxLoading = null;
    });

})(jQuery);
    

If you wish to display a loding indicator as soon as your document has loaded you can add the following code just before you include the @IOUI.CDN.Bundles.Scripts().

<script>
    (function () {
        var target = document.createElement("div");
        document.body.appendChild(target);
        var loading = new Spinner(IOUI.spinnerOptions).spin(target);

        iosOverlay({
            text: "Loading",
            spinner: loading
        });
    })();
</script>
@IOUI.CDN.Bundles.Scripts()
    

Add datepicker picker to field or to any other element.

For more examples and usage, please visit the official website.

Examples

Attached to a field with the format specified via options.

Default date picker.

Add datepicker picker to field or to any other element.

For more examples and usage, please visit the official website.

Examples

Simple example attached to a field with the format specified via options.

A very cool widget to easily select a time for a text input using your mouse or arrow keys.

Examples

Default timepicker.

What? Doesn't it already have alerts? Yes, but they are not as user-friendly as this is, to make a notification with Bootstrap you have to code some ugly psuedo-html/js solution in a hacky manner or create your own notification system. So I created this basic one that leverages the default alert script from Bootstrap.

For more examples and usage, please visit the official website.

Bootstrap Multiselect is plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.

For more examples and usage, please visit the official website.

Select2 is a replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent Chosen library.

For more examples and usage, please visit the official website.

Select2 also supports multi-value select boxes. The select below is configured with the multiple attribute.