github
Advanced Search
  • Home
  • Pricing and Signup
  • Explore GitHub
  • Blog
  • Login

jquery / jquery-ui

  • Admin
  • Watch Unwatch
  • Fork
  • Your Fork
  • Pull Request
  • Download Source
    • 234
    • 26
  • Source
  • Commits
  • Network (26)
  • Graphs
  • Branch: panel

click here to add a description

click here to add a homepage

  • Switch Branches (4)
    • bind
    • master
    • panel ✓
    • tooltip
  • Switch Tags (15)
    • 1.8rc3
    • 1.8rc2
    • 1.8rc1
    • 1.8b1
    • 1.8a2
    • 1.8a1
    • 1.8
    • 1.7
    • 1.6rc6
    • 1.6rc5
    • 1.6rc3
    • 1.6rc2
    • 1.6
    • 1.5.2
    • 1.5.1
  • Branch List

Compare View

switch master...panel

Transform Comparison to Pull Request

Choose a ref to start at

Starting point can be a commit SHA, branch name or tag name.

Last commit Mon Mar 22 09:06:47 -0700 2010

Showing 6 unique commits by 1 author.

15ed09b3 jzaefferer Placeholder for Panel widget source Sun Mar 21 20:00:40 -0700 2010
b5db1be9 jzaefferer Updated placeholder Sun Mar 21 20:03:16 -0700 2010
df534ee7 jzaefferer Adding visual test for panel and a base implementation; duplicated ... Mon Mar 22 08:28:20 -0700 2010
aaf11d25 jzaefferer Panel: Added icons and disabled options Mon Mar 22 08:47:36 -0700 2010
7e69faaf jzaefferer Panel: Added destroy method Mon Mar 22 08:55:31 -0700 2010
80969865 jzaefferer Panel: Code formatting Comment Mon Mar 22 09:06:47 -0700 2010

Showing 3 changed files with 180 additions and 2 deletions.

A tests/visual/panel/panel.html 58 •••••
M themes/base/jquery.ui.accordion.css 13 ••••
A ui/jquery.ui.panel.js 111 •••••
0
tests/visual/panel/panel.html 
...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
0
@@ -0,0 +1,58 @@
0
+<!DOCTYPE html>
0
+<html lang="en">
0
+<head>
0
+  <meta charset="UTF-8" />
0
+  <title>Panel Visual Test : Default</title>
0
+  <link rel="stylesheet" href="../visual.css" type="text/css" />
0
+  <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css">
0
+  <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
0
+  <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
0
+  <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
0
+  <script type="text/javascript" src="../../../ui/jquery.ui.panel.js"></script>
0
+  <script type="text/javascript">
0
+  $(function() {
0
+    var panel = $("#panel1").panel();
0
+    
0
+    $("#icons").toggle(function() {
0
+      panel.panel("option", "icons", false);
0
+    }, function() {
0
+      panel.panel("option", "icons", $.ui.panel.prototype.options.icons);
0
+    });
0
+
0
+    $("#disable").toggle(function() {
0
+      panel.panel("disable");
0
+    }, function() {
0
+      panel.panel("enable");
0
+    });
0
+
0
+    $("#destroy").toggle(function() {
0
+      panel.panel("destroy");
0
+    }, function() {
0
+      panel.panel();
0
+    });
0
+  })
0
+  </script>
0
+</head>
0
+<body>
0
+
0
+<div id="panel1">
0
+  <h3><a href="#">Panel Header 1</a></h3>
0
+  <div>
0
+    Panel Content 1
0
+  </div>
0
+  <h3><a href="#">Panel Header 2</a></h3>
0
+  <div>
0
+    Panel Content 2
0
+  </div>
0
+  <h3><a href="#">Panel Header 3</a></h3>
0
+  <div>
0
+    Panel Content 3
0
+  </div>
0
+</div>
0
+
0
+<button id="icons">Icons</button>
0
+<button id="disable">Disable</button>
0
+<button id="destroy">Destroy</button>
0
+
0
+</body>
0
+</html>
0
themes/base/jquery.ui.accordion.css 
...
1
 
2
3
4
...
7
8
9
10
11
 
 
 
 
 
 
 
 
 
 
12
 
...
 
1
2
3
4
...
7
8
9
 
10
11
12
13
14
15
16
17
18
19
20
21
 
0
@@ -1,4 +1,4 @@
0
-/* Accordion
0
+/* Accordion/Panel
0
 ----------------------------------*/
0
 .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
0
 .ui-accordion .ui-accordion-li-fix { display: inline; }
0
@@ -7,4 +7,13 @@
0
 .ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
0
 .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
