GGshow reloaded 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:

Screenshot:
jQuery Windows

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:

  1. 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" />
  2. 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:

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:

Screenshot:
jQuery Windows
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:

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

  1. Basic
  2. Style
  3. Config – sizing
  4. Config – positioning
  5. Config – tooltip
  6. Click Handler
  7. Element detail
  8. Text input with element picker
Filed under: JavaScript,JQuery,JSON,Web — Tags: , , , , — GG @ 5:58 pm

© 2019 GGSHOW | Powered by WordPress