Tuesday, 5 April 2016

Bootstrap Plugins in XPages Part IV - Awesome Bootstrap Checkbox

The Font Awesome Bootstrap Checkboxes and Radios plugin is a pure CSS plugin to give checkboxes and radio button a nice Bootstrap look and feel. There is No Javascript and No AMD fix. Just one CSS. In this blog post a give some examples on how to use the Font Awesome Bootstap Checkboxes and Radios plugin in XPages. The plugin can be download from GitHub.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part II : Bootstrap FileStyle - Customization of input file for Bootstrap
Part III : Dialog Boxes using Bootbox
Part IV : Awesome Bootstrap Checkboxes and Radios

The only thing that needs to be added to the XPages / Custom Control is the CSS file √°wesome-bootstrap-checkbox.css' and a little adjustment to the Check Box to make it all work.

<link rel="stylesheet" href="checkbox/awesome-bootstrap-checkbox.css" type="text/css" />

Setup Check Box
Use checkbox-primary, checkbox-danger, radio-info, etc to style checkboxes and radios with brand bootstrap colors. checkbox-circle is for rounded checkboxes.

<div class="checkbox checkbox-circle">
<xp:checkBox id="checkBox2"></xp:checkBox>
<label for="checkBox2">
Checkbox Circle Default
</label>
</div>

Another possibility is to use 'disabled' and 'checked'. These are empty HTML5 attributes so we can use xp:attr (attributes) as shown in the example below.

<div class="checkbox checkbox-circle checkbox-danger">
<xp:checkBox id="checkBox11">
<xp:this.attrs>
<xp:attr name="checked" value="checked" minimized="true">
</xp:attr>
<xp:attr name="disabled" value="disabled" minimized="true">
</xp:attr>
</xp:this.attrs></xp:checkBox>
<label for="checkBox11">
Checkbox Disabled Checked
</label>
</div>

The final result is an Awesome Bootstrap Check Box in XPages.


Sample Code (GitHub)

The plugin works also for Radio Buttons.
For more information and examples : awesome-bootstrap-checkbox

No comments:

Post a Comment