0
 .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
0
-.ui-accordion .ui-accordion-content-active { display: block; }
0
\ No newline at end of file
0
+.ui-accordion .ui-accordion-content-active { display: block; }
0
+
0
+.ui-panel .ui-panel-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
0
+.ui-panel .ui-panel-li-fix { display: inline; }
0
+.ui-panel .ui-panel-header-active { border-bottom: 0 !important; }
0
+.ui-panel .ui-panel-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
0
+.ui-panel-icons .ui-panel-header a { padding-left: 2.2em; }
0
+.ui-panel .ui-panel-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
0
+.ui-panel .ui-panel-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
0
+.ui-panel .ui-panel-content-active { display: block; }
0
\ No newline at end of file
0
ui/jquery.ui.panel.js 
...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0
 
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
0
@@ -0,0 +1,111 @@
0
+/*
0
+ * jQuery UI Panel @VERSION
0
+ *
0
+ * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
0
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
0
+ * and GPL (GPL-LICENSE.txt) licenses.
0
+ *
0
+ * http://docs.jquery.com/UI/Panel
0
+ *
0
+ * Depends:
0
+ *  jquery.ui.core.js
0
+ *  jquery.ui.widget.js
0
+ */
0
+(function($) {
0
+
0
+$.widget("ui.panel", {
0
+  
0
+  options: {
0
+    icons: {
0
+      header: "ui-icon-triangle-1-e",
0
+      headerSelected: "ui-icon-triangle-1-s"
0
+    }
0
+  },
0
+  
0
+  _create: function() {
0
+    this.element.addClass("ui-panel ui-widget ui-helper-reset");
0
+    
0
+    var self = this;
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() {
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;
0
+        }
0
+        self.click($(this));
0
+        return false;
0
+      });
0
+    this._createIcons();
0
+
0
+    this.headers
0
+      .next()
0
+        .addClass("ui-panel-content ui-helper-reset ui-widget-content ui-corner-bottom")
0
+        .hide();
0
+  },
0
+  
0
+  destroy: function() {
0
+    $.Widget.prototype.destroy.apply(this, arguments);
0
+    this.element
0
+      .removeClass("ui-panel ui-widget ui-helper-reset")
0
+      .removeAttr("role");
0
+
0
+    this.headers
0
+      .unbind(".panel")
0
+      .removeClass("ui-panel-header ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-corner-top")
0
+      .removeAttr("role").removeAttr("aria-expanded").removeAttr("tabindex");
0
+
0
+    this.headers.find("a").removeAttr("tabindex");
0
+    this._destroyIcons();
0
+    var contents = this.headers.next().css("display", "").removeAttr("role").removeClass("ui-helper-reset ui-widget-content ui-corner-bottom ui-panel-content ui-panel-content-active");
0
+  },
0
+  
0
+  _setOption: function(key, value) {
0
+    $.Widget.prototype._setOption.apply(this, arguments);
0
+      
0
+    if (key == "icons") {
0
+      this._destroyIcons();
0
+      if (value) {
0
+        this._createIcons();
0
+      }
0
+    }
0
+    
0
+  },
0
+  
0
+  _createIcons: function() {
0
+    var o = this.options;
0
+    if (o.icons) {
0
+      $("<span/>").addClass("ui-icon " + o.icons.header).prependTo(this.headers);
0
+      this.headers.filter(".ui-state-active").find(".ui-icon").removeClass(o.icons.header).addClass(o.icons.headerSelected);
0
+      this.element.addClass("ui-panel-icons");
0
+    }
0
+  },
0
+  
0
+  _destroyIcons: function() {
0
+    this.headers.children(".ui-icon").remove();
0
+    this.element.removeClass("ui-panel-icons");
0
+  },
0
+  
0
+  click: function(header) {
0
+    header.toggleClass("ui-state-active ui-corner-top ui-corner-all")
0
+      .find(".ui-icon").toggleClass(this.options.icons.headerSelected).toggleClass(this.options.icons.header);
0
+    header.next().toggleClass("ui-panel-content-active").slideToggle("fast");
0
+  }
0
+});
0
+
0
+}(jQuery));
0
\ No newline at end of file

Showing you all comments on commits in this comparison.

StevenBlack 1 day ago on 80969865

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.

  1. 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.

jzaefferer 2 days ago on 80969865

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 2 days ago on 80969865

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...

Blog | Support | Training | Contact | API | Status | Twitter | Help | Security
© 2010 GitHub Inc. All rights reserved. | Terms of Service | Privacy Policy
Powered by the Dedicated Servers and
Cloud Computing of Rackspace Hosting®
Dedicated Server