Panel: Added icons and disabled options

Author: jzaefferer

tests/visual/panel/panel.html

@@ -11,7 +11,25 @@
 	<script type="text/javascript" src="../../../ui/jquery.ui.panel.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#panel1").panel();
+		var panel = $("#panel1").panel();
+		
+		$("#icons").toggle(function() {
+			panel.panel("option", "icons", false);
+		}, function() {
+			panel.panel("option", "icons", $.ui.panel.prototype.options.icons);
+		});
+
+		$("#disable").toggle(function() {
+			panel.panel("disable");
+		}, function() {
+			panel.panel("enable");
+		});
+
+		$("#destroy").toggle(function() {
+			panel.panel("destroy");
+		}, function() {
+			panel.panel();
+		});
 	})
 	</script>
 </head>
@@ -32,5 +50,9 @@ <h3><a href="#">Panel Header 3</a></h3>
 	</div>
 </div>
 
+<button id="icons">Icons</button>
+<button id="disable">Disable</button>
+<button id="destroy">Destroy</button>
+
 </body>
 </html>

ui/jquery.ui.panel.js

@@ -14,27 +14,72 @@
 (function($) {
 
 $.widget("ui.panel", {
+	
+	options: {
+		icons: {
+			header: "ui-icon-triangle-1-e",
+			headerSelected: "ui-icon-triangle-1-s"
+		}
+	},
+	
 	_create: function() {
 		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")
-			.bind("mouseenter.panel", function() { $(this).addClass('ui-state-hover'); })
+			.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("click.panel", function(e) { self.click($(this), e); return false; });
+			.bind("click.panel", function(e) {
+				if (self.options.disabled) {
+					return;
+				}
+				self.click($(this));
+				return false;
+			});
+		this._createIcons();
 
 		this.headers
 			.next()
 				.addClass("ui-panel-content ui-helper-reset ui-widget-content ui-corner-bottom")
 				.hide();
 	},
-	destroy: function() {
-		$.widget.prototype.destroy.call(this);
+	
+	_setOption: function(key, value) {
+		$.Widget.prototype._setOption.apply(this, arguments);
+			
+		if (key == "icons") {
+			this._destroyIcons();
+			if (value) {
+				this._createIcons();
+			}
+		}
+		
+	},
+	
+	_createIcons: function() {
+		var o = this.options;
+		if (o.icons) {
+			$("<span/>").addClass("ui-icon " + o.icons.header).prependTo(this.headers);
+			this.headers.filter(".ui-state-active").find(".ui-icon").removeClass(o.icons.header).addClass(o.icons.headerSelected);
+			this.element.addClass("ui-panel-icons");
+		}
+	},
+	
+	_destroyIcons: function() {
+		this.headers.children(".ui-icon").remove();
+		this.element.removeClass("ui-panel-icons");
 	},
-	click: function(header, event) {
-		header.toggleClass("ui-state-active ui-corner-top ui-corner-all");
+	
+	click: function(header) {
+		header.toggleClass("ui-state-active ui-corner-top ui-corner-all")
+			.find(".ui-icon").toggleClass(this.options.icons.headerSelected).toggleClass(this.options.icons.header);
 		header.next().toggleClass("ui-panel-content-active").slideToggle("fast");
 	}
 });