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

jqcLayer

Table of Contents

This document matches version 1.6.0 .

The jqcLayer component is used to create layers on top of the main HTML page content. Layers are typically used to show (and later hide) messages, icons etc. For instance, a layer could be used to make tooltip popups.

A jqcLayer component's element will have the CSS property position: absolute set via the jqc-all.css core style sheet. The position() function will set the layer's left and top CSS properties to x and y respectively.

jqcLayer Example

Here is an example:

<input  id="myInput"   type="text">
<div id="myInputTooltip" jqc-type="jqcLayer">Enter text!</div>

<button id="myButton"  jqc-type="jqcButton">Click</button>

<span id="bootModule" jqc-module="bootModule"></span>
<span id="myModule"   jqc-module="myModule"></span>

<script>
    function bootModule() {
        var bootModule = {};

        bootModule.postConfigure = function() {

            jQuery("#myInput").mouseenter(function() {
                bootModule.jqc.pageController.components.myInputTooltip.show(); });
            jQuery("#myInput").mouseleave(function() {
                bootModule.jqc.pageController.components.myInputTooltip.hide(); });

        }

        return bootModule;
    }

    function myModule() {
        var module = {};

        return module;
    }
</script>  

This example shows a layer when the mouse enters (hovers over) the input field, and hides the layer when the mouse leaves the input field.

Functions

The jqcLayer component has the following functions:

FunctionDescription
show() Shows the layer
hide() Hides the layer
position(x, y) Positions the layer at x, y

Target Elements

You can associate a jqcLayer component with div elements. The div element must have the following CSS styles set on it:

position: absolute;

If you want your start out hidden, you should also add this CSS style:

display: none;

By default, HTML elements with jqc-type="jqcLayer" has both of the above CSS styles set on them (via the jqc-all.css stylesheet). If you need a different behaviour, override the CSS styles in your own stylesheet (add your own CSS classes) or by setting CSS styles directly on the layer HTML element.