Examples

A simple example, using some prepackaged behaviors:

      <script src="/js/jquery-1.4.js type="text/javascript"></script>
      <script src="/js/ns.min.js" type="text/javascript"></script>

      <script type="javascript">

      Ninja.behavior({
        "form.login_form": Ninja.submitsAsAjax,
        ".alert_notice": Ninja.decays({ lifetime: 5000 })
      })
      </script>

This converts forms with class ‘login_form’ to AJAX equivalents, and makes all elements with class ‘alert_notice’ disappear after five seconds. All NinjaScript predefined behaviors have sensible defaults. If you don’t pass the options object to decays(), it will decay after 10 seconds instead of 5.

A more complex example, showing how you can define your own behaviors:

      <script src="/js/jquery-1.5.js type="text/javascript"></script>
      <script src="/js/ninjascript.js" type="text/javascript"></script>

      <script type="javascript">

      Ninja.behavior({
        "#mail form.new_mail": Ninja.ajax_submission,
        "#message_list .item": {
          transform: function(elem) {
            $(elem).delay(5000).slideUp(600, function(){$(elem).remove()})
          }
          events: {
            click: function(event) {
              $(elem).remove()
            }
          }
        }
        ".has_tooltip": {
          mouseover: function(event){
            myCreateMouseoverTip(elem)
          }
        }
      })
      </script>

That behavior block sets up three behaviors:

1. It converts a normal form (could be a POST, GET, whatever) into an AJAX submission. By default, we’ll put a “busy” overlay over the form until we get a response, and add any error messages to a list of error messages. This behavior is packaged as Ninja.submitsAsAjax
2. It adds a decay behavior to messages, using jQuery effects.
3. It applies a tooltip mouseover effect to elements with a “tooltip” class. We elide the details of what that effect is for the purposes of example.

Notice that behaviors are defined in three different, intermixable styles:

1. Prepackaged, in the form of a method on the Ninja object (available everywhere as Ninja)
2. With a “transform, events, helpers” syntax, which breaks out everything a behavior can do, completly explicitly.
3. With an abbreviated events form, with the assumption that all we want to do is define a series of event handlers (and possibly a transformer)

Shorthand form for events

For simplicity of syntax, NinjaScript allows you to omit the ‘events’ wrapper when defining events, though in complex behaviors including multiple event handlers and a transform we encourage you to include it for clarity. This code:

      Ninja.behavior({
        '.some_class': { events: {
          click: function(event){ ... do something }
        }}
      })

May be rewritten more briefly as:

      Ninja.behavior({
        '.some_class': { click: function(event){ ... do something } }
      })