My favorites ▼ | Sign in
Project Home Downloads Wiki Issues Source
Search
for
API  

Installation

Assuming you have already installed devbarjs, you can configure the module and use the interface as you see fit.

For more information on how to install devbarjs, visit the installation wiki.

Namespace

devbarjs's namespace is simply DevBar. Sadly, Microsoft, and these guys also use this name but nobody seems to have captured the JavaScript namespace.

DevBar is a static class. 

DevBar; // Yay!

Attributes

config

  • Default: {}
  • An associative array (hash) that will be passed to the instantiation of the YUI logger (see configs). By default, it is empty but will adhere to the 2.7.0 interface. 
    • DevBar.config = {
    width         : "20px", 
    height        : "30em", 
    newestOnTop   : false, 
    footerEnabled : false 
};
DevBar.load();

active

  • Default: true
  • When true will enable DevBar
  • When false will do nearly nothing. Will absolutely not touch the page DOM in any way. 
    • DevBar.active = false;
DevBar.load();

verbose

  • Default: true
  • When true will popup a styled message in the bottom-right corner of the browser with the last known message styled appropriately for the level for a duration of 5 seconds or until you mouse over the popup.
  • When false will not do what is stated above. 
    • DevBar.verbose = false;
DevBar.load();

invade

  • Default: true
  • When true will
    • Change the YUI Logger window to include a toggle for the verbose attribute
    • Add a Close button that will hook into the DevBar interface
    • Change the behavior of the Clear button to interface with DevBar
    • Add a log method to jQuery so you can log to any object as administered by the jQuery interface. 
      • DevBar.invade = true;
DevBar.load();

/* Using jQuery syntax to create a paragraph that 
 * will attach to <body>, hiding it, attaching a
 * "hello_world_css_class" CSS class and logging
 * to the DevBar extended logger all the while.
 * What a treat!
 */

$("<p>Hello World</p>")
    .addClass( 'hello_world_css_class' )
    .log( 'Paragraph added but we are to hide it.' )
    .hide()
    .appendTo( $( body ) );

Methods

load

  • Required: Yes - Must be called once per page to render required objects.
  • Context: After all attributes have been changed as desired.
  • Arguments: none
  • Description:
    • Can be called from anywhere as it relies on the jQuery ready method to prepare its self. 
      • // Can be the window.onload event
window.onload = DevBar.load();
      <!-- 
    Or could be randomly placed in the body, it doesn't matter.  Everywhere is safe.
-->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>DevBar Example</title>
        <link rel="stylesheet" href="devbar-min.css" type="text/css" media="all" />
        <script type="text/javascript" src="devbar-min.js"></script>
    </head>
    <body>
        <script type="text/javascript>
            DevBar.load():
        </script>    
    </body>
</html>

log

  • Required: No
  • Context: Any
  • Arguments:
    • /message/ : The message to be logged
    • /level/ (optional) : Either info (default), warn or error and will style the messages with appropriate color.
  • Description:
    • Will log the message to the YUI logger and the quick-view pane if verbose is set. 
      • DevBar.verbose = true; // Default and optional
DevBar.load();
DevBar.log( 'I logged', 'info' ); // Although 'info' is assumed

register

  • Required: No
  • Context: Before load is called.
  • Arguments:
    • Associative array
  • Description:
    • Will register actions onto the bar.
    • This is the same method that is called internally to add the Logger functionality.
    • Two keys, logger and links where logger is a String type and links is an array of jQuery objects to append.
      • The following example is a literal copy of the code-base of how the logger is appended to the dev bar. It is using the jQuery API which is required (as of this writing). 
        • DevBar.register( { 
    label : 'Logger',
    links : [
        $('<a>Clear</a>')
            .attr( 'href', 'javascript:void(0);' )
            .click( DevBar.clear ),

        $('<span>| </span>'),

        $('<a>Open</a>')
            .attr( 'href', 'javascript:void(0);' )
            .click( DevBar.open )
            .attr( 'id', 'devbar_openlink' )
            .hide(),
    
        $('<a>Close</a>')
            .attr( 'href', 'javascript:void(0);' )
            .click( DevBar.close )
            .attr( 'id', 'devbar_closelink' )
            .show()
    ],
} );

There are more that are available but are intentionally /undocumented/. Of course, by saying that, does that make them documented? hmmmm...


► Sign in to add a comment
Powered by Google Project Hosting