AdminForms - Inputs

Plugin Name: AdminForms
Author: ChadCollins.com
License: Paid - Themeforest.net/license
Website: http://themeforest.net/admindesigns
Dependencies:
<link href="assets/admin-tools/admin-forms/css/admin-forms.css" rel="stylesheet" type="text/css">
Form widgets may require additional scripts. Widget requirements can be found in individual widget description.

Input Field

Use ChadCollins.com predefined form requires that all inputs and widgets are wrapped in a parent container with the class .admin-form. This parent container should also be independent and not added to an existing parent such as a row, panel, etc.

Copy 

<label class="field">
    <input type="text" name="from" id="from" class="gui-input" placeholder="Input no icon">
</label>

Input Icons

Add an inline icon by adding .prepend-icon .append-icon and an additional label containing the desired form icon markup.

Copy 

<label class="field prepend-icon">
    <input type="text" name="firstname" id="firstname" class="gui-input" placeholder="Input icon left">
    <label for="firstname" class="field-icon"><i class="fa fa-user"></i>
    </label>
</label>

<label class="field append-icon">
    <input type="text" name="firstname" id="firstname" class="gui-input" placeholder="Input icon right">
    <label for="firstname" class="field-icon"><i class="fa fa-user"></i>
    </label>
</label>

Multi Selects

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form.

Copy 

<label class="field select">
    <select id="selectID" name="selectID">
        <option value="">Select with single arrow</option>
        <option value="1">Option 1</option>
        <option value="2">Option</option>
    </select>
    <i class="arrow"></i>
</label>

<label class="field select">
    <select id="selectID2" name="selectID2">
        <option value="">Select with double arrows</option>
        <option value="1">Option 1</option>
        <option value="2">Option</option>
    </select>
    <i class="arrow double"></i>
</label>

Text Area

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form.

Copy 

<label class="field prepend-icon">
    <textarea class="gui-textarea" id="comment" name="comment" placeholder="Text area"></textarea>
    <label for="comment" class="field-icon"><i class="fa fa-comments"></i>
    </label>
    <span class="input-footer">
        <strong>Hint:</strong>Don't be negative or off topic! just be awesome...</span>
</label>

Input Tooltips

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form.

Copy 

<label class="field prepend-icon">
    <input type="text" name="tooltip2" id="tooltip2" class="gui-input" placeholder="Left">
     <b class="tooltip tip-left"><em> I am a left aligned tooltip!</em></b>
    <label for="tooltip2" class="field-icon"><i class="fa fa-flag"></i>
    </label>
</label>

<label class="field prepend-icon">
    <input type="text" name="tooltip5" id="tooltip5" class="gui-input" placeholder="Right">
    <b class="tooltip tip-right"><em> I am a right aligned tooltip!</em></b>
    <label for="tooltip5" class="field-icon"><i class="fa fa-flag"></i>
    </label>
</label>

<label class="field prepend-icon">
    <input type="text" name="tooltip4" id="tooltip4" class="gui-input" placeholder="Top Left">
     <b class="tooltip tip-left-top"><em> I am a top left aligned tooltip! Pretty useful huh.</em></b>
    <label for="tooltip4" class="field-icon"><i class="fa fa-flag"></i>
    </label>
</label>

<label class="field prepend-icon">
    <input type="text" name="tooltip1" id="tooltip1" class="gui-input" placeholder="Top Right">
     <b class="tooltip tip-right-top"><em> I am a top right aligned tooltip! Pretty useful huh.</em></b>
    <label for="tooltip1" class="field-icon"><i class="fa fa-flag"></i>
    </label>
</label>

<label class="field prepend-icon">
    <input type="text" name="tooltip3" id="tooltip3" class="gui-input" placeholder="Bottom Right">
     <b class="tooltip tip-right-bottom"><em> I am a bottom right aligned tooltip! Pretty useful huh.</em></b>
    <label for="tooltip3" class="field-icon"><i class="fa fa-flag"></i>
    </label>
</label>

<label class="field prepend-icon">
    <input type="text" name="tooltip6" id="tooltip6" class="gui-input" placeholder="Bottom Left">
    <b class="tooltip tip-left-bottom"><em> I am a bottom left aligned tooltip! Pretty useful huh.</em></b>
    <label for="tooltip6" class="field-icon"><i class="fa fa-flag"></i>
    </label>
