type: utility

release: 0.0

priority: high

status: in planning

documentation: url || N/A

demo: url || N/A

 

 

---

 

1 - Description:

 

This utility is used to create a styled, semi-transparent layer under a DOM element or widget to create the illusion of a dropshadow without the need for images. There are levers in the CSS framework and ThemeRoller tool to support the definition of the shadow's apearance: thickness, offset, texture, color, opacity.

 

A version of this was written for 1.7, but pulled for performance issues (need link to demo and specs from Paul). An example of the shadow can be seen int eh static mockup on the ThemeRoller page:

http://jqueryui.com/themeroller/

 

 

 

---

 

2 - Visual Design:

 

(Initial wireframe mockup, followed by more detailed designs of the various configurations, options and states.)

 

---

 

 

3 - Functional Specifications/Requirements:

 

• The shadow can be called on any dom element or widget
• The shadow must be automatically protected by default with the stackfix utility to avoid z-index issues
• Sized to the same dimensions as the calling element
• Positioned directly under the calling element
• The ui-widget-shadow class must be applied to the shadow
  • This class will apply padding and offsets to achieve the theme's shadow style
  • No colors, opacity or other attibutes that will interfere with the theming rules should be written by this plugin

 

---

 

4 - Markup & Style:

 

     4.1 Initial markup examples

 

     (Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )

 

     4.2 Recommended transformed HTML markup

 

     (The HTML markup structure and classes that will be used by the scripts in the enhanced version) 

 

     4.3 Accessibility recommendation

 

    (Detailed recommendations for ARIA, HTML markup, CSS and javascript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices) 

 

     4.4 CSS & Theme

 

    (Description of the CSS classes to be used for all states, how custom theming and Themeroller support will work.) 

 

---

 

5 - Latest version of plugin:

 

(Link to the latest version in the jQuery UI trunk here)

 

---

 

6 - Open issues being discussed

 

(Use this area to place things that we're hashing out like features and options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)

 

---