JQuery « GGshow reloaded

September 10, 2012

jQuery Windows

Description:
jQuery Windows is a jQuery plugin to build web application platform in web based Windows interface.

License:

GNU GPL v3

Screenshot:

Requirements:

jquery library
jQuery UI
jQuery Windows plugin

Demo:

Demo 1 – Startup jQuery Windows
Demo 2 – Startup jQuery Windows with parameters
Demo 3 – jQuery Windows loaded into iframe
Demo 4 – Integrating jQuery Windows to existing webpage

Usage:

Include script and stylesheet

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/eggplant/jquery-ui.css" type="text/css" />
<script src="jquery.windows.min.js"></script>
<link rel="stylesheet" href="jquery.windows.css" type="text/css" />

startup Jquery Windows

$().windows();

or startup with parameters

$().windows({
    data : 'jquery.windows.json',
    config : {
        backgroundColor:'#000',
        backgroundImage:'wallpaper.jpg',
        backgroundOption:'fill',
        startupFullscreen:false,
        shutdownExitFullscreen:true,
        showFullscreenButton:true,
        showShutdownButton:true
    },
    startupHandler : startup,
    shutdownHandler : shutdown
});

Parameters:

data : path to the web application data file, default ‘jquery.windows.json’
config : jQuery Windows interface configurations
- backgroundColor : desktop background color, default ‘#000’
- backgroundImage : desktop background image path, default ”
- backgroundOption : available options [ ‘fill’ / ‘stretch’ / ‘fit’ / ’tile’ / ‘center’ ]
- startupFullscreen : start full screen mode when startup, default false.
- shutdownExitFullscreen : exit full screen mode when shutdown, default false.
- showFullscreenButton : display a full screen button on menu, default false.
- showShutdownButton : display a shutdown button on menu, default false.
startupHandler : event handler function when startup jQuery Windows
shutdownHandler : event handler function when shutdown jQuery Windows

Parameters are optional.
startup and/or shutdown function must be exist if startupHandler and/or shutdownHandler is defined.

Data Format:
Web applications and categories data for jQuery Windows stored in JSON data.
Example:

{
    "CATEGORY":[{
        "TITLE":"Category 1",
        "ITEM":[{
            "TITLE":"Application 1-1",
            "PATH":"app11.html"
        },{
            "TITLE":"Application 1-2",
            "PATH":"app12.html",
            "ICON":"gpl.png",
            "WIDTH":"400",
            "HEIGHT":"300",
            "RESIZABLE":"FALSE",
            "SCROLLING":"FALSE",
            "AUTOSTART":"FALSE"
        }]
    },{
        "TITLE":"Category 2",
        "ITEM":[{
            "TITLE":"Application 2-1",
            "PATH":"app21.html",
            "ICON":"app21.png"
        },{
            "TITLE":"Application 2-2",
            "PATH":"app22.html",
            "ICON":"app22.png"
        }]
    }]
}

Parameters are optional.
Detail parameters for separate application window please refer to data format in demo.
Full screen function & button is available only for web browsers which support JavaScript requestFullscreen method.

Download:

jquery.windows.js (20.7KB) – Main JavaScript file
jquery.windows.min.js (10.1KB) – Main JavaScript file (minified)
jquery.windows.css (1.2KB) – Main stylesheet
jquery.windows.json (2.1KB) – Sample data file
start.png (3.3KB) – Sample start button icon
default.png (0.6KB) – Sample default application icon

Comments (0)

Filed under: JavaScript,JQuery,JSON,Web — Tags: JQuery, operating system, Operating Systems, web application platform, web based, Windows — GG @ 2:48 am

August 17, 2012

jQuery – Periodic Table of Elements

Description:

JQuery plugin to display a Periodic Table of Elements.
Loads element detail from a JSON data file, includes element name, symbol, atomic number, atomic weight, oxidation states, boiling point, melting point, density & etc.
With click event handling.

License:

GNU GPL v3

Screenshot:

Demo:

Source:

<!DOCTYPE html>
<html>
    <head>
        <title>JQuery - Periodic Table of Elements - Element Selector</title>
        <link rel="stylesheet" type="text/css" href="jquery.pte.dark.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://jquery-pte.googlecode.com/files/jquery.pte.min.js"></script>
    </head>
    <body>
        <input type="text" id="element" name="element" readonly="readonly" onfocus="show_pte()" />
        <br>
        <label for="element">
            <span style="font-size:small;color:#AAA;">Click to select element.</span>
        </label>
        <br><br>
        <script>
            function select_element(element){
                $('.periodic_table').remove();
                $('#element').val(element.ATOMIC_NUMBER);
            }
            function show_pte() {
                $('<div>').addClass('periodic_table').appendTo('body').pte({
                    data : 'jquery.pte.lite.json',
                    config : {
                        x:$('#element').position().left,
                        y:$('#element').position().top,
                        tooltip:false,
                        closable:true,
                        size:24,
                        spacing:1
                    },
                    clickHandler : select_element
                });
            }
        </script>
    </body>
</html>

/*
* jquery.pte.dark.css
* v1.0
*/
.pte_table,.pte_element,.pte_detail {
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
    font-family: cursive;
    padding: 0;
}
.pte_table {
    box-shadow: 4px 4px 2px #666;
    border: #999 1px solid;
    background-color: #333;
}
.pte_element {
    border: #999 1px solid;
    background-color: #CCC;
}
.pte_element:hover {
    background-color: #FFF;
}
.pte_title {
    font-size: 1.0em;
    color: #AAA;
}
.pte_label {
    font-size: 0.6em;
    color: #AAA;
}
.pte_number {
    font-size: 0.5em;
    color: #333;
}
.pte_symbol {
    font-size: 0.6em;
    color: #333;
    text-align: center;
}
.pte_close {
    font-size: 0.8em;
    color: #999;
}
.pte_detail {
    background-color: #FFF;
    border: #CCC 1px solid;
    font-size: 0.7em;
    padding: 8px;
}
.pte_detail_label {
    float: left;
    clear: left;
    color: #333;
}
.pte_detail_value {
    float: left;
    clear: right;
    color: #666;
}

Parameters:

data – path to the JSON data file.
config – configuration.
- x : position x
- y : position y
- size : size of element boxes in pixel
- spacing : spacing between element boxes in pixel
- tooltip : display element detail in tooltip when mouse over an element
- closable : display a [x] and remove the pte when clicked
clickHandler – event handler when an element is clicked.

Download:

jquery.pte.js (8.0 KB) – Main JavaScript file
jquery.pte.min.js (3.3 KB) – Main JavaScript file (Minified)
jquery.pte.json (78.8KB) – Elements data file (Full version)
jquery.pte.lite.json (4.1 KB) – Elements data file (Lite version, contains only atomic number and symbol)

More examples: (view source to see the source code)

Comments (3)

Filed under: JavaScript,JQuery,JSON,Web — Tags: element, JQuery, periodic, plugin, table — GG @ 5:58 pm