</label>

File Uploader

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form.

Copy 

<label class="field prepend-icon append-button file">
    <span class="button btn-primary">Choose File</span>
    <input type="file" class="gui-file" name="file1" id="file1" onChange="document.getElementById('uploader1').value = this.value;">
    <input type="text" class="gui-input" id="uploader1" placeholder="Please Select A File">
    <label class="field-icon"><i class="fa fa-upload"></i>
    </label>
</label>

<label class="field prepend-icon file">
    <span class="button btn-primary">Choose File</span>
    <input type="file" class="gui-file" name="file2" id="file2" onChange="document.getElementById('uploader2').value = this.value;">
    <input type="text" class="gui-input" id="uploader2" placeholder="Please Select A File">
    <label class="field-icon"><i class="fa fa-upload"></i>
    </label>
</label>

Input Addon/Groups

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form.

Copy 

<div class="smart-widget sm-right smr-50">
    <label class="field">
        <input type="text" name="sub" id="sub" class="gui-input" placeholder="Smart widget right 50">
    </label>
    <button type="submit" class="button"> <i class="fa fa-search"></i>
    </button>
</div>
<div class="smart-widget sm-left sml-50">
    <label class="field">
        <input type="text" name="sm3" id="sm3" class="gui-input" placeholder="Smart widget left 50">
    </label>
    <label for="sm3" class="button"> <i class="fa fa-search"></i>
    </label>
</div>

Checkboxes

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form.

Copy 

<div class="option-group field">

    <label class="option">
        <input type="checkbox" name="checked" value="" checked>
        <span class="checkbox"></span>Checked
    </label>

    <label class="option">
        <input type="checkbox" name="empty" value="">
        <span class="checkbox"></span>Empty
    </label>

    <label class="option">
        <input type="checkbox" name="disabled" value="" disabled>
        <span class="checkbox"></span>Disabled
    </label>

</div>

Radios

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form.

Copy 

<div class="section mb15">
    <div class="option-group field">
        <label class="option">
            <input type="radio" name="checked" checked>
            <span class="radio"></span>Checked
        </label>
        <label class="option">
            <input type="radio" name="disabled" disabled>
            <span class="radio"></span>Disabled
        </label>
        <label class="option">
            <input type="radio" name="empty">
            <span class="radio"></span>Empty
        </label>
    </div>
</div>

Switches

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form.

Copy 

<div class="section mb15">
    <div class="option-group field">
        <label class="option">
            <input type="radio" name="checked" checked>
            <span class="radio"></span>Checked
        </label>
        <label class="option">
            <input type="radio" name="disabled" disabled>
            <span class="radio"></span>Disabled
        </label>
        <label class="option">
            <input type="radio" name="empty">
            <span class="radio"></span>Empty
        </label>
    </div>
</div>

Switches Round

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form.

Copy 

<div class="section mb15">
    <div class="option-group field">
        <label class="option">
            <input type="radio" name="checked" checked>
            <span class="radio"></span>Checked
        </label>
        <label class="option">
            <input type="radio" name="disabled" disabled>
            <span class="radio"></span>Disabled
        </label>
        <label class="option">
            <input type="radio" name="empty">
            <span class="radio"></span>Empty
        </label>
    </div>
</div>

Rating/Star Widget

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form.

Copy 

<span class="rating block" style="width: 110px;">
    <input class="rating-input" id="star5" type="radio" name="star">
    <label class="rating-star" for="star5"><i class="fa fa-star"></i></label>

    <input class="rating-input" id="star4" type="radio" name="star">
    <label class="rating-star" for="star4"><i class="fa fa-star"></i></label>

    <input class="rating-input" id="star3" type="radio" name="star" checked>
    <label class="rating-star" for="star3"><i class="fa fa-star"></i></label>

    <input class="rating-input" id="star2" type="radio" name="star">
    <label class="rating-star" for="star2"><i class="fa fa-star"></i></label>

    <input class="rating-input" id="star1" type="radio" name="star">
    <label class="rating-star" for="star1"><i class="fa fa-star"></i></label>
</span>

