Hubtel Theme Documentation

Form Elements

Checkbox controls

Get rid of native look n' feel with our very own custom checkboxes written purely in CSS. These are retina compatible and available in all Bootstrap's contextual classes (ex: .check-primary)

example :

Mark

<div class="checkbox check-primary">
    <input type="checkbox" checked="checked" value="1" id="checkbox3">
    <label for="checkbox3">Mark</label>
</div>

Shape options

Bored with traditional boxed shape check boxes? Here is a circle one simply add the class .checkbox-circle to change it

example :

Mark

<div class="checkbox check-primary checkbox-circle">
    <input type="checkbox" checked="checked" value="1" id="checkbox9">
    <label for="checkbox9">Mark</label>
</div>

Radio buttons

Do not delete the label element which is placed next to each radio. Leave it blank if you don't want it to hold any text

example :

High Low

<div class="radio radio-primary">
    <input type="radio" checked="checked" value="yes" name="radio3" id="radio3Yes">
    <label for="radio3Yes">High</label>
    <input type="radio" value="no" name="radio3" id="radio3No">
    <label for="radio3No">Low</label>
</div>

</div>

Slide toggles

jQuery users

These are powered by Switchery jQuery plugin. Follow these steps to initialize a sliding toggle in your page

Please refer to Switchery Documentation to learn about plugin options

Step one

Include the stylesheet switchery.min.css inside the <head>. Please view Stylesheet inclusion guideline rules

<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/switchery/css/switchery.min.css">

Step two

Include the required javascript files inside the <body> before core template script inclusions. Please view jQuery plugin inclusion guideline rules

<script type="text/javascript" src="assets/plugins/switchery/js/switchery.min.js"></script>

Step three

Create an ordinary checkbox control with a unique classname

<input type="checkbox" class="switchery" checked />
<input type="checkbox" class="switchery" />

Step four

Apply the plugin to your desired element

When initializing the plugin, it is recommended that you only use the hex codes of Pages contextual colors to maintain consistency.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery'));
// Success color: #10CFBD
elems.forEach(function(html) {
  var switchery = new Switchery(html, {color: '#10CFBD'});
});
</script>

Typhead

These are also know as auto-fill input boxes that fills up while you type. This is powered by Bootstrap typhead, you can view there official documentation here

jQuery users

Step One

Include the required javascript files inside the <body> before core template script inclusions, if they are not there already. Please view jQuery plugin inclusion guideline rules

<script src="assets/plugins/bootstrap-typehead/typeahead.bundle.min.js"></script>
<script src="assets/plugins/bootstrap-typehead/typeahead.jquery.min.js"></script>

Step Two

Create a simple textbox field and give it an ID so you can initialize in your JS file

<div class="form-group">
<input class="typeahead form-control" id="mytyphead" type="text" placeholder="States of USA">
</div>

<form class="" role="form">
<div class="form-group form-group-default required typehead" id="sample-three">
<label>Countries</label>
<input class="typeahead form-control" id="mytyphead" type="text" placeholder="States of USA">
</div>
</form>

Step Three

Initialize your typehead with the ID you use

        var countries = new Bloodhound({
          datumTokenizer: Bloodhound.tokenizers.whitespace,
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          prefetch: 'http://revox.io/json/countries-list.json'
        });

        // passing in `null` for the `options` arguments will result in the default
        // options being used
        $('#mytyphead').typeahead(null, {
          name: 'countries',
          source: countries
        });

Datepicker

jQuery users

Datepicker controls in Pages are powered by Bootstrap Datepicker plugin.

Please refer to Bootstrap Datepicker Documentation to learn about plugin options

Step one

Include the stylesheet datepicker3.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules

<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-datepicker/css/datepicker3.css">

Step two

Include the relevant javascript files inside the <body> before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules

<script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js">

Step three

Add the markup

<div id="myDatepicker" class="input-group date">
    <input type="text" class="form-control">
    <span class="input-group-addon"><i class="fa fa-calendar"></i>
    </span>
</div>

Step four

Apply the plugin.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
$(document).ready(function() {
    $('#myDatepicker').datepicker();
});
</script>

AngularJS users

Step One

Include the datepicker ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more

Step two

Use the same markup as mentioned below, but apply the plugin using ui-jq directive provided by Ui.utils. ex:

<div class="input-group date col-sm-8" ui-jq="datepicker">
    <input type="text" class="form-control"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>

Masked inputs

jQuery users

Allows the user to enter fixed width input while conforming to a character format. Powered by jQuery Masked Input plugin.

Please refer to jQuery Masked Input Documentation to learn about plugin options

Step one

Include the javascript file inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules

<script src="assets/plugins/jquery-inputmask/jquery.inputmask.min.js" type="text/javascript">

Step two

Add the markup.

<input type="text" id="phone" class="form-control">

Step three

Apply the plugin.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
$(document).ready(function() {
    $("#phone").mask("(999) 999-9999");
});
</script>

AngularJS users

Step One

Include the inputMask ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more

Step two

Use the same markup as mentioned below, but apply the plugin using ui-jq directive provided by Ui.utils. You can pass additional options to ui-options attribute ex:

 <input type="text" id="date" class="form-control" ui-jq="mask" ui-options="'99/99/9999'">

