OJ BulletList

Manipulating the BuilletList object with OJ.

by Evan Moran

HTML

<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="http://ojjs.org/download/oj/latest/oj.js"></script>

JavaScript

// Export everything in `oj` globally
oj.useGlobally();

// Insert the following into body
$('body').oj(function(){
    
    // Creates HTML with OJ
    h1('OJ Bullet Lists');
    p('Lets make a bulleted list:');
    
    // Create CSS with OJ
    css({
        'li:nth-child(odd)':{
            color:'orange'
        }
   });
    
    // Create a BulletList object with OJ
    var myList = BulletList(
        'Item 1',
        'Item 2',
        'Item 3');
    
    // Create a Button object and binds JS click event
    Button('Add Item', {click:function(){
        myList.push('New Item ' + (myList.count + 1));    
    }});
    
    // Create a Button object and binds JS click event
    Button('Move Item', {click:function(){
        myList.move(0,-1);  
    }});
    
});