Admin Forms - Panels

Basic example

By default, all the .panel does is apply some basic border and padding to contain some content.

Basic panel example - Body content
Copy 

<div class="admin-form">
    <div class="panel">
        <div class="panel-body">
            Basic panel example - Body content
        </div>
    </div>
</div>

Panel with heading

Easily add a heading container to your panel with .panel-heading.

Panel Title
Body content
Copy 

<div class="admin-form">
    <div class="panel">
        <div class="panel-heading">
            <span class="panel-title">Panel Title</span>
        </div>
        <div class="panel-body">
           Body content
        </div>
    </div>
</div>

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel Title
Body content
Panel footer
Copy 

<div class="admin-form">
    <div class="panel">
        <div class="panel-heading">
            <span class="panel-title">Panel Title</span>
        </div>
        <div class="panel-body">
           Body content
        </div>
    <div class="panel-footer">Panel footer</div>
    </div>
</div>

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel Title
Body content
Copy 

<div class="admin-form">                                 
    <div class="panel panel-primary heading-border">
        <div class="panel-heading">
            <span class="panel-title">Panel Title</span>
        </div>
        <div class="panel-body">...</div>
    </div>
</div>

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Primary
Success
Info
Warning
Danger
Alert
System
Dark
Copy 

<div class="panel panel-primary heading-border">...</div>
<div class="panel panel-success heading-border">...</div>
<div class="panel panel-info heading-border">...</div>
<div class="panel panel-warning heading-border">...</div>
<div class="panel panel-danger heading-border">...</div>
<div class="panel panel-alert heading-border">...</div>
<div class="panel panel-system heading-border">...</div>
<div class="panel panel-dark heading-border">...</div>

AdminForm Layout Templates

Form Layouts

By default, all the .panel does is apply some basic border and padding to contain some content.


Comment 1

Comment 2

Contact 1

Contact 2

Contact 3

Login 1

Login 2

Register 1

Register 2

Order 1

Order 2

Order 3

Feedback 1

Project Quote 2

Survey 3

ChadCollins.com Forms - Timepicker

Basic Timepicker

<script src="../../assets/admin-tools/admin-forms/js/jquery-ui-datepicker.min.js"></script>
Copy 

<div class="admin-form theme-primary">
    <label for="timepicker-basic" class="field prepend-icon">
        <input type="text" id="timepicker-basic" name="timepicker-basic" class="gui-input" placeholder="timepicker Popup">
        <label class="field-icon"><i class="fa fa-calendar-o"></i>
        </label>
    </label>
</div>
Copy 

// Timepicker Basic
$('#timepicker-basic').timepicker({
    beforeShow: function(input, inst) {
        var themeClass = $(this).parents('.admin-form').attr('class');
        var smartpikr = inst.dpDiv.parent();
        if (!smartpikr.hasClass(themeClass)) {
            inst.dpDiv.wrap('<div class="' + themeClass + '"></div>');
        }
    }
});

Timepicker Addon

Copy 

<div class="admin-form theme-primary">
    <label for="timepicker-addon" class="field prepend-picker-icon">
        <input type="text" id="timepicker-addon" name="timepicker-addon" class="gui-input" placeholder="timepicker Addon">
    </label>
</div>
Copy 

// Timepicker Addon
$('#timepicker-addon').timepicker({
    showOn: 'both',
    buttonText: '<i class="fa fa-clock-o"></i>',
    beforeShow: function(input, inst) {
        var themeClass = $(this).parents('.admin-form').attr('class');
        var smartpikr = inst.dpDiv.parent();
        if (!smartpikr.hasClass(themeClass)) {
            inst.dpDiv.wrap('<div class="' + themeClass + '"></div>');
        }
    }
});

Inline Timepicker

Copy 

<div class="admin-form theme-primary">
    <div id="timepicker-inline"></div>
</div>
Copy 

// Timepicker Inline
$('#timepicker-inline').timepicker();

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://trentrichardson.com/examples/timepicker/#tp-options
Advanced Examples: http://trentrichardson.com/examples/timepicker/#tp-examples

ChadCollins.com Forms - Datepicker

Basic Datepicker

<script src="assets/admin-tools/admin-forms/js/jquery-ui-datepicker.min.js"></script>
Copy 

<div class="admin-form theme-primary">
    <label for="datepicker-basic" class="field prepend-icon">
        <input type="text" id="datepicker-basic" name="datepicker-basic" class="gui-input" placeholder="Datepicker Popup">
        <label class="field-icon"><i class="fa fa-calendar-o"></i>
        </label>
    </label>
</div>
Copy 

$("#datepicker-basic").datepicker({
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
    showButtonPanel: false,
    beforeShow: function(input, inst) {
        var themeClass = $(this).parents('.admin-form').attr('class');
        var smartpikr = inst.dpDiv.parent();
        if (!smartpikr.hasClass(themeClass)) {
            inst.dpDiv.wrap('<div class="' + themeClass + '"></div>');
        }
    }
});

Datepicker Addon

<script src="assets/admin-tools/admin-forms/js/jquery-ui-datepicker.min.js"></script>
Copy 

<div class="admin-form theme-primary">
    <label for="datepicker-addon" class="field prepend-picker-icon">
        <input type="text" id="datepicker-addon" name="datepicker-addon" class="gui-input" placeholder="Datepicker Addon">
    </label>
</div>
Copy 

$('#datepicker-addon').datepicker({
    numberOfMonths: 3,
    showOn: 'both',
    buttonText: '<i class="fa fa-calendar-o"></i>',
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
    beforeShow: function(input, inst) {
        var themeClass = $(this).parents('.admin-form').attr('class');
        var smartpikr = inst.dpDiv.parent();
        if (!smartpikr.hasClass(themeClass)) {
            inst.dpDiv.wrap('<div class="' + themeClass + '"></div>');
        }
    }
});

Inline Datepicker

<script src="assets/admin-tools/admin-forms/js/jquery-ui-datepicker.min.js"></script>
Copy 

<div class="admin-form theme-primary">
    <div id="datepicker-inline"></div>
</div>
Copy 

$("#datepicker-inline").datepicker({
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
});

Datepicker Range

<script src="assets/admin-tools/admin-forms/js/jquery-ui-datepicker.min.js"></script>
Copy 

<div class="row">

  <!-- DateRange From Input --> 
  <div class="col-md-6">
    <div class="admin-form theme-primary">
        <label for="datepicker-from" class="field prepend-icon">
            <input type="text" id="datepicker-from" name="datepicker-from" class="gui-input" placeholder="Datepicker From">
            <label class="field-icon"><i class="fa fa-calendar-o"></i></label>
        </label>
    </div>
  </div>

  <!-- DateRange To Input --> 
  <div class="col-md-6">
    <div class="admin-form theme-primary">
        <label for="datepicker-to" class="field prepend-icon">
            <input type="text" id="datepicker-to" name="datepicker-to" class="gui-input" placeholder="Datepicker To">
            <label class="field-icon"><i class="fa fa-calendar-o"></i></label>
        </label>
    </div>
  </div>
  
</div>
Copy 

// Datepicker Range From
$("#datepicker-from").datepicker({
  defaultDate: "+1w",
  numberOfMonths: 3,
  prevText: '<i class="fa fa-chevron-left"></i>',
  nextText: '<i class="fa fa-chevron-right"></i>',
  beforeShow: function(input, inst) {
    var themeClass = $(this).parents('.admin-form').attr('class');
    var smartpikr = inst.dpDiv.parent();
    if (!smartpikr.hasClass(themeClass)) {
        inst.dpDiv.wrap('<div class="' + themeClass + '"></div>');
    }
  },
  onClose: function( selectedDate ) {
    $("#datepicker-to").datepicker( "option", "minDate", selectedDate );
  }
});

