--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/tabview/tabview-add-remove.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,664 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Example: Adding and Removing Tabs</title>
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
+ <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
+ <link rel="stylesheet" href="../assets/css/main.css">
+ <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
+ <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
+ <script src="../../build/yui/yui-min.js"></script>
+
+</head>
+<body>
+<!--
+<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+-->
+<div id="doc">
+ <div id="hd">
+ <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
+ </div>
+
+
+ <h1>Example: Adding and Removing Tabs</h1>
+ <div class="yui3-g">
+ <div class="yui3-u-3-4">
+ <div id="main">
+ <div class="content"><style scoped>
+.yui3-tabview {
+ margin-bottom: 1em;
+}
+
+.yui3-skin-sam .yui3-tab {
+ position: relative;
+}
+
+.yui3-skin-sam .yui3-tabview-removeable .yui3-tab-label,
+.yui3-skin-sam .yui3-tabview-removeable .yui3-tab-selected .yui3-tab-label {
+ padding-right: 1.3em; /* make room for close link */
+}
+
+.yui3-skin-sam .yui3-tabview-removeable .yui3-tab-add {
+ padding-right: 0.75em; /* no close link for add tab link */
+}
+
+.yui3-skin-sam .yui3-tab-add {
+ color: #999;
+ font: bold 120%/1 verdana;
+ margin-left: 0.25em;
+}
+
+.yui3-tab-remove {
+ color: #999;
+ font:bold 80% verdana;
+ position: absolute;
+ right: 0.4em;
+ top: 0.4em;
+}
+
+.yui3-tab-remove:hover {
+ color: #666;
+}
+
+.yui3-skin-sam .yui3-tab-selected .yui3-tab-remove {
+ top: 0.52em;
+}
+
+.yui3-skin-sam .yui3-tab-selected .yui3-tab-remove:hover {
+ color: #fff;
+}
+
+#main #example-canvas .yui3-tabview .yui3-tab-selected a {
+ color:white;
+}
+
+</style>
+<div class="intro">
+ <p>This example shows how to give <code>TabView</code> buttons for adding and removing tabs.</p>
+</div>
+
+<div class="example yui3-skin-sam">
+<div id="demo">
+ <ul>
+ <li><a href="#foo">foo</a></li>
+ <li><a href="#bar">bar</a></li>
+ <li><a href="#baz">baz</a></li>
+ </ul>
+ <div>
+ <div id="foo">
+ <p>foo content</p>
+ </div>
+ <div id="bar">
+ <p>bar content</p>
+ </div>
+ <div id="baz">
+ <p>baz content</p>
+ </div>
+ </div>
+</div>
+
+<div id="demo2">
+</div>
+
+<div id="demo3">
+</div>
+
+<script type="text/javascript">
+YUI().use('tabview', 'escape', 'plugin', function(Y) {
+ var Addable = function(config) {
+ Addable.superclass.constructor.apply(this, arguments);
+ };
+
+ Addable.NAME = 'addableTabs';
+ Addable.NS = 'addable';
+
+ Y.extend(Addable, Y.Plugin.Base, {
+ ADD_TEMPLATE: '<li class="yui3-tab" title="add a tab">' +
+ '<a class="yui3-tab-label yui3-tab-add">+</a></li>',
+
+ initializer: function(config) {
+ var tabview = this.get('host');
+ tabview.after('render', this.afterRender, this);
+ tabview.get('contentBox')
+ .delegate('click', this.onAddClick, '.yui3-tab-add', this);
+ },
+
+ getTabInput: function() {
+ var tabview = this.get('host');
+ return {
+ label: Y.Escape.html(window.prompt('label:', 'new tab')),
+ content: '<p>' + Y.Escape.html(window.prompt('content:', 'new content')) + '</p>',
+ index: Number(window.prompt('index:', tabview.size()))
+ }
+ },
+
+ afterRender: function(e) {
+ var tabview = this.get('host');
+ tabview.get('contentBox').one('> ul').append(this.ADD_TEMPLATE);
+ },
+
+ onAddClick: function(e) {
+ e.stopPropagation();
+ var tabview = this.get('host'),
+ input = this.getTabInput();
+ tabview.add(input, input.index);
+ }
+ });
+
+ var Removeable = function(config) {
+ Removeable.superclass.constructor.apply(this, arguments);
+ };
+
+ Removeable.NAME = 'removeableTabs';
+ Removeable.NS = 'removeable';
+
+ Y.extend(Removeable, Y.Plugin.Base, {
+ REMOVE_TEMPLATE: '<a class="yui3-tab-remove" title="remove tab">x</a>',
+
+ initializer: function(config) {
+ var tabview = this.get('host'),
+ cb = tabview.get('contentBox');
+
+ cb.addClass('yui3-tabview-removeable');
+ cb.delegate('click', this.onRemoveClick, '.yui3-tab-remove', this);
+
+ // Tab events bubble to TabView
+ tabview.after('tab:render', this.afterTabRender, this);
+ },
+
+ afterTabRender: function(e) {
+ // boundingBox is the Tab's LI
+ e.target.get('boundingBox').append(this.REMOVE_TEMPLATE);
+ },
+
+ onRemoveClick: function(e) {
+ e.stopPropagation();
+ var tab = Y.Widget.getByNode(e.target);
+ tab.remove();
+ }
+ });
+
+ var tabview = new Y.TabView({
+ srcNode: '#demo',
+ plugins: [Addable]
+ });
+
+ var tabview2 = new Y.TabView({
+ children: [{
+ label: 'foo',
+ content: '<p>foo content</p>'
+ }, {
+ label: 'bar',
+ content: '<p>bar content</p>'
+ }, {
+ label: 'baz',
+ content: '<p>baz content</p>'
+ }],
+ plugins: [Removeable]
+ });
+
+ var tabview3 = new Y.TabView({
+ children: [{
+ label: 'foo',
+ content: '<p>foo content</p>'
+ }, {
+ label: 'bar',
+ content: '<p>bar content</p>'
+ }, {
+ label: 'baz',
+ content: '<p>bar content</p>'
+ }],
+ plugins: [Addable, Removeable]
+ });
+
+ tabview.render();
+ tabview2.render('#demo2');
+ tabview3.render('#demo3');
+});
+</script>
+
+</div>
+
+<p>
+<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
+page's <code><body></code> element or to a parent element of the widget in order to apply
+the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
+</p>
+<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre>
+
+
+<h2>Plugin Template</h2>
+
+<p>In order to make these addons reusable, we can build them as plugins. This
+allows the option for multiple tabviews that mix and match functionality.
+To get started, we will first fill in a basic <code>Plugin</code> template.
+The <code>NAME</code> property is required to prefix events, classNames, et cetera.
+The <code>NS</code> is the namespace where the plugin will live on the
+<code>host</code>. This is where its API can be accessed (e.g. "node.addable.destroy()").
+Adding the <code>this._host</code> alias provides a convenient way to get back to the TabView
+instance. Calling the superclass constructor kicks off the <code>Base</code> lifecycle,
+which will call the <code>initializer</code>.
+
+</p>
+
+<pre class="code prettyprint">var Addable = function(config) {
+ this._host = config.host;
+ Addable.superclass.constructor.apply(this, arguments);
+};
+
+Addable.NAME = 'addableTabs';
+Addable.NS = 'addable';
+
+Y.extend(Addable, Y.Plugin.Base, {
+ initializer: function(config) {
+ }
+});</pre>
+
+
+<h2>Addable Tab Plugin</h2>
+
+<p>To simplify adding new tabs, we are going to add a button that
+users can click and that will prompt them for some details regarding the new tab.
+The main task we are trying to accomplish is to add some HTML to the
+<code>TabView</code>, listen for clicks on the button, prompt the user for input,
+and update the tabs accordingly.</p>
+
+<h3>HTML Template</h3>
+<p>The first thing we need is a template for the markup to be generated. Adding
+this to the prototype allows separate customization for each <code>TabView</code>
+instance. For this example, we want it to look and feel like another <code>Tab</code>
+without actually being one.</p>
+
+<pre class="code prettyprint">Y.extend(Addable, Y.Plugin.Base, {
+ ADD_TEMPLATE: '<li class="yui3-tab" title="add a tab">' +
+ '<a class="yui3-tab-label yui3-tab-add">+</a></li>',
+
+ initializer: function(config) {
+ }
+});</pre>
+
+
+<h3>Adding the HTML</h3>
+<p>Now that we have a markup template, we will need to add it to the <code>TabView</code>
+somehow. The <code>render</code> phase is the appropriate moment to do so. Listening
+for the <code>render</code> event will give us access to that moment. Listening
+for <code>after('render')</code> ensure that the rendering has actually happened. Then
+we just need to find the tab list and, using the template, add the new item.
+The <code>contentBox</code> provides a <code>Node</code> that can be used to manage
+the <code>TabView</code> HTML.</p>
+
+<pre class="code prettyprint">Y.extend(Addable, Y.Plugin.Base, {
+ ADD_TEMPLATE: '<li class="yui3-tab" title="add a tab">' +
+ '<a class="yui3-tab-label yui3-tab-add">+</a></li>',
+
+ initializer: function(config) {
+ var tabview = this.get('host');
+ tabview.after('render', this.afterRender, this);
+ },
+
+ afterRender: function(e) {
+ var tabview = this.get('host');
+ tabview.get('contentBox').one('> ul').append(this.ADD_TEMPLATE);
+ }
+});</pre>
+
+
+<h3>Handling the Click</h3>
+<p>All that remains is to listen for clicks on the add button and prompt
+the user for the relevant <code>Tab</code> data. Again we can leverage
+the <code>Node</code> API, this time to delegate clicks on the add button.
+Stopping event propagation in our handler ensures that the event does
+not bubble any further, preventing the <code>TabView</code> from trying
+to handle it. To keep the example simple, a basic <code>prompt</code> is
+used to get the user input. This could be refined to use an
+<code>Overlay</code> or other custom control. The data is then handed off
+to <code>TabView</code>'s <code>add</code> method.</p>
+
+<pre class="code prettyprint">Y.extend(Addable, Y.Plugin.Base, {
+ ADD_TEMPLATE: '<li class="yui3-tab" title="add a tab">' +
+ '<a class="yui3-tab-label yui3-tab-add">+</a></li>',
+
+ initializer: function(config) {
+ var tabview = this.get('host');
+ tabview.after('render', this.afterRender, this);
+
+ tabview.get('contentBox')
+ .delegate('click', this.onAddClick, '.yui3-tab-add', this);
+ },
+
+ afterRender: function(e) {
+ this.get('host').get('contentBox').one('> ul').append(this.ADD_TEMPLATE);
+ },
+
+ getTabInput: function() {
+ return {
+ label: window.prompt('label:', 'new tab'),
+ content: window.prompt('content:', '<p>new content</p>'),
+ index: Number(window.prompt('index:', this._host.size()))
+ }
+ },
+
+ onAddClick: function(e) {
+ e.stopPropagation();
+ var tabview = this.get('host');
+ input = this.getTabInput();
+ tabview.add(input, input.index);
+ }
+});</pre>
+
+
+<h3>Using the Plugin</h3>
+<p>Now we can go ahead and plug in our functionality. This can be during
+construction with the <code>plugins</code> attribute, or subsequently
+via the <code>plug</code> method.</p>
+
+<pre class="code prettyprint">var tabview = new Y.TabView({
+ children: [{
+ label: 'foo',
+ content: '<p>foo content</p>'
+ }, {
+ label: 'bar',
+ content: '<p>bar content</p>'
+ }, {
+ label: 'baz',
+ content: '<p>baz content</p>'
+ }],
+ plugins: [Addable]
+});
+
+// or
+// tabview.plug(Addable);</pre>
+
+
+<h2>Removeable Tabs Plugin</h2>
+<p>The process for creating a removeable plugin for <code>TabView</code>
+is very similar. The full source is provided below.</p>
+
+<pre class="code prettyprint">var Removeable = function(config) {
+ Removeable.superclass.constructor.apply(this, arguments);
+};
+
+Removeable.NAME = 'removeableTabs';
+Removeable.NS = 'removeable';
+
+Y.extend(Removeable, Y.Plugin.Base, {
+ REMOVE_TEMPLATE: '<a class="yui3-tab-remove" title="remove tab">x</a>',
+
+ initializer: function(config) {
+ var tabview = this.get('host'),
+ cb = tabview.get('contentBox');
+
+ cb.addClass('yui3-tabview-removeable');
+ cb.delegate('click', this.onRemoveClick, '.yui3-tab-remove', this);
+
+ // Tab events bubble to TabView
+ tabview.after('tab:render', this.afterTabRender, this);
+ },
+
+ afterTabRender: function(e) {
+ // boundingBox is the Tab's LI
+ e.target.get('boundingBox').append(this.REMOVE_TEMPLATE);
+ },
+
+ onRemoveClick: function(e) {
+ e.stopPropagation();
+ var tab = Y.Widget.getByNode(e.target);
+ tab.remove();
+ }
+});</pre>
+
+<h2>Complete Example Source</h2>
+<p>
+<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
+page's <code><body></code> element or to a parent element of the widget in order to apply
+the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
+</p>
+<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre>
+
+
+<pre class="code prettyprint"><div id="demo">
+ <ul>
+ <li><a href="#foo">foo</a></li>
+ <li><a href="#bar">bar</a></li>
+ <li><a href="#baz">baz</a></li>
+ </ul>
+ <div>
+ <div id="foo">
+ <p>foo content</p>
+ </div>
+ <div id="bar">
+ <p>bar content</p>
+ </div>
+ <div id="baz">
+ <p>baz content</p>
+ </div>
+ </div>
+</div>
+
+<div id="demo2">
+</div>
+
+<div id="demo3">
+</div>
+
+<script type="text/javascript">
+YUI().use('tabview', 'escape', 'plugin', function(Y) {
+ var Addable = function(config) {
+ Addable.superclass.constructor.apply(this, arguments);
+ };
+
+ Addable.NAME = 'addableTabs';
+ Addable.NS = 'addable';
+
+ Y.extend(Addable, Y.Plugin.Base, {
+ ADD_TEMPLATE: '<li class="yui3-tab" title="add a tab">' +
+ '<a class="yui3-tab-label yui3-tab-add">+</a></li>',
+
+ initializer: function(config) {
+ var tabview = this.get('host');
+ tabview.after('render', this.afterRender, this);
+ tabview.get('contentBox')
+ .delegate('click', this.onAddClick, '.yui3-tab-add', this);
+ },
+
+ getTabInput: function() {
+ var tabview = this.get('host');
+ return {
+ label: Y.Escape.html(window.prompt('label:', 'new tab')),
+ content: '<p>' + Y.Escape.html(window.prompt('content:', 'new content')) + '</p>',
+ index: Number(window.prompt('index:', tabview.size()))
+ }
+ },
+
+ afterRender: function(e) {
+ var tabview = this.get('host');
+ tabview.get('contentBox').one('> ul').append(this.ADD_TEMPLATE);
+ },
+
+ onAddClick: function(e) {
+ e.stopPropagation();
+ var tabview = this.get('host'),
+ input = this.getTabInput();
+ tabview.add(input, input.index);
+ }
+ });
+
+ var Removeable = function(config) {
+ Removeable.superclass.constructor.apply(this, arguments);
+ };
+
+ Removeable.NAME = 'removeableTabs';
+ Removeable.NS = 'removeable';
+
+ Y.extend(Removeable, Y.Plugin.Base, {
+ REMOVE_TEMPLATE: '<a class="yui3-tab-remove" title="remove tab">x</a>',
+
+ initializer: function(config) {
+ var tabview = this.get('host'),
+ cb = tabview.get('contentBox');
+
+ cb.addClass('yui3-tabview-removeable');
+ cb.delegate('click', this.onRemoveClick, '.yui3-tab-remove', this);
+
+ // Tab events bubble to TabView
+ tabview.after('tab:render', this.afterTabRender, this);
+ },
+
+ afterTabRender: function(e) {
+ // boundingBox is the Tab's LI
+ e.target.get('boundingBox').append(this.REMOVE_TEMPLATE);
+ },
+
+ onRemoveClick: function(e) {
+ e.stopPropagation();
+ var tab = Y.Widget.getByNode(e.target);
+ tab.remove();
+ }
+ });
+
+ var tabview = new Y.TabView({
+ srcNode: '#demo',
+ plugins: [Addable]
+ });
+
+ var tabview2 = new Y.TabView({
+ children: [{
+ label: 'foo',
+ content: '<p>foo content</p>'
+ }, {
+ label: 'bar',
+ content: '<p>bar content</p>'
+ }, {
+ label: 'baz',
+ content: '<p>baz content</p>'
+ }],
+ plugins: [Removeable]
+ });
+
+ var tabview3 = new Y.TabView({
+ children: [{
+ label: 'foo',
+ content: '<p>foo content</p>'
+ }, {
+ label: 'bar',
+ content: '<p>bar content</p>'
+ }, {
+ label: 'baz',
+ content: '<p>bar content</p>'
+ }],
+ plugins: [Addable, Removeable]
+ });
+
+ tabview.render();
+ tabview2.render('#demo2');
+ tabview3.render('#demo3');
+});
+</script></pre>
+
+</div>
+ </div>
+ </div>
+
+ <div class="yui3-u-1-4">
+ <div class="sidebar">
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+ <li data-description="This example shows how to create a TabView wigdet from existing HTML.">
+ <a href="tabview-basic.html">TabView from Existing Markup</a>
+ </li>
+
+
+
+ <li data-description="This example shows how to create a TabView wigdet from JavaScript.">
+ <a href="tabview-fromjs.html">Dynamic TabView from JavaScript</a>
+ </li>
+
+
+
+ <li data-description="This example shows how to add and remove Tabs.">
+ <a href="tabview-add-remove.html">Adding and Removing Tabs</a>
+ </li>
+
+
+
+ <li data-description="This example shows how to load tab content remotely using a YQL plugin.">
+ <a href="tabview-yql.html">Loading Tab Content</a>
+ </li>
+
+
+
+
+ </ul>
+ </div>
+ </div>
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples That Use This Component</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+
+
+
+
+
+
+
+
+ <li data-description="Demonstrates how to add browser history support to a TabView widget using the History Utility.">
+ <a href="../history/history-tabview.html">History + TabView</a>
+ </li>
+
+
+ </ul>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</div>
+
+<script src="../assets/vendor/prettify/prettify-min.js"></script>
+<script>prettyPrint();</script>
+
+<script>
+YUI.Env.Tests = {
+ examples: [],
+ project: '../assets',
+ assets: '../assets/tabview',
+ name: 'tabview-add-remove',
+ title: 'Adding and Removing Tabs',
+ newWindow: '',
+ auto: false
+};
+YUI.Env.Tests.examples.push('tabview-basic');
+YUI.Env.Tests.examples.push('tabview-fromjs');
+YUI.Env.Tests.examples.push('tabview-add-remove');
+YUI.Env.Tests.examples.push('tabview-yql');
+YUI.Env.Tests.examples.push('history-tabview');
+
+</script>
+<script src="../assets/yui/test-runner.js"></script>
+
+
+
+</body>
+</html>