DisableUI

Page history last edited by Todd Parker 8 mos ago

 

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.

 

 

 

 

 

Comments (1)

profile picture

sompylasar said

at 8:49 am on May 28, 2009

Consider having some events triggered on the element (e.g. overlay-shown, overlay-hidden). Currently I see no way of knowing when a user hideOnClick'ed or hideOnESC'ed my overlay except setting my own handler to catch that.

Also have a look at blockUI plugin ( http://malsup.com/jquery/block/#demos ) that allows effects to be configured on showing and hiding the overlay. With non-immediate change of the overlay the events would be extremely useful. Bind/trigger event model seems to me much more preferred to callbacks, though callbacks might back it up.

Thanks.

You don't have permission to comment on this page.

Printable version
 
Anonymous Create an account or Log in