<div id="widget">this is some chart widget</div>
<br/><br/>
<div id="widget2">another chart widget</div>
JavaScript
/* this is for use on a dashboard of charts/widgets. each chart/widget has a title bar control panel that is used to configure, close, minimize, move the widget
some of the panels the title bar will invoke will also have a title bar.
Here, we have a contructor for all titleBars in a widget / all title bars on a page */
var TitleBar = function (d, styleO, nclass, g) {
this.k = []; // kids
this.n = n; // name //TODO: add n to the class of the TitleBar as a kind of namespacing?
console.log('g:',g);
if(g){
this.$e = $('div.' + nclass);
} else {
this.$e = $('<div></div>').each(function(){
alert(g);
});
} // all title bars or just one
this.d = d; // is this redundant?
this.$e.addClass(nclass).addClass('titlebar');
if (typeof styleO == 'Object') {
this.$e.css(styleO);
} else {
this.$e.attr('style', styleO);
} // end if
} // end TitleBar class defn
TitleBar.prototype = {
add: function (c) {
this.k.push(c);
this.$e.append(c.getE());
console.log('title add: ',this.$e, this.$e.get())
}, // end add
getC: function (i) {
return this.k[i];
}, // end getC : getChild
/* order : function(arr){
// given an array of strings reorder buttons that contain those strings. buttons that do not have those strings will go last in their current order.
// arr = ['X','_','?']
for(var i =0, l=arr.length; i<l , i++){
//TODO
},
}, // end order */
remove: function (c) {
for (var n /*node*/ , i = 0; node = this.getC(i); i++) {
if (n == c) {
this.k.splice(i, 1);
this.$e.detach(c.getE());
return true;
} // end if
if (n.remove(c)) {
return true;
} // end if
} // end for
return false;
}, // end remove
getE: function () {
console.log('title getE: ', this.$e.get(), this.$e)
return this.$e;
} // end getE
// TODO : do i want a method here for changing the buttons style on hover (e.g....
Please Whitelist JSFiddle in your content blocker.
Help keep JSFiddle free for always by one of two ways:
Whitelist JSFiddle in your content blocker (two clicks)
Go PRO and get access to additional PRO features →
Join the 4+ million users, and keep the JSFiddle dream alive.
Ad-free
All ads in the editor and listing pages are turned completely off.
Use pre-released features
You get to try and use features (like the Palette Color Generator) months before everyone else.
Fiddle collections
Sort and categorize your Fiddles into multiple collections.
Private collections and fiddles
You can make as many Private Fiddles, and Private Collections as you wish!
Console
Debug your Fiddle with a minimal built-in JavaScript console.