Documentation

1 Getting Started
2 Design Overview
3 Page Controller Boot Process
4 Your First App
5 Page Controller
6 Modules
7 Components
8 jqcEmpty
9 jqcLabel
10 jqcButton
11 jqcLayer
12 jqcPanelDeck
13 jqcAccordion
14 jqcProgressBar
15 Data Binding & Remote Data Synchronization
16 jqcDataService
17 jqcDataModel
18 jqcViewModel
19 jqcList
20 jqcTable
21 jqcForm
22 jqcResponsiveLayoutManager
23 jqcTreeList
24 Demos

jqcLabel


This document matches version 1.6.0 .

The jqcLabel component is used as a handle to insert HTML (or text) into the HTML page.

jqcLabel Example

Here is an example of how you declare a jqcLabel:

<span id="myLabel" jqc-type="jqcLabel"></span>

You can call the jqcLabel functions after the jqcLabel has been instantiated by the page controller. For instance, inside a module boot phase function. Here is an example:

<span id="myLabel" jqc-type="jqcLabel"></span>    
    
<span jqc-module="myModule"></span>

<script>
function myModule() {
    var module = {};
    
    module.postConfigure = function() {
        var components = module.jqc.pageController.components;
        
        components.myLabel.html("New HTML for the <b>jqcLabel</b>");
    }
           
    
    return module;
}    
</script>

Styling Labels as Alerts

From version 1.1.0 you can use the jqcLabel component to style labels as alert boxes, notification boxes, message boxes etc. You can use the four functions ok(), info(), warning() and error() to set the HTML + corresponding CSS class of the HTML element (see function descriptions above). There is no default styling for these CSS classes, but you can add a styling yourself in your own CSS style sheets.

Functions

The jqcLabel contains the following functions:

FunctionDescription
html(htmlText) Sets the inner HTML of the associated HTML element. Equivalent to calling label.jqc.element.html() .
setHtml(htmlText) (Deprecated since v. 0.8.2) Sets the inner HTML of the associated HTML element. Equivalent to calling label.jqc.element.html() .
ok(htmlText) From v. 1.1.0. Sets the inner HTML of the associated HTML element. Also adds the CSS class jqcLabelOk on the HTML element, and removes the CSS classes jqcLabelInfo, jqcLabelWarning and jqcLabelError from the HTML element.
info(htmlText) From v. 1.1.0. Sets the inner HTML of the associated HTML element. Also adds the CSS class jqcLabelInfo on the HTML element, and removes the CSS classes jqcLabelOk, jqcLabelWarning and jqcLabelError from the HTML element.
warning(htmlText) From v. 1.1.0. Sets the inner HTML of the associated HTML element. Also adds the CSS class jqcLabelWarning on the HTML element, and removes the CSS classes jqcLabelOk, jqcLabelInfo and jqcLabelError from the HTML element.
error(htmlText) From v. 1.1.0. Sets the inner HTML of the associated HTML element. Also adds the CSS class jqcLabelError on the HTML element, and removes the CSS classes jqcLabelOk, jqcLabelInfo and jqcLabelWarning from the HTML element.

Target Elements

You can associate a jqcLabel component with any HTML element, but the most common elements would be span, div or p elements which are suited for containing a text message.