type: widget

release: 0.0

priority: very low

status: in planning

documentation: N/A

demo: http://jquery-ui.googlecode.com/svn/branches/dev/overlay/demos/overlay/index.html

 

 

---

 

1 - Description:

 

Description of usage and  purpose needs to be written here.

 

---

 

2 - Visual Design:

 

 

Image shows a targeted element with applied overlay containing a message.

 

---

 

 

3 - Functional Specifications/Requirements:

 

Getters: (none)

 

Defaults:

• show: true
• showMessage: false
• disableScrolling: false
• hideOnEsc: false
• hideOnClick: false
• zIndex: 1000
• icon: false
• text: ''

 

Usage:

 

Displaying a simple overlay;

$('#element').overlay();

 

Displaying an overlay with a message;

$('#element').overlay({showMessage: true, icon: true, text: 'Hey! Sample overlay plugin message.'});

 

The following statements will target document.body;

$(window).overlay({disableScrolling: true});

$(document).overlay();

$(document.body).overlay();

 

Disable scrolling when the overlay is visible;

$(document.body).overlay({disableScrolling: true});

 

Disable scrolling when the overlay is visible, and hide the overlay onclick;

$(document.body).overlay({disableScrolling: true, hideOnClick: true});

 

Disable scrolling when the overlay is visible, and hide the overlay when the ESCAPE key is pressed;

$(document.body).overlay({disableScrolling: true, hideOnEsc: true});

 

Options:

• show: If true, will show the overlay after init. If false, will require calling ('show') to show the overlay.
• showMessage: If true, will render the message portion of the overlay.
• disableScrolling: If true, will disable scrolling on the targeted element.
• hideOnEsc: If true, will hide the overlay when the ESCAPE key is pressed. (Currently only functions properly when document.body is targeted)
• hideOnClick: If true, will hide the overlay when any part of the overlay is clicked by the mouse.
• zIndex: The starting zIndex for the overlay.
• icon: If true and showMessage is true, will display the icon element within the overlay message.
• text: If note an empty string (and not null), will display the specified text within the overlay message.

 

---

 

4 - Markup & Style:

 

     4.1 Initial markup examples

 

Simple overlay with no message:

<div class="ui-widget ui-overlay" style="z-index: 1000; position: absolute; width: 420px; height: 100px; top: 242px; left: 22px;">

    <div class="ui-widget-overlay ui-overlay-back" style="width: 420px; height: 100px;"/>

</div>

 

Overlay with message:

<div class="ui-widget ui-overlay" style="z-index: 1000; position: absolute; width: 420px; height: 100px; top: 417px; left: 22px;">

    <div class="ui-widget-overlay ui-overlay-back" style="width: 420px; height: 100px;"/>

    <div class="ui-overlay-fore" style="width: 420px; height: 100px;">

        <div class="ui-state-highlight ui-corner-all ui-overlay-fore-content" style="margin-top: 35px; margin-left: 77px;">

            <div class="ui-icon ui-icon-info ui-overlay-fore-icon"/>

            <div class="ui-overlay-fore-text">Hey! Sample overlay plugin message.</div>

        </div>

    </div>

</div>

 

Inline styles are calculated and set dynamically by the widget at runtime.

 

 

     4.2 Recommended transformed HTML markup

 

Same as 4.1.

 

     4.3 Accessibility recommendation

 

 

Accessibility recommendations needed.

 

 

     4.4 CSS & Theme

 

     Initial CSS as used by the demo (needs tuning):

    <style type="text/css">

        html, body { margin: 0; }

        .margin { width: 400px; height: 80px; margin: 10px; border: 10px solid #cccc33; background: #fff; }

        .float-margin { width: 400px; height: 80px; float: left; margin: 10px; border: 10px solid #cccc33; background: #fff; }

 

        /* Theme CSS */

        .ui-overlay-back { position: absolute; }

        .ui-overlay-fore { position: absolute; }

        .ui-overlay-fore .ui-overlay-fore-content { padding: 6px 14px; overflow: auto; float: left;  }

        .ui-overlay-fore .ui-overlay-fore-content .ui-overlay-fore-icon { float: left; margin-right: 0.3em; }

        .ui-overlay-fore .ui-overlay-fore-content .ui-overlay-fore-text { float: left; margin-top: 1px; }

    </style>

 

---

 

5 - Latest version of plugin:

 

Development Branch - http://jquery-ui.googlecode.com/svn/branches/dev/overlay

Plugin Source - http://jquery-ui.googlecode.com/svn/branches/dev/overlay/ui/ui.overlay.js

 

---

 

6 - Open issues being discussed

 

This plugin is currently being planned and in early stages of development.

 

---