type: widget

release: 0.0

status: in planning

documentation: N/A

demo: url || N/A

 

 

---

 

1 - Description:

 

A content grouping or panel is used to visually confine related information on a page or can act as a panel in an application UI. At the most basic, these include a bar with a title (B1). Links, buttons, icons can all be added to the bar (B2). The grouping bar itself can be make collapsable either horizontally (B2) or vertically (B3) which can be especially useful in a rich application with multiple panes and palettes.

 

Content Grouping examples:

 

1. http://code.google.com/p/ist-ui-panel/

   Available in jQuery UI Labs: http://jquery-ui.googlecode.com/svn/branches/labs/panel/ui.panel.js

   Live demo (updated for v0.4).

 

---

 

2 - Visual Design:

 

 

---

 

 

3 - Functional Specifications/Requirements:

 

     (Detailed descrition of how the script will be structured: defaults, options, architecture, extensibility, etc.)

 

     Currents used by panel widget from Labs:

 

options:

 

        * event (string, default: 'click')

              o Describes event that triggers 'fold/unfold' action.

        * collapsible (boolean, default: true)

              o When set to true, special collapse control is added to panel's titlebar.

              o When set to false, collapseType, collapsed and collapseSpeed options have no power.

        * collapseType (string, default: 'default')

              o 'default' type — panel with content folding up into header (see B2 in '2 - Visual Design' section)

              o 'slide-right' type — panel with content folding right into header, header is transformed from horisontal into vertical (see B3 in '2 - Visual Design' section). Note: content of DOM element with panel should be right aligned.

              o 'slide-left' type — opposite of 'slide-right' type — panel with content folding left into header, header is transformed from horisontal into vertical.

        * collapsed (boolean, default: false)

              o When set to true, panel is rendered initially collapsed.

        * collapseSpeed ( integer/string, default: 'fast')

              o Folding animation speed.

        * controls (string/boolean, default: false)

              o Any DOM element. Supposed that it could be ui.toolbar with controls.

        * cookie (array/boolean, default: null)

              o Uses jQuery cookie plugin to save panel state between sessions.

              o Option accepts array of parameters for cookie plugin (e.g. 'expires', 'domain', etc.).

        * accordion (string/boolean, default: false)

              o Emulates accordion behavior when in a group of panels only one is unfolded at the moment.

              o Option accepts a name of class, which unites controls in so-called "accordion controls group".

        * trueVerticalText (boolean, default: false)

              o When set to true, vertical text (in 'slide-right' and 'slide-left' panels) is rendered in true vertical manner.

        * vHeight (string, default: '220px')

              o Height of collapsed panel ('slide-right' and 'slide-left' types). Necessary for 'trueVerticalText' option to work.

 

        * width (string, default: 'auto')

              o Panel width adjusted to this value every time when panel is unfold.

        * stackable (boolean, default: true)

              o If set to true, special stack area (navigation window emulation) is automatically created (for 'slide-left' & 'slide-right' collapseType panels only). 

        * draggable (boolean, default: false)

              o If set to true, panel will use jQuery UI Draggable plugin if available.

        * disabled (boolean, default: false)

              o When set to true, jQuery UI's special class applied, making panel dimmed. Panel controls are also disabled.

 

 

methods:

 

        * destroy

              o Destroys panel widget, reverting initial markup

        * toggle (collapseSpeed)

              o Switches panel states between folded and unfolded.

              o As a parameter accepts the speed of folding animation.

        * content (content)

              o Sets panel's content (could be usefull for panels with content updated through ajax). The initial content is restored if panel destroyed.

        * disable (disabled)

              o 'disabled' set to 'true' disables the panel, to 'false' - enables.

 

 

callbacks:

 

        * fold

              o function to be executed on panel folding

        * unfold

              o function to be executed on panel unfolding

 

---

 

4 - Markup & Style:

 

4.1 Initial markup examples

 

(Pre-enhanced HTML markup structure that will be transformed into the final widget)

 

Current markup used by panel widget from Labs:

 

        <div id="my_panel">

            <h3>Panel Title</h3>

            <div>Panel Content</div>

        </div>

 

 

4.2 Recommended transformed HTML markup

 

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

 

Current transformed markup based on initial, generated with defaults:

 

        <div id="my_panel" class="ui-helper-reset ui-widget ui-panel" role="panel">

            <h3 class="ui-helper-reset ui-widget-header ui-panel-header ui-corner-top">

                <span class="ui-icon-triangle-1-s ui-icon"><span/></span>

                <span class="ui-panel-rightbox"/>

                <div class="ui-panel-title">

                    <span class="ui-panel-title-text">Panel Title</span>

                </div>

            </h3>

            <div class="ui-helper-reset ui-widget-content ui-panel-content ui-corner-bottom">

                <div class="ui-panel-content-text">Panel Content</div>

            </div>

        </div>

 

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.3 CSS & Theme

 

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

 

     Current css used by panel widget from Labs:

 

    /* Panel

    ----------------------------------*/

    .ui-panel {text-align:left;z-index:1;}

    .ui-panel-header {margin:0;padding:0;width:100%;}

    .ui-panel-header .ui-icon {border:0;float:left;margin-top:0.2em;}

    .ui-panel-title {margin:0.3em 0;}

    .ui-panel-title-text {margin-left:0.3em;}

    .ui-panel-title-text,.ui-panel .ui-icon {cursor:pointer;}

    .ui-panel-rightbox {float:right;}

    .ui-panel-rightbox .ui-icon {margin-right:0.1em;}

    .ui-panel-controls {float:left;margin:0.2em 0.7em 0 0;}

    .ui-panel-content {padding:0;width:100%;border-top:0;}

    .ui-panel-content-text {padding:0.7em 0.4em;}

    .ui-panel-clps-pnl {float:left;padding:0.1em 0.25em 0.3em;position:relative;top:-0.1em;}

    .ui-panel-vtitle {overflow:hidden;position:relative;white-space:nowrap;}

    .ui-panel-vtext {display:block;}

    .ui-panel-vtext-ie {bottom:1.5em;filter:flipv() fliph();left:0.2em;position:absolute;writing-mode:tb-rl;}

 

---

 

5 - Latest version of plugin:

 

This widget is not released yet (see status at the top of this page).

 

---

 

6 - Open issues being discussed

 

1. New icons (unfold panels of 'slide-right' & 'slide-left' types)

2. New glass background image for vertical headers (sliding panels & other other widgets, e.g. slider).

 

---