oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/yui-ext/docs/overview-summary-TabPanel.js.html
JT Smith 4f68a0933c added YUI and YUI-ext 
fixed the resizable text area with IE problem
fixed the ad space with IE problem
merged the 7.2.0 and 7.1.4 change logs
2006-11-07 23:15:57 +00:00

445 lines
22 KiB
HTML
Raw Blame History

<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
Overview
</title>
<link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style">
<script>
function asd() {
parent.document.title="TabPanel.js Overview";
}
</script>
</head>
<body bgcolor="white" onload="asd();" style="margin:15px;">
<center>
<h2>TabPanel.js</h2>
</center>
<h4>Summary</h4>
<p>
</p>
<table border="1" cellpadding="3" cellspacing="0" width="100%">
<tr bgcolor="#CCCCFF" class="TableHeadingColor">
<td colspan="2" class="title-cell">
<b>Class Summary</b>
</td>
</tr>
<tr bgcolor="white" class="TableRowColor">
<td width="15%"><b><a href="YAHOO.ext.TabPanel.html">YAHOO.ext.TabPanel</a></b></td>
<td>Creates a lightweight TabPanel component using Yahoo!</td>
</tr>
<tr bgcolor="white" class="TableRowColor">
<td width="15%"><b><a href="YAHOO.ext.TabPanelItem.html">YAHOO.ext.TabPanelItem</a></b></td>
<td>&nbsp;</td>
</tr>
</table>
<hr/>
<!-- ========== METHOD SUMMARY =========== -->
<!-- ========== END METHOD SUMMARY =========== -->
<pre class="sourceview"><span class="comment">/*
tabpanel.js, version .1
Copyright(c) 2006, Jack Slocum.
Code licensed under the BSD License
*/</span>
<span class="comment">/**
* <span class="attrib">@class</span> Creates a lightweight TabPanel component using Yahoo! UI.
* &lt;br&gt;&lt;br&gt;
* Usage:
* &lt;pre&gt;&lt;code&gt;
&lt;font color="#008000"&gt;// basic tabs 1, built from existing content&lt;/font&gt;
var tabs = new YAHOO.ext.TabPanel('tabs1');
tabs.addTab('script', "View Script");
tabs.addTab('markup', "View Markup");
tabs.activate('script');
&lt;font color="#008000"&gt;// more advanced tabs, built from javascript&lt;/font&gt;
var jtabs = new YAHOO.ext.TabPanel('jtabs');
jtabs.addTab('jtabs-1', "Normal Tab", "My content was added during construction.");
&lt;font color="#008000"&gt;// set up the UpdateManager&lt;/font&gt;
var tab2 = jtabs.addTab('jtabs-2', "Ajax Tab 1");
var updater = tab2.getUpdateManager();
updater.setDefaultUrl('ajax1.htm');
tab2.onActivate.subscribe(updater.refresh, updater, true);
&lt;font color="#008000"&gt;// Use setUrl for Ajax loading&lt;/font&gt;
var tab3 = jtabs.addTab('jtabs-3', "Ajax Tab 2");
tab3.setUrl('ajax2.htm', null, true);
&lt;font color="#008000"&gt;// Disabled tab&lt;/font&gt;
var tab4 = jtabs.addTab('tabs1-5', "Disabled Tab", "Can't see me cause I'm disabled");
tab4.disable();
jtabs.activate('jtabs-1');
}
* &lt;/code&gt;&lt;/pre&gt;
* <span class="attrib">@requires</span> YAHOO.ext.Element
* <span class="attrib">@requires</span> YAHOO.ext.UpdateManager
* <span class="attrib">@requires</span> YAHOO.util.Dom
* <span class="attrib">@requires</span> YAHOO.util.Event
* <span class="attrib">@requires</span> YAHOO.util.CustomEvent
* <span class="attrib">@requires</span> YAHOO.util.DDProxy
* <span class="attrib">@requires</span> YAHOO.util.Connect (optional)
* <span class="attrib">@constructor</span>
* Create new TabPanel.
* <span class="attrib">@param</span> {String/HTMLElement/Element} container The id, DOM element or YAHOO.ext.Element container where this TabPanel is to be rendered.
*/</span>
YAHOO.ext.TabPanel = <span class="reserved">function</span>(container){
<span class="comment">/**
* The container element for this TabPanel.
* <span class="attrib">@type</span> YAHOO.ext.Element
*/</span>
<span class="reserved">this</span>.el = getEl(container);
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.stripWrap = getEl(<span class="reserved">this</span>.createStrip(<span class="reserved">this</span>.el.dom));
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.stripEl = getEl(<span class="reserved">this</span>.createStripList(<span class="reserved">this</span>.stripWrap.dom));
<span class="comment">/** The body element that contains TabPaneItem bodies.
* <span class="attrib">@type</span> YAHOO.ext.Element
*/</span>
<span class="reserved">this</span>.bodyEl = getEl(<span class="reserved">this</span>.createBody(<span class="reserved">this</span>.el.dom));
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.items = {};
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.active = null;
<span class="comment">/**
* Fires when the active TabPanelItem changes. Uses fireDirect with signature: (TabPanel this, TabPanelItem activedTab).
* <span class="attrib">@type</span> CustomEvent
*/</span>
<span class="reserved">this</span>.onTabChange = new YAHOO.util.CustomEvent(<span class="literal">'TabItem.onTabChange'</span>);
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.activateDelegate = <span class="reserved">this</span>.activate.createDelegate(<span class="reserved">this</span>);
}
YAHOO.ext.TabPanel.<span class="reserved">prototype</span> = {
<span class="comment">/**
* Creates a new TabPanelItem by looking for an existing element with the provided id - if it's not found it creates one.
* <span class="attrib">@param</span> {String} id The id of the div to use or create
* <span class="attrib">@param</span> {String} text The text for the tab
* <span class="attrib">@param</span> {&lt;i&gt;String&lt;/i&gt;} content (optional) Content to put in the TabPanelItem body
* <span class="attrib">@return</span> {YAHOO.ext.TabPanelItem} The created TabPanelItem
*/</span>
addTab : <span class="reserved">function</span>(id, text, content){
var item = new YAHOO.ext.TabPanelItem(<span class="reserved">this</span>, id, text);
<span class="reserved">this</span>.addTabItem(item);
<span class="reserved">if</span>(content){
item.setContent(content);
}
<span class="reserved">return</span> item;
},
<span class="comment">/**
* Returns the TabPanelItem with the specified id
* <span class="attrib">@param</span> {String} id The id of the TabPanelItem to fetch.
* <span class="attrib">@return</span> {YAHOO.ext.TabPanelItem}
*/</span>
getTab : <span class="reserved">function</span>(id){
<span class="reserved">return</span> <span class="reserved">this</span>.items[id];
},
<span class="comment">/**
* Add an existing TabPanelItem.
* <span class="attrib">@param</span> {YAHOO.ext.TabPanelItem} item The TabPanelItem to add
*/</span>
addTabItem : <span class="reserved">function</span>(item){
<span class="reserved">this</span>.items[item.id] = item;
},
<span class="comment">/**
* Remove a TabPanelItem.
* <span class="attrib">@param</span> {String} id The id of the TabPanelItem to remove.
*/</span>
removeTab : <span class="reserved">function</span>(id){
var tab = <span class="reserved">this</span>.items[id];
<span class="reserved">if</span>(tab &amp;&amp; <span class="reserved">this</span>.active != tab){
<span class="reserved">this</span>.stripEl.dom.removeChild(tab.onEl.dom);
<span class="reserved">this</span>.stripEl.dom.removeChild(tab.offEl.dom);
<span class="reserved">this</span>.bodyEl.dom.removeChild(tab.bodyEl.dom);
delete <span class="reserved">this</span>.items[id];
}
},
<span class="comment">/**
* Disable a TabPanelItem. &lt;b&gt;It cannot be the active tab, if it is this call is ignored.&lt;/b&gt;.
* <span class="attrib">@param</span> {String} id The id of the TabPanelItem to disable.
*/</span>
disableTab : <span class="reserved">function</span>(id){
var tab = <span class="reserved">this</span>.items[id];
<span class="reserved">if</span>(tab &amp;&amp; <span class="reserved">this</span>.active != tab){
tab.disable();
}
},
<span class="comment">/**
* Enable a TabPanelItem that is disabled.
* <span class="attrib">@param</span> {String} id The id of the TabPanelItem to enable.
*/</span>
enableTab : <span class="reserved">function</span>(id){
var tab = <span class="reserved">this</span>.items[id];
tab.enable();
},
<span class="comment">/**
* Activate a TabPanelItem. The currently active will be deactivated.
* <span class="attrib">@param</span> {String} id The id of the TabPanelItem to activate.
*/</span>
activate : <span class="reserved">function</span>(id){
var tab = <span class="reserved">this</span>.items[id];
<span class="reserved">if</span>(!tab.disabled){
<span class="reserved">if</span>(<span class="reserved">this</span>.active){
<span class="reserved">this</span>.active.hide();
}
<span class="reserved">this</span>.active = <span class="reserved">this</span>.items[id];
<span class="reserved">this</span>.active.show();
<span class="reserved">this</span>.onTabChange.fireDirect(<span class="reserved">this</span>, <span class="reserved">this</span>.active);
}
},
<span class="comment">/**
* Get the active TabPanelItem
* <span class="attrib">@return</span> {YAHOO.ext.TabPanelItem} The active TabPanelItem or null if none are active.
*/</span>
getActiveTab : <span class="reserved">function</span>(){
<span class="reserved">return</span> <span class="reserved">this</span>.active;
}
};
YAHOO.ext.TabPanelItem = <span class="reserved">function</span>(tabPanel, id, text){
<span class="comment">/**
* The TabPanel this TabPanelItem belongs to
* <span class="attrib">@type</span> YAHOO.ext.TabPanel
*/</span>
<span class="reserved">this</span>.tabPanel = tabPanel;
<span class="comment">/**
* The id for this TabPanelItem
* <span class="attrib">@type</span> String
*/</span>
<span class="reserved">this</span>.id = id;
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.disabled = false;
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.text = text;
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.loaded = false;
<span class="comment">/**
* The body element for this TabPanelItem
* <span class="attrib">@type</span> YAHOO.ext.Element
*/</span>
<span class="reserved">this</span>.bodyEl = getEl(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
<span class="reserved">this</span>.bodyEl.originalDisplay = <span class="literal">'block'</span>;
<span class="reserved">this</span>.bodyEl.setStyle(<span class="literal">'display'</span>, <span class="literal">'none'</span>);
<span class="reserved">this</span>.bodyEl.enableDisplayMode();
var stripElements =tabPanel.createStripElements(tabPanel.stripEl.dom, text);
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.onEl = getEl(stripElements.on, true);
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.offEl = getEl(stripElements.off, true);
<span class="reserved">this</span>.onEl.originalDisplay = <span class="literal">'inline'</span>;
<span class="reserved">this</span>.onEl.enableDisplayMode();
<span class="reserved">this</span>.offEl.originalDisplay = <span class="literal">'inline'</span>;
<span class="reserved">this</span>.offEl.enableDisplayMode();
<span class="reserved">this</span>.offEl.on(<span class="literal">'click'</span>, tabPanel.activateDelegate.createCallback(id));
<span class="comment">/**
* Fires when this TabPanelItem is activated. Uses fireDirect with signature: (TabPanel tabPanel, TabPanelItem this).
* <span class="attrib">@type</span> CustomEvent
*/</span>
<span class="reserved">this</span>.onActivate = new YAHOO.util.CustomEvent(<span class="literal">'TabItem.onActivate'</span>);
<span class="comment">/**
* Fires when this TabPanelItem is deactivated. Uses fireDirect with signature: (TabPanel tabPanel, TabPanelItem this).
* <span class="attrib">@type</span> CustomEvent
*/</span>
<span class="reserved">this</span>.onDeactivate = new YAHOO.util.CustomEvent(<span class="literal">'TabItem.onDeactivate'</span>);
};
YAHOO.ext.TabPanelItem.<span class="reserved">prototype</span> = {
<span class="comment">/**
* Show this TabPanelItem - this &lt;b&gt;does not&lt;/b&gt; deactivate the currently active TabPanelItem.
*/</span>
show : <span class="reserved">function</span>(){
<span class="reserved">this</span>.onEl.show();
<span class="reserved">this</span>.offEl.hide();
<span class="reserved">this</span>.bodyEl.show();
<span class="reserved">this</span>.onActivate.fireDirect(<span class="reserved">this</span>.tabPanel, <span class="reserved">this</span>);
},
setText : <span class="reserved">function</span>(text){
<span class="reserved">this</span>.onEl.dom.firstChild.firstChild.firstChild.innerHTML = text;
<span class="reserved">this</span>.offEl.dom.firstChild.firstChild.innerHTML = text;
},
<span class="comment">/**
* Activate this TabPanelItem - this &lt;b&gt;does&lt;/b&gt; deactivate the currently active TabPanelItem.
*/</span>
activate : <span class="reserved">function</span>(){
<span class="reserved">this</span>.tabPanel.activate(<span class="reserved">this</span>.id);
},
<span class="comment">/**
* Hide this TabPanelItem - if you don't activate another TabPanelItem this could look odd.
*/</span>
hide : <span class="reserved">function</span>(){
<span class="reserved">this</span>.onEl.hide();
<span class="reserved">this</span>.offEl.show();
<span class="reserved">this</span>.bodyEl.hide();
<span class="reserved">this</span>.onDeactivate.fireDirect(<span class="reserved">this</span>.tabPanel, <span class="reserved">this</span>);
},
<span class="comment">/**
* Disable this TabPanelItem - this call is ignore if this is the active TabPanelItem.
*/</span>
disable : <span class="reserved">function</span>(){
<span class="reserved">if</span>(<span class="reserved">this</span>.tabPanel.active != <span class="reserved">this</span>){
<span class="reserved">this</span>.disabled = true;
<span class="reserved">this</span>.offEl.addClass(<span class="literal">'disabled'</span>);
<span class="reserved">this</span>.offEl.dom.title = <span class="literal">'disabled'</span>;
}
},
<span class="comment">/**
* Enable this TabPanelItem if it was previously disabled.
*/</span>
enable : <span class="reserved">function</span>(){
<span class="reserved">this</span>.disabled = false;
<span class="reserved">this</span>.offEl.removeClass(<span class="literal">'disabled'</span>);
<span class="reserved">this</span>.offEl.dom.title = <span class="literal">''</span>;
},
<span class="comment">/**
* Set the content for this TabPanelItem.
* <span class="attrib">@param</span> {String} content The content
*/</span>
setContent : <span class="reserved">function</span>(content){
<span class="reserved">this</span>.bodyEl.update(content);
},
<span class="comment">/**
* Get the {<span class="attrib">@link</span> YAHOO.ext.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
* <span class="attrib">@return</span> {YAHOO.ext.UpdateManager} The UpdateManager
*/</span>
getUpdateManager : <span class="reserved">function</span>(){
<span class="reserved">return</span> <span class="reserved">this</span>.bodyEl.getUpdateManager();
},
<span class="comment">/**
* Set a URL to be used to load the content for this TabPanelItem.
* <span class="attrib">@param</span> {String/Function} url The url to load the content from or a function to call to get the url
* <span class="attrib">@param</span> {&lt;i&gt;String/Object&lt;/i&gt;} params (optional) The string params for the update call or an object of the params. See {<span class="attrib">@link</span> YAHOO.ext.UpdateManager#update} for more details. (Defaults to null)
* <span class="attrib">@param</span> {&lt;i&gt;Boolean&lt;/i&gt;} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
* <span class="attrib">@return</span> {YAHOO.ext.UpdateManager} The UpdateManager
*/</span>
setUrl : <span class="reserved">function</span>(url, params, loadOnce){
<span class="reserved">this</span>.onActivate.subscribe(<span class="reserved">this</span>._handleRefresh.createDelegate(<span class="reserved">this</span>, [url, params, loadOnce]));
},
<span class="comment">/** <span class="attrib">@private</span> */</span>
_handleRefresh : <span class="reserved">function</span>(url, params, loadOnce){
<span class="reserved">if</span>(!loadOnce || !<span class="reserved">this</span>.loaded){
var updater = <span class="reserved">this</span>.bodyEl.getUpdateManager();
updater.update(url, params, <span class="reserved">this</span>._setLoaded.createDelegate(<span class="reserved">this</span>));
}
},
<span class="comment">/** <span class="attrib">@private</span> */</span>
_setLoaded : <span class="reserved">function</span>(){
<span class="reserved">this</span>.loaded = true;
}
};
<span class="comment">/** <span class="attrib">@private</span> */</span>
YAHOO.ext.TabPanel.<span class="reserved">prototype</span>.createStrip = <span class="reserved">function</span>(container){
var strip = document.createElement(<span class="literal">'div'</span>);
YAHOO.util.Dom.addClass(strip, <span class="literal">'tabset'</span>);
container.appendChild(strip);
var stripInner = document.createElement(<span class="literal">'div'</span>);
YAHOO.util.Dom.generateId(stripInner, <span class="literal">'tab-strip'</span>);
YAHOO.util.Dom.addClass(stripInner, <span class="literal">'hd'</span>);
strip.appendChild(stripInner);
<span class="reserved">return</span> stripInner;
};
<span class="comment">/** <span class="attrib">@private</span> */</span>
YAHOO.ext.TabPanel.<span class="reserved">prototype</span>.createStripList = <span class="reserved">function</span>(strip){
var list = document.createElement(<span class="literal">'ul'</span>);
YAHOO.util.Dom.generateId(list, <span class="literal">'tab-strip-list'</span>);
strip.appendChild(list);
<span class="reserved">return</span> list;
};
<span class="comment">/** <span class="attrib">@private</span> */</span>
YAHOO.ext.TabPanel.<span class="reserved">prototype</span>.createBody = <span class="reserved">function</span>(container){
var body = document.createElement(<span class="literal">'div'</span>);
YAHOO.util.Dom.generateId(body, <span class="literal">'tab-body'</span>);
YAHOO.util.Dom.addClass(body, <span class="literal">'yui-ext-tabbody'</span>);
container.appendChild(body);
<span class="reserved">return</span> body;
};
<span class="comment">/** <span class="attrib">@private</span> */</span>
YAHOO.ext.TabPanel.<span class="reserved">prototype</span>.createItemBody = <span class="reserved">function</span>(bodyEl, id){
var body = YAHOO.util.Dom.get(id);
<span class="reserved">if</span>(!body){
body = document.createElement(<span class="literal">'div'</span>);
body.id = id;
}
YAHOO.util.Dom.addClass(body, <span class="literal">'yui-ext-tabitembody'</span>);
bodyEl.appendChild(body);
<span class="reserved">return</span> body;
};
<span class="comment">/** <span class="attrib">@private</span> */</span>
YAHOO.ext.TabPanel.<span class="reserved">prototype</span>.createStripElements = <span class="reserved">function</span>(stripEl, text){
var li = document.createElement(<span class="literal">'li'</span>);
var a = document.createElement(<span class="literal">'a'</span>);
var em = document.createElement(<span class="literal">'em'</span>);
stripEl.appendChild(li);
li.appendChild(a);
a.appendChild(em);
em.innerHTML = text;
var li2 = document.createElement(<span class="literal">'li'</span>);
var a2 = document.createElement(<span class="literal">'a'</span>);
var em2 = document.createElement(<span class="literal">'em'</span>);
var strong = document.createElement(<span class="literal">'strong'</span>);
stripEl.appendChild(li2);
YAHOO.util.Dom.addClass(li2, <span class="literal">'on'</span>);
YAHOO.util.Dom.setStyle(li2, <span class="literal">'display'</span>, <span class="literal">'none'</span>);
li2.appendChild(a2);
a2.appendChild(strong);
strong.appendChild(em2);
em2.innerHTML = text;
<span class="reserved">return</span> {on: li2, off: li};
};</pre>
<hr>
<hr>
<font size="-1">
</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Sat Oct 14 06:07:10 2006</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink