bonsai

忍者
UI

Beautiful

Elegant theme, capable of exactly matching the look and feel of your site.

Usable

Keyboard, touch, mouse and speech accessible.

Fast

Network-free assets embedded inside the 7k* JavaScript.

Intuitive

Extends what you already know and love about jQuery.

Compatible

Ninja UI works with jQuery back to v1.6 and HTML5 browsers, mobile and desktop**.

Chrome, Safari, Firefox, Internet Explorer, and Opera

Latest

1.0.1 Release Notes

Open

Authors

Jamie R. Hoover and Faisal N. Jawdat

* 6,990 bytes minified and gzipped

** Internet Explorer 9 has non-gradient backgrounds. IE 6-8 have non-transparent backgrounds and square corners. Full HTML5 compatibility for IE is possible with Google Chrome Frame or shims.

katana

Getting Started

Mark a position where you want to have a Ninja button.

  <html>
    ...
    <body>
      ...
      <div id="usageButton"></div>
      ...

Load the Ninja UI plugin, after jQuery of course.

      <script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
      <script src="//ninjaui.com/cdn/1.0.1/jquery.ninjaui.min.js"></script>

Create the Ninja button and dialog variables before the document finishes loading.

      <script>
        (function ($) {
          var
            $dialog,
            $button = $.ninja.button({
              html: '<b>Ninja</b> star...'
            }).select(function () {
              $dialog.attach();
            });
          $dialog = $.ninja.dialog({
            html: '<img src="/img/logo.png"/>'
          }).detach(function () {
            $button.deselect();
          });

When the document is ready, append the Ninja button.

          $(document).ready(function () {
            $('#usageButton').append($button);
          });
        }(jQuery));
      </script>
    </body>
  </html>

The Ninja button is ready for action!

Wait...don't I have to learn some ugly html patterns that will restyle as the page loads?

Nope. :)

shodou

Samples

Here are demonstrations of each object and method of Ninja UI.

All Ninja objects have full mouse, keyboard, touch and JavaScript access. Tab key to next object or Shift-Tab key to previous.

Autocomplete - text input that suggests matching choices as you type, type then pause for list to pop-up, Arrow Down/Up key to change choice, Return/enter key to select, Escape key to dismiss.

Button - stateful button for a variety of uses, Return/enter key to select/deselect.

Dialog - simple overlay for temporary content, Escape key to dismiss.

Drawer - tuck away optional content, Return/enter key to open/close.

Icons - scalable vector symbols

Menu - function launcher in a small package, Return/enter key for list to pop-up, Arrow Down/Up key to change choice, Return/enter key to select, Escape key to dismiss.

Rating - individual and group voting, Return/enter key to select.

Slider - snaps to increments, Arrow Left/Right to change choice.

Tabs - toggle content in a variety of ways, Return/enter key to select.

Autocomplete

Options:
  • css: {hash}
  • placeholder: 'string'
  • values: {hash} | [array]
    • html: 'string'
    • value: 'string'
    • select: function()