Autonumeric inputs

jQuery users

autoNumeric is a jQuery plugin that automatically formats currency and numbers as you type on form inputs.

Please refer to jQuery autoNumeric Documentation to learn about plugin options

Step one

Include the javascript file inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules

<script src="assets/plugins/jquery-autonumeric/autoNumeric.js" type="text/javascript">

Step two

Add the markup.

<input type="text" data-a-dec="." data-a-sep="," class="autonumeric form-control">

Step three

Apply the plugin.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
$(document).ready(function() {
    $('.autonumeric').autoNumeric('init');
});
</script>

AngularJS users

Step One

Include the autonumeric ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more

Step two

Use the same markup as mentioned below, but apply the plugin using ui-jq directive provided by Ui.utils. You can pass additional options to ui-options attribute ex:

 <input type="text" data-a-dec="." data-a-sep="," class="autonumeric form-control" ui-jq="autoNumeric" ui-options="'init'">

WYSIWYG Editors

jQuery users

Give your users a rich text editing experience with these simple and fully-fledged WYSIWYG editors

Bootstrap wysihtml5

Please refer to Bootstrap wysihtml5 Documentation to learn about plugin options

Step one

Include the stylesheet bootstrap3-wysihtml5.min.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules

<link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap3-wysihtml5/bootstrap3-wysihtml5.min.css">

Step two

Include the javascript file inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules

<script src="assets/plugins/bootstrap3-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>

Step three

Add the markup.

<textarea id="wysiwyg5" class="wysiwyg" placeholder="Enter text ..." style="height:250px"></textarea>

Step three

Apply the plugin.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
$(document).ready(function() {
    $('#wysiwyg5').wysihtml5();
});
</script>

AngularJS users

Step One

Include the wysihtml5 ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more

Step two

Apply the plugin using ui-jq directive and pass options to ui-options

<div class="wysiwyg5-wrapper b-a b-grey">
    <textarea id="wysiwyg5" class="wysiwyg demo-form-wysiwyg" placeholder="Enter text ..." ui-jq="wysihtml5" ui-options="{
    html: true,
    stylesheets: ['pages/css/editor.css']
}"></textarea>
</div>

Summernote

jQuery users

Please refer to Summernote Documentation to learn about plugin options

Step one

Include the stylesheet summernote.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules

<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/summernote/css/summernote.css">

Step two

Include the javascript file inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules

<script type="text/javascript" src="assets/plugins/summernote/js/summernote.min.js"></script>

Step three

Add the markup.

<div id="summernote">Hello Summernote</div>

Step four

Apply the plugin.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
$(document).ready(function() {
   $('#summernote').summernote();
});
</script>

AngularJS users

Step One

Include the summernote ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more

Step two

Define options for plugin in your scope. Also make sure that you include summernote as a module dependency

...
$scope.summernote_options = {
    height: 200
}
...

Step two

Then finally add your markup

<div class="summernote-wrapper">
    <div id="summernote" config="summernote_options" summernote>Hello Summernote</div>
</div>

Tag inputs

jQuery users

jQuery tags input plugin is based on Twitter Bootstrap.

Please refer to jQuery tags input Documentation to learn about plugin options

Step one

Include the stylesheet bootstrap-tagsinput.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules

<link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-tag/bootstrap-tagsinput.css">

Step two

Include the javascript file inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules

<script src="assets/plugins/bootstrap-tag/bootstrap-tagsinput.min.js" type="text/javascript"></script>

Step two

Add the markup.

<input id="#tagsinput" type="text" value="Amsterdam,Washington" data-role="tagsinput" />

Step three

Apply the plugin.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
$(document).ready(function() {
    $('#tagsinput').tagsinput({
        typeahead: {
            source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
        }
    });
});
</script>

AngularJS users

Step One

Include the tagsInput ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more

Step two

Use the same markup as mentioned above, but apply the plugin using ui-jq directive provided by Ui.utils. ex:

<input class="tagsinput custom-tag-input" type="text" value="Amsterdam,Washington" ui-jq="tagsinput" />

Drag n' Drop

jQuery users

DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.

Please refer to DropzoneJS Documentation to learn about plugin options

Step one

Include the stylesheet dropzone.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules

<link type="text/css" rel="stylesheet" href="assets/plugins/dropzone/css/dropzone.css">

Step two

Include the javascript file inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules

<script src="assets/plugins/dropzone/dropzone.min.js" type="text/javascript"></script>

Step three

Add .dropzone to initialize dropzone plugin with default options.

example :

<form action="/file-upload" class="dropzone">
    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</form>

AngularJS users

Step One

Include the dropzone ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more

Step One

Add ngDropzone module dependency to your app, and expose dropzone config in scope

$scope.dropzoneConfig = {
        parallelUploads: 3,
        maxFileSize: 30,
        url: 'path/to/api'
    };

Step three

Use the markup below. Pass the options you exposed in the earlier step

<form class="dropzone" method="post" enctype="multipart/form-data" ng-dropzone dropzone="dropzone" dropzone-config="dropzoneConfig">
    <input name="file" type="file" multiple />
</form>

For native Bootstrap form controls Bootstrap Documentation