better-epi-forms-js

BetterXforms jQuery plugin

This plugin improves the look and feel for EPiServer xforms and adds support for iCheck jQuery plugin.

Features

• Works with Bootstrap 2.3.x and Bootstrap 3
• Adds support for iCheck jQuery plugin (all iCheck features are supported)

Getting Started

In order for the plugin to work you need to modify the output from xfoms. Remove all table markup and replace the TD elements with a DIV element.

The markup should look like this.

<div class="xform">
    <div class="form-group">
        <label for="epi_generated_label">Name</label>
      <input type="text" id="epi_generated_text_field_id" name="epi_generated_text_field_name" size="20" value="">
    </div>
</div>

• Include CSS bootstrap.betterxforms.css
• Include JS jquery.betterxforms.v1.0.js
• Add the code below after the dom is ready.

$('.xform').BetterXforms();

Bootstrap 3 will be used by default. If you want to use Bootstrap 2.3.x add the bsv option.

$('.xform').BetterXforms({
    bsv : 3
});

If you want enable iCheck you need to do the following.

• Include CSS bootstrap.icheck.css
• Include CSS iCheck/skins/square/blue.css (Or any other skin you like)
• Include JS jquery.icheck.min.js
• Add the code below after the dom is ready.

Notice that the checkboxClass and radioClass have to cohere with the iCheck skin you included. In this case it's the blue version of the square skin.

$('.xform').BetterXforms({
    bsv : 3,
    iCheck : {
        enabled : true,
        labelHover : true,
        checkboxClass : 'icheckbox_square-blue',
        radioClass : 'iradio_square-blue',
        cursor: true
    }
});

Dependencies

• jQuery (required)
• iCheck (optional)

Changelog

• v1.0 - Completely new release
• v0.2 – Some performance improvements
• v0.1 – Initial release