Skip to content
Permalink
Browse files
Panel: Code formatting
  • Loading branch information
jzaefferer committed Mar 22, 2010
1 parent 7e69faa commit 80969865d7803ebfe1a473e2334be1aac5e5af72
Showing 1 changed file with 12 additions and 4 deletions.
@@ -26,16 +26,24 @@ $.widget("ui.panel", {
this.element.addClass("ui-panel ui-widget ui-helper-reset");

var self = this;
this.headers = this.element.find("> li > :first-child,> :not(li):even").addClass("ui-panel-header ui-helper-reset ui-state-default ui-corner-all")
this.headers = this.element
.find("> li > :first-child,> :not(li):even")
.addClass("ui-panel-header ui-helper-reset ui-state-default ui-corner-all")
.bind("mouseenter.panel", function() {
if (self.options.disabled) {
return;
}
$(this).addClass('ui-state-hover');
})
.bind("mouseleave.panel", function() { $(this).removeClass('ui-state-hover'); })
.bind("focus.panel", function() { $(this).addClass('ui-state-focus'); })
.bind("blur.panel", function() { $(this).removeClass('ui-state-focus'); })
.bind("mouseleave.panel", function() {
$(this).removeClass('ui-state-hover');
})
.bind("focus.panel", function() {
$(this).addClass('ui-state-focus');
})
.bind("blur.panel", function() {
$(this).removeClass('ui-state-focus');
})
.bind("click.panel", function(e) {
if (self.options.disabled) {
return;

4 comments on commit 8096986

@StevenBlack
Copy link

@StevenBlack StevenBlack commented on 8096986 Mar 22, 2010

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Jorn, are you working from some sort of spec, or is this an experimantal skunk-works? (skunk-werke ?) If so, I can't seem to find it in the list at http://jqueryui.pbworks.com/

I've been working on something similar, which I'll post soon. It's a ui-veneer to wrap legacy HTML to bring-it into a jQuery-ui context. As such it is a "panel" (or "paneller") but without many of the aspects of an integrated panel UX that one can infuse when starting from scratch.

Hence my question about a spec...

@jzaefferer
Copy link
Member Author

@jzaefferer jzaefferer commented on 8096986 Mar 23, 2010

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Steven,

no spec, yet. My focus is one extracting the parts of the accordion into this component that have nothing to do with the only-one-panel-open-at-a-time aspect. Once that is done, I'd look into rewriting accordion to extend this, and cleaning up the mess that accordion currently is.

In any case, we realized that we need a less restrictive accordion, and wanted this prototype to get an idea of the right approach. The spec will follow, then the finishing toches...

I'm definitely interested in seeing what you have started.

@StevenBlack
Copy link

@StevenBlack StevenBlack commented on 8096986 Mar 23, 2010

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's a page with the beginnings of a demo and some pointers to the js, css, and test files.

http://stevenblack.com/Projects/Javascript/jquery-ui/tests/visual/veneer/

As you can see it creates panels with otherwise generic content.

I think there are two worthwhile concepts in veneer so far:

  1. :headerBelow and :headerAbove custom selectors are used with .nextUntil() for creating wrappable element groups based on a simple HTML header hierarchy.

  2. Have a look at the uiVeneerTouched cumulator which is defined like this:

    // collection of elements created or modified by this widget, used for auto-destroy algorithm.
    uiVeneerTouched: { newElement: [], newWrapper: [], adorned: [] }, 
    

These arrays cumulate the elements touched by this widget which makes destroy() a snap. I think the ability to cumulate new elements, new wrappers, and elements adorned by widget-specific classes would be nice in the widget core.

@idlesign
Copy link

@idlesign idlesign commented on 8096986 May 20, 2010

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Jörn,

As I understand this panel (i.e. new accordion) has almost no relation to panel (content grouping) widget which concept is described at pbworks, and that's a confusing thing to know. You see, I think that essentially accordion could be composed out of panels (as in ist-ui-panel with 'accordion' option), but not vice versa. What's your opinion?

And another thing: is there any sense from the point of accessability to hide accordion icons? If all accordion panels are collapsed how one should know that this control accepts clicks and could be opened?

Please sign in to comment.