Callbacks:
  • values(function(event)
    • event.query = input.val()
Methods:
  • list()
    • values: {hash} | [array]
      • html: 'string'
      • value: 'string'
      • select: function()
    • query: 'string'
var $autocomplete = $.ninja.autocomplete({
  placeholder: 'United States Cities'
}).values(function (event) {
  $.ajax({
    url: 'http://ws.geonames.org/searchJSON',
    dataType: 'jsonp',
    data: {
      country: 'US',
      featureClass: 'P',
      fuzzy: 0,
      maxRows: 10,
      q: event.query
    },
    success: function (data) {
      $autocomplete.list({
        values: $.map(data.geonames, function (item) {
          return {
            html: item.name + ', ' + item.adminName1,
            value: item.name + ', ' + item.adminCode1
          };
        }),
        query: event.query
      });
    },
    error: function (request, status, message) {
      $.error(message);
    }
  });
});

Button

Options:
  • css: {hash}
  • disable: true | false
  • html: 'string'
  • select: true | false
Callbacks:
  • deselect(function())
  • disable(function())
  • enable(function())
  • select(function())
var
  $buttonCheckboxSelect,
  $buttonCheckboxDisable,

  $button = $.ninja.button({
    html: 'Button'
  }).disable(function () {
    $buttonCheckboxSelect.attr({ disabled: 'disabled' });
  }).enable(function () {
    $buttonCheckboxSelect.attr({ disabled: false });
  }).select(function () {
    $buttonCheckboxSelect.attr({ checked: 'checked' });
  }).deselect(function () {
    $buttonCheckboxSelect.attr({ checked: false });
  }),

  $buttonSelect = $.ninja.button({
    html: 'Selected',
    select: true
  }),

  $buttonDisable = $.ninja.button({
    html: 'Disabled',
    disable: true
  });
Methods:
  • deselect()
  • disable()
  • enable()
  • select()
$buttonCheckboxSelect = $('<input/>', {
  type: 'checkbox'
}).change(function () {
  if ($buttonCheckboxSelect.attr('checked')) {
    $button.select();
  } else {
    $button.deselect();
  }
});

$buttonCheckboxDisable = $('<input/>', {
  type: 'checkbox'
}).change(function () {
  if ($buttonCheckboxDisable.attr('checked')) {
    $button.disable();
  } else {
    $button.enable();
  }
});

Dialog

Options:
  • css: {hash}
  • html: 'string'
Callbacks:
  • attach(function())
  • detach(function())
Methods:
  • attach()
  • detach()
var
  $dialogCheckbox,

  $dialog = $.ninja.dialog({
    html: '<div style="padding: 50px">This is <b>Sparta</b>!</div>'
  }).attach(function () {
    $dialogCheckbox.attr({
      checked: 'checked'
    });
  }).detach(function () {
    $dialogCheckbox.attr({
      checked: false
    });
  });

$dialogCheckbox = $('<input/>', {
  type: 'checkbox'
}).change(function () {
  if ($dialogCheckbox.attr('checked')) {
    $dialog.attach();
  } else {
    $dialog.detach();
  }
});

Drawer

Options:
  • css: {hash}
  • html: 'string'
  • select: true | false
  • value: 'string'
Callbacks:
  • deselect(function())
  • select(function())
Method:
  • deselect()
  • select()
var
  $drawer = $.ninja.drawer({
    html: '<div style="padding: 50px">This is <b>HTML</b>.</div>',
    value: 'Drawer'
  }),

  $drawerSelect = $.ninja.drawer({
    html: '<div style="padding: 50px">This is <b>HTML</b>.</div>',
    select: true,
    value: 'Select'
  )};

Icons

Options:
  • css: {hash}
    • fill: 'CSS color'
    • stroke: 'CSS color'
  • value: '- | + | camera | email | go | home | search | spin | star | stop | x'
var
  $icon = $.ninja.icon({
    value: 'star'
  }),

  $iconSpin = $.ninja.icon({
    value: 'spin'
  }),

  $iconStop = $.ninja.icon({
    css: {
      fill: '#c00',
      stroke: '#c00'
    },
    value: stop
  });
Options:
  • css: {hash}
  • html: 'string'
  • values: [array]
    • html: 'string'
    • rule: true | false
    • select: function()
var
  $menuOutput = $('<textarea/>', {
    html: 'Choose a stooge.'
  }),

  $menu = $.ninja.menu({
    html: 'Menu',
    values: [
      {
        html: 'Mo',
        select: function () {
          $menuOutput.html('Oh, a wise guy eh?');
        }
      },
      {
        html: 'Larry',
        select: function () {
          $menuOutput.html('Cut it out, ya puddinhead!');
        }
      },
      {
        html: 'Curly',
        select: function () {
          $menuOutput.html('Hey, Mo!');
        }
      },
      { spacer: true },
      {
        html: 'Shemp',
        select: function () {
          $menuOutput.html(':( Try again.');
        }
      },
      {
        html: 'Joe',
        select: function () {
          $menuOutput.html(':( Try again.');
        }
      },
      {
        html: 'Curly Joe',
        select: function () {
          $menuOutput.html(':( Try again.');
        }
      }
    ]
  });

Rating

Options:
  • css: {hash}
  • average: integer
  • individual: integer
  • values: integer
Callbacks:
  • select(function(event)
    • event.value
var
  $ratingOutput = $('<textarea/>'),

  $rating = $.ninja.rating({
    average: 3
  }).select(function (event) {
    $ratingOutput.html('New rating: ' + event.value + ' stars');
  });

Slider

Options:
  • css: {hash}
  • html: 'string'
  • value: integer
  • values: [array]
    • html: 'string'
    • select: function()
var
  $slider = $.ninja.slider({
    html: 'Volume',
    value: 3,
    values: [
      { html: '<span title="Silence">0 dB</span>' },
      { html: '<span title="Calm breathing">10 dB</span>' },
      { html: '<span title="Very calm room">20-30 dB</span>' },
      { html: '<span title="Normal conversation">40-60 dB</span>' },
      { html: '<span title="TV set at home level">60 dB</span>' },
      { html: '<span title="Passenger car">60-80 dB</span>' },
      { html: '<span title="Hearing damage over time">78 dB</span>' },
      { html: '<span title="Traffic on a busy roadway">80-90 dB</span>' },
      { html: '<span title="Jack hammer">100 dB</span>' },
      { html: '<span title="Hearing damage immediately">120 dB</span>' },
      { html: '<span title="Threshold of pain">130 dB</span>' },
      { html: '<span title="Jet engine">150 dB</span>' },
      { html: '<span title="M1 Garand rifle">168 dB</span>' }
    ]
  });

Tabs

Options:
  • css: {hash}
  • value: integer
  • values: [array]
    • html: 'string'
    • select: function()
  • vertical: true | false
var
  $tabsOutput = $('<textarea/>'),

  poorly = function () {
    $tabsOutput.html('You have chosen... poorly.');
  },

  $tabs = $.ninja.tabs({
    values: [
      {
        html: 'Gold',
        select: function () {
          poorly();
        }
      },
      {
        html: 'Silver',
        select: function () {
          poorly();
        }
      },
      {
        html: 'Wood',
        select: function () {
          $tabsOutput.html('You have chosen... wisely.');
        }
      }
    ]
  }),

  $tabsVertical = $.ninja.tabs({
    value: 2,
    values: [
      {
        html: 'Gold',
        select: function () {
          poorly();
        }
      },
      {
        html: 'Silver',
        select: function () {
          poorly();
        }
      },
      {
        html: 'Wood',
        select: function () {
          $tabsOutput.html('You have chosen... wisely.');
        }
      }
    ],
    vertical: true
  });
kimono

幽玄
Themes

A Clean Start

Ninja UI contains the default theme that you've seen demonstrated on our website. There are no stylesheets to load, because we've compiled the styles into the plugin itself.

The Look You Want

Included in our codebase is an sample theme, called Yugen. Use it as is or as a template to build your own namespaced theme.

More to Come

We encourage the theming community to contribute more premade themes to our codebase. We may even feature them here! :)

Default

Yugen

kakejiku

License

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.

You may obtain a copy of the License at

ninjaui.com/LICENSE.txt

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.