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

jqcButton


This document matches version 1.6.0 .

The jqcButton component (added in v. 1.4.0) enables you to turn an HTML element into a clickable button. Here are a few examples:

<button id="button1" jqc-type="jqcButton">Button 1</button>
    
<div id="button2" jqc-type="jqcButton">Button 2</div>
    
<a id="button3" jqc-type="jqcButton">Button 3</a>

These three examples all declare a button but using different HTML elements. As long as the HTML element is clickable it can be used as a button.

Adding Click Listeners

You can add click listeners to a jqcButton in two ways: Either declaratively or programmatically.

Here is an example that adds a click listener declaratively:

<button id="button1" jqc-type="jqcButton"
        jqc-click="bootModule.button1Click"
        >Click...</button>


<div id="outputDiv"  style="margin-top:30px;"></div>
<div id="outputDiv2" style="margin-top:30px;"></div>


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

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

        module.button1Click = function(event) {
            $("#outputDiv").html("You clicked button1");
        }

        return module;
    }
</script>    

Notice the jqc-click attribute inside the HTML element declaring the button. This attribute points to bootModule.button1Click meaning that the button1Click() function on bootModule should be called when the button is clicked.

Adding a click listener programmatically can be done like this:

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


<div id="outputDiv"  style="margin-top:30px;"></div>
<div id="outputDiv2" style="margin-top:30px;"></div>


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

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

        module.postConfigure = function() {
            var components = module.jqc.pageController.components;
            
            components.button1.click(function() {
                $("#outputDiv").html("You clicked button1");
            });
            
        }

        return module;
    }
</script>

This time the button has the click listener added from inside the bootModule's postConfigure() function.

Other Events

The jqcButton also supports a few other events than click. These other events are:

These events have both HTML attributes and event listener registration functions. See the attribute and function tables at the end of this text.

Here is an example which adds click, mouseenter and mouseleave functions on a jqcButton:

<button id="button1" jqc-type="jqcButton"
        jqc-click="bootModule.button1Click"
        jqc-mouseenter="bootModule.button1Enter"
        jqc-mouseleave="bootModule.button1Leave"
        >Click...</button>


<div id="outputDiv"  style="margin-top:30px;"></div>
<div id="outputDiv2" style="margin-top:30px;"></div>


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

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

        module.button1Click = function(event) {
            $("#outputDiv").html("You clicked button1");
        }

        module.button1Enter = function(event) {
            $("#outputDiv").html("Mouse entered button1");
        }

        module.button1Leave = function(event) {
            $("#outputDiv").html("Mouse left button1");
        }

        return module;
    }
</script>

Demos

These demos show how to use the jqcButton in your own apps. See more jqComponent demos on the demos page.

Demo Description Live Demo Source Version Required
jqcButton - declarative event listener registration. Live Demo Source 1.4.0+
jqcButton - programmatic event listener registration. Live Demo Source 1.4.0+

Attributes

The jqcButton has the following HTML attributes you can use inside the HTML element declaring the button:

AttributeDescription
jqc-click Specifies a JavaScript function to be called when the button is clicked. Can be either a global function or a function inside a module (e.g. onClick or bootModule.onClick).
jqc-mousedown Specifies a JavaScript function to be called when the mouse button is pressed down while the mouse pointer is on top of the button. Can be either a global function or a function inside a module (e.g. onMouseDown or bootModule.onMouseDown).
jqc-mouseup Specifies a JavaScript function to be called when the mouse button is released while the mouse pointer is on top of the button. Can be either a global function or a function inside a module (e.g. onMouseUp or bootModule.onMouseUp).
jqc-mouseenter Specifies a JavaScript function to be called when the mouse pointer enters the HTML element of the button. Can be either a global function or a function inside a module (e.g. onMouseEnter or bootModule.onMouseEnter).
jqc-mouseleave Specifies a JavaScript function to be called when the mouse pointer leaves the HTML element of the button. Can be either a global function or a function inside a module (e.g. onMouseLeave or bootModule.onMouseLeave).
jqc-mousemove Specifies a JavaScript function to be called when the mouse pointer moves over the HTML element of the button. Can be either a global function or a function inside a module (e.g. onMouseMove or bootModule.onMouseMove).

Functions

The jqcButton has the following functions you can use:

FunctionDescription
click(listenerFunction) Adds a click listener to the jqcButton instance.
mousedown(listenerFunction) Adds a mousedown listener to the jqcButton instance.
mouseup(listenerFunction) Adds a mouseup listener to the jqcButton instance.
mouseenter(listenerFunction) Adds a mouseenter listener to the jqcButton instance.
mouseleave(listenerFunction) Adds a mouseleave listener to the jqcButton instance.
mousemouse(listenerFunction) Adds a mousemove listener to the jqcButton instance.