UI

Download UI Module
Version 1.5

According to needs in FrameworkJS, we made the UI module. This provides us with some user interface tools like buttons and text boxes.

For example, you can use this module for the button like the below syntax:

app.ui.button(jTarget, effect, options);

Parameters Type Description
jTarget String This argument is referred to button that we want to have the custom UI on it. This is the jQuery path of the button.
effect String Optional. This defines the kind of effect, that we want to have on our buttons. The effect option is 'ripple'. If you don't like to have an effect, you can write 'null' for this option.
options Object This argument has several items that we should set in the module.

options: We will explain options completely in the below:

Parameters Type Description
key String Optional. When we have several buttons on a page, we set a key for each button to separate them from each other. So here, we mention this key is referred to which button.
html String Optional. By this attribute, we explain the HTML context. For example text of the button or images or icons that are used in the button.
color String Optional. When you used the effect for the button, by defining a custom color, you can have a hover color for the button.
classes String Optional. By this attribute, you can define a specific class for a group of buttons that take a common class.
disabled Boolean Optional. If you set this property true, the button should be disabled and will be unclickable.
onPush Function This defines the button's click event.
data Object Optional. The data is related to jQuery, and it can contain the object of button data.
hold Object Optional. This is an event, for when touch and hold the button.

Example

Here we have defined a button by some options.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>FrameworkJS</title>

        <link rel="stylesheet" type="text/css" href="lib/framework.css">

        <!-- add your modules styles here -->
        <!-- <link rel="stylesheet" type="text/css" href="modules/" /> -->
        <link rel="stylesheet" type="text/css" href="modules/ui/css/common.css" >

        <!-- add your page styles here -->
        <!-- <link rel="stylesheet" type="text/css" href="css/"> -->
        <link rel="stylesheet" type="text/css" href="css/home.css"> 
    </head>
    <body>
        <div class="page home"> 
            <h1>Hello world!</h1> 
            <div class="button" key="save"><div> 
            <div class="button" key="edit"><div> 
        </div>
    </body>
    <script src="lib/cloadio.min.js"></script>
    <script src="lib/jquery-2.2.0.min.js"></script>
    <script src="lib/framework-a.min.js"></script>
    <script src="lib/framework-b.min.js"></script>
    <script src="js/app.js"></script>

    <!-- add your module scripts here -->
    <!-- <script src="modules/"><script> -->
    <script src="modules/ui/js/script.js"></script>

    <!-- add your page scripts here -->
    <!-- <script src="js/"></script> -->
    <script src="js/home.js"></script>
</html>
app.ui.button($('.page.home'), 'ripple', {
    key: 'save',
    html: 'Save Button',
    color: '#747474',
    onPush: function (jButton) {
        jButton.html('Saved');
        homePage.show();
    }
});
app.ui.button($('.page.home'), 'ripple', {
    key: 'edit',
    html: 'Edit Button',
    color: '#747474',
    onPush: function (jButton) {
        jButton.html('Edited');
        homePage.show();
    }
});

Text Box

In the below, you can use the text box UI module:

app.ui.textBox(jTarget, options);

Parameters Type Description
jTarget String This argument is referred to div that we want to have the custom UI on it. This is the jQuery path of the text box.
options Object This argument has several items that we should set in the module.