YUI Library JavaScript DHTML


            



    
TabView Integration

/*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;
}












TabView Integration


  Integrating DataTable with the TabView widget.




    
        Start Tab
        DataTable Tab

        Another Tab

                
    
        Welcome! There is a DataTable in the second Tab.


        This is another Tab.





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
        };
    }();
});





   
   
yui_2.7.0b.zip( 4,431 k)