Aware Controls | JavaScript (ES5) Rating Demos

The Rating control is used give a user a rating scale in which to select a value from.

Basic Functionality

Demonstrates the basic functionality of the Rating control.

Default

Single Selection

Allow Reset

Readonly

Number of Items

Disabled

/* Default */
new ac.inputs.Rating({ value: 3.0 }, "#cntlDefault");

/* Single Selection */
new ac.inputs.Rating({ value: 3.0, enableSingleSelection: true }, "#cntlDefaultSingle");

/* Allow Reset */
new ac.inputs.Rating({ value: 3.0, allowReset: true }, "#cntlDefaultReset");

/* Readonly */
new ac.inputs.Rating({ value: 3.0, readOnly: true }, "#cntlDefaultReadonly");

/* Number of Items */
new ac.inputs.Rating({ value: 3.0, itemsCount: 7 }, "#cntlDefaultItems");

/* Disabled */
new ac.inputs.Rating({ value: 3.0, disabled: true }, "#cntlDefaultDisabled");

<div class="form-horizontal form-bordered">
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Default</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlDefault" />
        </div>
    </div>
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Single Selection</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlDefaultSingle" />
        </div>
    </div>
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Allow Reset</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlDefaultReset" />
        </div>
    </div>
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Readonly</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlDefaultReadonly" />
        </div>
    </div>
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Number of Items</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlDefaultItems" />
        </div>
    </div>
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Disabled</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlDefaultDisabled" />
        </div>
    </div>
</div>

Precision

Demonstrates the various precision levels of the Rating control.

Full

Half

Quarter

Exact

/* Full */
new ac.inputs.Rating({ value: 3.0 }, "#cntlPrecisionFull");

/* Half */
new ac.inputs.Rating({ value: 3.0, precision: "Half" }, "#cntlPrecisionHalf");

/* Quarter */
new ac.inputs.Rating({ value: 3.0, precision: "Quarter" }, "#cntlPrecisionQuarter");

/* Excat */
new ac.inputs.Rating({ value: 3.0, precision: "Exact" }, "#cntlPrecisionExact");

<div class="form-horizontal form-bordered">
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Full</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlPrecisionFull" />
        </div>
    </div>
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Half</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlPrecisionHalf" />
        </div>
    </div>
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Quarter</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlPrecisionQuarter" />
        </div>
    </div>
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Exact</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlPrecisionExact" />
        </div>
    </div>
</div>

Labels

Demonstrates the default behavior of the Rating control.

Label Right

Label Left

Label Top

Label Bottom

Label Template

/* Label Right */
new ac.inputs.Rating({ value: 3.0, showLabel: true }, "#cntlLabelRight");

/* Label Left */
new ac.inputs.Rating({ value: 3.0, showLabel: true, labelPosition: "Left" }, "#cntlLabelLeft");

/* Label Top */
new ac.inputs.Rating({ value: 3.0, showLabel: true, labelPosition: "Top" }, "#cntlLabelTop");

/* Label Bottom */
new ac.inputs.Rating({ value: 3.0, showLabel: true, labelPosition: "Bottom" }, "#cntlLabelBottom");

/* Label Template */
new ac.inputs.Rating({ value: 3.0, showLabel: true, labelTemplate: "<span>${value} out of 5</span>" }, "#cntlLabelTemplate");

<div class="form-horizontal form-bordered">
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Label Right</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlLabelRight" />
        </div>
    </div>
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Label Left</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlLabelLeft" />
        </div>
    </div>
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Label Top</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlLabelTop" />
        </div>
    </div>
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Label Bottom</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlLabelBottom" />
        </div>
    </div>
    <div class="form-group row">
        <label class="form-label col-form-label col-lg-4">Label Template</label>
        <div class="col-lg-8" style="text-align: center">
            <input id="cntlLabelTemplate" />
        </div>
    </div>
</div>

Tooltip

Demonstrates how the tooltip can be changed.

new ac.inputs.Rating(
    {
        value: 3.0,
        tooltipTemplate: "#tooltipTemplate"
    },
    "#cntlRating"
);

<input id="cntlRating" />

<script id="tooltipTemplate" type="text/x-jsrender">
    ${if(value == 1)}Poor
    ${else if(value == 2)}Bad
    ${else if(value == 3)}Okay
    ${else if(value == 4)}Good
    ${else}Great
    ${/if}
</script>