jquery / jquery-ui

Source
Commits
Network (26)
Graphs
Tree: 8096986

The official jQuery user interface library. — Read more

This URL has Read+Write access

Panel: Code formatting

jzaefferer (author)

Mon Mar 22 09:06:47 -0700 2010

commit 80969865d7803ebfe1a473e2334be1aac5e5af72
tree 44a3a672e047f59ecca088a5cbf6dffe5b287ede
parent 7e69faaf4eedd446270fc2c8bdbf41b59736b1cd

ui/jquery.ui.panel.js

16 ••••

ui/jquery.ui.panel.js

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

Comments

StevenBlack Mon Mar 22 16:45:03 -0700 2010

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 Mon Mar 22 19:01:04 -0700 2010

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 Tue Mar 23 15:05:27 -0700 2010

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.

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.

Please log in to comment.