// Datepicker Range To
$("#datepicker-to").datepicker({
  defaultDate: "+1w",
  numberOfMonths: 3,
  prevText: '<i class="fa fa-chevron-left"></i>',
  nextText: '<i class="fa fa-chevron-right"></i>',
  beforeShow: function(input, inst) {
    var themeClass = $(this).parents('.admin-form').attr('class');
    var smartpikr = inst.dpDiv.parent();
    if (!smartpikr.hasClass(themeClass)) {
        inst.dpDiv.wrap('<div class="' + themeClass + '"></div>');
    }
  },
  onClose: function( selectedDate ) {
    $("#datepicker-from").datepicker( "option", "maxDate", selectedDate );
  }
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://jqueryui.com/datepicker/
Advanced Examples: http://api.jqueryui.com/datepicker/

ChadCollins.com Forms - DateTimepicker

Basic DateTimepicker

<script src="../../assets/admin-tools/admin-forms/js/jquery-ui-datepicker.min.js"></script>
Copy 

<div class="admin-form theme-primary">
    <label for="datetimepicker-basic" class="field prepend-icon">
        <input type="text" id="datetimepicker-basic" name="datetimepicker-basic" class="gui-input" placeholder="Basic">
        <label class="field-icon"><i class="fa fa-calendar-o"></i>
        </label>
    </label>
</div>
Copy 

// DateTimepicker Basic
$('#datetimepicker-basic').datetimepicker({
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
    beforeShow: function(input, inst) {
        var themeClass = $(this).parents('.admin-form').attr('class');
        var smartpikr = inst.dpDiv.parent();
        if (!smartpikr.hasClass(themeClass)) {
            inst.dpDiv.wrap('<div class="' + themeClass + '"></div>');
        }
    }
});

DateTimepicker Addon

Copy 

<div class="admin-form theme-primary">
    <label for="datetimepicker-addon" class="field prepend-picker-icon">
        <input type="text" id="datetimepicker-addon" name="datetimepicker-addon" class="gui-input" placeholder="Addon">
    </label>
</div>
Copy 

// DateTimepicker Addon
$('#datetimepicker-addon').datetimepicker({
    showOn: 'both',
    buttonText: '<i class="fa fa-calendar-o"></i>',
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
    beforeShow: function(input, inst) {
        var themeClass = $(this).parents('.admin-form').attr('class');
        var smartpikr = inst.dpDiv.parent();
        if (!smartpikr.hasClass(themeClass)) {
            inst.dpDiv.wrap('<div class="' + themeClass + '"></div>');
        }
    }
});

Inline DateTimepicker

Copy 

<div class="admin-form theme-primary">
    <div id="datetimepicker-inline"></div>
</div>
Copy 

// DateTimepicker Inline
$('#datetimepicker-inline').datetimepicker({
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://jqueryui.com/datepicker/
Advanced Examples: http://api.jqueryui.com/datepicker/

ChadCollins.com Forms - Monthpicker

Basic Monthpicker

<script src="../../assets/admin-tools/admin-forms/js/jquery-ui-monthpicker.min.js"></script>
Copy 

<div class="admin-form theme-primary">
    <label for="monthpicker-basic" class="field prepend-icon">
        <input type="text" id="monthpicker-basic" name="monthpicker-basic" class="gui-input" placeholder="monthpicker Popup">
        <label class="field-icon"><i class="fa fa-calendar-o"></i>
        </label>
    </label>
</div>
Copy 

// Monthpicker Basic
$("#monthpicker-basic").monthpicker({
    changeYear: false,
    stepYears: 1,
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
    showButtonPanel: true,
    beforeShow: function(input, inst) {
        var themeClass = $(this).parents('.admin-form').attr('class');
        var smartpikr = inst.dpDiv.parent();
        if (!smartpikr.hasClass(themeClass)) {
            inst.dpDiv.wrap('<div class="' + themeClass + '"></div>');
        }
    }
});

Monthpicker Addon

Copy 

<div class="admin-form theme-primary">
    <label for="monthpicker-addon" class="field prepend-picker-icon">
        <input type="text" id="monthpicker-addon" name="monthpicker-addon" class="gui-input" placeholder="monthpicker Addon">
    </label>
</div>
Copy 

// Monthpicker Addon
$("#monthpicker-addon").monthpicker({
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
    showOn: 'both',
    buttonText: '<i class="fa fa-calendar-o"></i>',
    showButtonPanel: true,
    beforeShow: function(input, inst) {
        var themeClass = $(this).parents('.admin-form').attr('class');
        var smartpikr = inst.dpDiv.parent();
        if (!smartpikr.hasClass(themeClass)) {
            inst.dpDiv.wrap('<div class="' + themeClass + '"></div>');
        }
    }
});

Inline Monthpicker

Copy 

<div class="admin-form theme-primary">
    <div id="monthpicker-inline"></div>
</div>
Copy 

// Monthpicker Inline
$('#monthpicker-inline').monthpicker({
    prevText: '',
    nextText: '',
    showButtonPanel: true
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://api.jqueryui.com/datepicker/
Advanced Examples: https://github.com/thecodingmachine/jquery.tcm.monthpicker

ChadCollins.com Forms - Colorpicker

Basic Colorpicker

<script src="../../assets/admin-tools/admin-forms/js/jquery.spectrum.min.js"></script>
Copy 

<div class="admin-form theme-primary posr">
    <label class="field sfcolor" for="colorpicker-basic">
        <input type="text" name="colorpicker-basic" id="colorpicker-basic" class="gui-input" placeholder="Basic Picker">
    </label>
</div>
Copy 

// Colorpicker Basic
var cpBasic = $("#colorpicker-basic");
cpBasic.spectrum({
    color: '#4a89dc', // set default color
    appendTo: cpBasic.parents('.admin-form'), // append popup to parent container
    containerClassName: 'sp-left' // add helper class to align popup left of addon
});
cpBasic.show();

Advanced Colorpicker

Copy 

<div class="admin-form theme-primary posr">
    <label class="field sfcolor" for="colorpicker-advanced">
        <input type="text" name="colorpicker-advanced" id="colorpicker-advanced" class="gui-input" placeholder="Advanced">
    </label>
</div>
Copy 

// Colorpicker Advanced
var cpAdvanced = $("#colorpicker-advanced");
cpAdvanced.spectrum({
    color: '#4a89dc', // set default color
    appendTo: cpAdvanced.parents('.admin-form'), // append popup to parent container
    containerClassName: 'sp-left', // add helper class to align popup left of addon
    showInput: true,
    showPalette: true, // show advanced color pallete
    palette: [ // set displayed pallete colors
        [bgPrimary, bgSuccess, bgInfo],
        [bgWarning, bgDanger, bgAlert],
        [bgSystem, bgDark, bgBlack]
    ]
});
cpAdvanced.show();

Inline Colorpicker

Copy 

<div class="admin-form theme-primary posr center-block" style="max-width: 320px;">
    <!-- inline-cp class required -->
    <div id="colorpicker-inline" class="inline-cp"></div>
</div>
Copy 

// Colorpicker Inline
var cpInline = $(".inline-cp");
cpInline.spectrum({
    color: '#4a89dc', // set default color
    showInput: true, // show advanced color input
    showPalette: true, // show advanced color pallete
    chooseText: "Select Color", // set text
    flat: true, 
    palette: [ // set displayed pallete colors
        [bgPrimary, bgSuccess, bgInfo, bgWarning,
            bgDanger, bgAlert, bgSystem, bgDark,
            bgSystem, bgDark, bgBlack
        ]
    ]
});
cpInline.show();

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://bgrins.github.io/spectrum/
Advanced Examples: http://bgrins.github.io/spectrum/#modes

ChadCollins.com Forms - Sliders

Single Slider

Copy 

<div class="admin-form">
    <div class="slider-wrapper slider-primary">
        <div id="slider-single"></div>
    </div>
</div>
Copy 

// Slider Single
$("#slider-single").slider({
    range: "min",
    min: 0,
    max: 100,
    value: 30,
});

Double Slider

Copy 

<div class="admin-form">
    <div class="slider-wrapper slider-primary">
        <div id="slider-double"></div>
    </div>
</div>
Copy 

// Slider Double
$("#slider-double").slider({
    range: true,
    values: [27, 63]
});

Slider with Counter

Copy 

<div class="admin-form">
    <input type="text" id="amount" class="slider-countbox mb5" readonly="" value="$30">
    <div class="slider-wrapper slider-primary">
        <div id="slider-count"></div>
    </div>
</div>
Copy 

// Slider with Counter
$("#slider-count").slider({
    range: "min",
    min: 0,
    max: 100,
    value: 40,
    slide: function( event, ui ) {
       $( "#amount" ).val( "$" + ui.value );
    }
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://api.jqueryui.com/slider/
Advanced Examples: http://jqueryui.com/slider/
Return to Top