Skip navigation

Bootstrap Extensions

Some third party modules for bootstrap and apache wicket.

This is a label changed by dropzone

Example

Default

A customizable HTML5 video player plugin for jQuery based on bootstrap UI.

List<Html5Player.IVideo> videos = Lists.<Html5Player.IVideo>newArrayList(
		new Video("video.ogv", "video/ogg"),
		new Video("video.mp4", "video/mp4")
);
add(new Html5Player("video", Model.ofList(videos)));

Customized

List<Html5Player.IVideo> videos = Lists.<Html5Player.IVideo>newArrayList(
		new Video("video.ogv", "video/ogg"),
		new Video("video.mp4", "video/mp4")
);
add(new Html5Player("video", Model.ofList(videos),
	new Html5VideoConfig().showProgressBar(false).autoHideControlBar(false))
		.setWidth(680).setHeight(360));

Example

Default

A context menu extension of Bootstrap made for everyone's convenience.

final List<? extends AbstractLink> buttons = Lists.<AbstractLink>newArrayList(
	new MenuBookmarkablePageLink<>(...),
	[...]
);
final Component contextPanel = new TransparentWebMarkupContainer("context-panel");
final ButtonListContextMenu contextMenu = new ButtonListContextMenu("contextmenu", 
		Model.ofList(buttons));
contextMenu.assignTo(contextPanel);
add(contextMenu, contextPanel,

see issue #97.

Open Modal Dialog

                        

see issue #112.

see issue #112.

all available icons are documented here.

response.render(JavaScriptHeaderItem.forReference(OpenWebIconsCssReference.instance()));

add(new Icon("html5", OpenWebIconType.html5));

see issue #116.

  • Step One
  • Step Two
  • Step Three

An input mask by Jasny Bootstrap extensions. See issue #130.

Add some loading effects to your Ajax links and submit buttons with Ladda-Bootstrap.

| Link, 2secs

laddaLink = new LaddaAjaxLink<String>("laddaLink", Model.of("Link, 2secs"), Buttons.Type.Success) {
    @Override public void onClick(AjaxRequestTarget target) {
        Duration.seconds(2).sleep();
    }
};
laddaLink.setEffect(LaddaBehavior.Effect.EXPAND_LEFT).setSize(Buttons.Size.Medium);

Add confirmation behavior for buttons and links with Bootstrap-Confirmation.

| Link

confirmationLink = new AjaxLink<String>("confirmationLink", Model.of("Link")) {
    @Override public void onClick(AjaxRequestTarget target) {
        info("Invoked link's #onClick()!");
        target.add(feedback);
    }
};
confirmationLink.add(new ConfirmationBehavior(new ConfirmationConfig().withBtnCancelLabel("Reject")));

A mobile and touch friendly input spinner component for Bootstrap 3 based on TouchSpin. It supports the mousewheel and the up/down keys.

Bootstrap Rating is a jQuery plugin that creates a rating control that uses Bootstrap glyphicons for rating symbols. Bootstrap Rating .

Just-add-water CSS animations with Animate CSS.

Rulesets for visually displaying the quality of passwords with Pwstrength.