JavaScript DHTML/YUI Library/TabView

Материал из Web эксперт
Перейти к: навигация, поиск

Customize the TabView skin.

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Skinning TabView</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/tabview/assets/skins/sam/tabview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/tabview/tabview-min.js"></script>

</head> <body class=" yui-skin-sam">

Skinning TabView

This demonstrates how to customize the TabView skin.

  • <a href="#tab1">Tab One Label</a>
  • <a href="#tab2">Tab Two Label</a>
  • <a href="#tab3">Tab Three Label</a>

Tab One Content

Tab Two Content

Tab Three Content

<script> (function() { 

   var tabView = new YAHOO.widget.TabView("demo");
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Dynamically remove tabs from a TabView widget.

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Removing Tabs</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/tabview/assets/skins/sam/tabview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/tabview/tabview-min.js"></script>


<style type="text/css"> .yui-navset button { 

   position:absolute;
   top:0;
   right:0;

} </style>

</head> <body class=" yui-skin-sam">

Removing Tabs

This demonstrates how to dynamically remove tabs from a TabView widget.

  • <a href="#tab1">Tab One Label</a>
  • <a href="#tab2">Tab Two Label</a>
  • <a href="#tab3">Tab Three Label</a>

Tab One Content

Tab Two Content

Tab Three Content

<script> (function() { 

   var tabView = new YAHOO.widget.TabView("demo");
   
   var removeTab = function() {
       tabView.removeTab(tabView.get("activeTab"));
   };
   var button = document.createElement("button");
   button.innerHTML = "remove tab";
   YAHOO.util.Event.on(button, "click", removeTab);
   tabView.appendChild(button);
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Editor inside a Tabview Control

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Editor inside a Tabview Control</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/tabview/assets/skins/sam/tabview.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/editor.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/tabview/tabview-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/editor-min.js"></script>

</head> <body class=" yui-skin-sam">

Editor inside a Tabview Control

This example demonstrates how to render an Editor inside of a <a href="http://developer.yahoo.ru/yui/tabview/">TabView Control</a>.

<style> .yui-content { 

   height: 250px;

} .yui-content textarea { 

   visibility: hidden;

} </style>

<script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event,
       editorTab = null,
       myEditor = null;

   YAHOO.log("Create the Tabview..", "info", "example");
   var myTabs = new YAHOO.widget.TabView("e_tabs");
 
   YAHOO.log("Add the first tab..", "info", "example");
   myTabs.addTab( new YAHOO.widget.Tab({
       label: "Tab One Label",
content: "

Tab One Content

", 
       active: true
   }));
   
   YAHOO.log("Add the editor tab..", "info", "example");
   editorTab = new YAHOO.widget.Tab({
       label: "Editor Tab",
       content: "<textarea id="editor">This is the editor content.. You can edit me!</textarea> "
   });
   myTabs.addTab(editorTab);
   
   YAHOO.log("Add the third tab..", "info", "example");
   myTabs.addTab( new YAHOO.widget.Tab({
       label: "Tab Three Label",
content: "

Tab Three Content

" 
   }));
   
   myTabs.on("activeTabChange", function(ev) {
       YAHOO.log("Active tab Change, check to see if we are showing the editor..", "info", "example");
        if (ev.newValue == editorTab) {
           var myConfig = {
               height: "100px",
               width: "600px",
               animate: true,
               dompath: true
           };
           if (!myEditor) {
               YAHOO.log("Create the Editor..", "info", "example");
               myEditor = new YAHOO.widget.Editor("editor", myConfig);
               myEditor.render();
           }
        }
   });

})(); </script>


</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Getting Content from an External Source for Tab

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Getting Content from an External Source</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/tabview/assets/skins/sam/tabview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/tabview/tabview-min.js"></script>


<style type="text/css"> .yui-navset div.loading div { 

   background:url(yui_2.7.0b-assets/tabview-assets/loading.gif) no-repeat center center;
   height:8em; /* hold some space while loading */

}

  1. example-canvas h2 {padding: 0 0 .5em 0;}

</style>

</head> <body class=" yui-skin-sam">

Getting Content from an External Source

This demonstrates how to load Tab content from an external data source.


Browser News

<script type="text/javascript"> (function() { 

   var tabView = new YAHOO.widget.TabView();
   
   tabView.addTab( new YAHOO.widget.Tab({
       label: "Opera",
       dataSrc: "yui_2.7.0b-assets/tabview-assets/news.php?query=opera+browser",
       cacheData: true,
       active: true
   }));
   tabView.addTab( new YAHOO.widget.Tab({
       label: "Firefox",
       dataSrc: "yui_2.7.0b-assets/tabview-assets/news.php?query=firefox+browser",
       cacheData: true
   }));
   tabView.addTab( new YAHOO.widget.Tab({
       label: "Explorer",
       dataSrc: "yui_2.7.0b-assets/tabview-assets/news.php?query=microsoft+explorer+browser",
       cacheData: true
   }));
   tabView.addTab( new YAHOO.widget.Tab({
       label: "Safari",
       dataSrc: "yui_2.7.0b-assets/tabview-assets/news.php?query=apple+safari+browser",
       cacheData: true
   }));
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");
   tabView.appendTo("container");

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


How to dynamically add tabs to a TabView widget.

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Adding Tabs</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/tabview/assets/skins/sam/tabview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/tabview/tabview-min.js"></script>


<style type="text/css"> .yui-navset button { 

   position:absolute;
   top:0;
   right:0;

} </style>

</head> <body class=" yui-skin-sam">

Adding Tabs

This demonstrates how to dynamically add tabs to a TabView widget.

  • <a href="#tab1">Tab One Label</a>
  • <a href="#tab2">Tab Two Label</a>
  • <a href="#tab3">Tab Three Label</a>

Tab One Content

Tab Two Content

Tab Three Content

<script> (function() { 

   var tabView = new YAHOO.widget.TabView("demo");
   
   var addTab = function() {
       var labelText = window.prompt("enter the tab label");
       var content = window.prompt("enter the tab content");
       if (labelText && content) {
           tabView.addTab( new YAHOO.widget.Tab({ label: labelText, content: content }) );
       }
   };
   var button = document.createElement("button");
   button.innerHTML = "add tab";
   YAHOO.util.Event.on(button, "click", addTab);
   tabView.appendChild(button);
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Integrating DataTable with the TabView widget.

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>TabView Integration</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/tabview/assets/skins/sam/tabview.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/datatable/assets/skins/sam/datatable.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/tabview/tabview-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datatable/datatable-min.js"></script>

</head> <body class=" yui-skin-sam">

TabView Integration

Integrating DataTable with the TabView widget.


  • <a href="#tab1">Start Tab</a>
  • <a href="#tab2">DataTable Tab</a>
  • <a href="#tab3">Another Tab</a>

Welcome! There is a DataTable in the second Tab.

This is another Tab.

<script type="text/javascript" src="yui_2.7.0b-assets/datatable-assets/js/data.js"></script> <script type="text/javascript"> YAHOO.util.Event.addListener(window, "load", function() { 

   YAHOO.example.TabView = function() {
       var myColumnDefs = [
           {key:"id", sortable:true},
           {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
           {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true},
           {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true},
           {key:"title", sortable:true},
           {key:"description"}
       ];
       var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
       myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
       myDataSource.responseSchema = {
           fields: ["id","date","quantity","amount","title","description"]
       };
       
       var myDataTable = 
               new YAHOO.widget.DataTable("dtcontainer", myColumnDefs, myDataSource,{scrollable:true,width:"100%"});
               
       var myTabView = new YAHOO.widget.TabView("tvcontainer");
       myTabView.getTab(1).addListener("click", function() {myDataTable.onShow()});        
       return {
           oDS: myDataSource,
           oDT: myDataTable,
           oTV: myTabView
       };
   }();

}); </script>


</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Put DataTable into a TabView widget.

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>TabView Integration</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/tabview/assets/skins/sam/tabview.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/datatable/assets/skins/sam/datatable.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/tabview/tabview-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datatable/datatable-min.js"></script>

</head> <body class=" yui-skin-sam">

TabView Integration

Integrating DataTable with the TabView widget.


  • <a href="#tab1">Start Tab</a>
  • <a href="#tab2">DataTable Tab</a>
  • <a href="#tab3">Another Tab</a>

Welcome! There is a DataTable in the second Tab.

This is another Tab.

<script type="text/javascript" src="yui_2.7.0b-assets/datatable-assets/js/data.js"></script> <script type="text/javascript"> YAHOO.util.Event.addListener(window, "load", function() { 

   YAHOO.example.TabView = function() {
       var myColumnDefs = [
           {key:"id", sortable:true},
           {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
           {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true},
           {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true},
           {key:"title", sortable:true},
           {key:"description"}
       ];
       var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
       myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
       myDataSource.responseSchema = {
           fields: ["id","date","quantity","amount","title","description"]
       };
       
       var myDataTable = 
               new YAHOO.widget.DataTable("dtcontainer", myColumnDefs, myDataSource,{scrollable:true,width:"100%"});
               
       var myTabView = new YAHOO.widget.TabView("tvcontainer");
       myTabView.getTab(1).addListener("click", function() {myDataTable.onShow()});        
       return {
           oDS: myDataSource,
           oDT: myDataTable,
           oTV: myTabView
       };
   }();

}); </script>


</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/YUI_Library/TabView&oldid=4021»