OJ Themes

Demonstrating theming feature of OJ to dynamically change the way objects look.

by Evan Moran

HTML

<script src="http://ojjs.org/download/oj/latest/oj.js"></script>
<script src="http://ojjs.org/download/oj.TwitterButton/latest/oj.TwitterButton.js"></script>

JavaScript

// Export OJ namespace globally
oj.useGlobally()

// Define two Table themes:
// 'lines' and 'stripes'
defineThemes()

$('body').oj(function(){
    
    // Use the theme
    var myTable = Table(
        ['Batman','Bruce Wayne'],
        ['Spiderman','Peter Parker'],
        ['Thor','Just Thor.']
    );
    
    ListBox({
        options:['Choose a theme','lines','stripes'],
        change:function(){
            myTable.theme = this.value;
    }})
});

// Imagine this is an external file or plugin
// that designers use to customize your site's 
// look and feel!
function defineThemes(){
        
    // Define the Table theme 'lines'
    Table.theme('lines', {
      borderCollapse:'collapse',
      borderSpacing:0,
      'tr:not(:last-child)':{
        borderBottom:'1px solid orange',
        fontFamily:'sans-serif'
      },
      td:{
        padding:'10px',
        minWidth:90
      }  
    });
    
    Table.theme('stripes', {
      borderCollapse:'collapse',
      borderSpacing:0,
      border:'1px solid orange',
      'tr:nth-child(even)':{
        backgroundColor:'orange'
      },
      td:{
        padding:'10px',
        minWidth:90
      }  
    });
}