|
NinjaUser Interface |
the jQuery plugin for lethal interaction |
|
|
|
NinjaUser Interface |
the jQuery plugin for lethal interaction |
|
Elegant theme, capable of exactly matching the look and feel of your site.
Keyboard, touch, mouse and speech accessible.
Network-free assets embedded inside the 7k* JavaScript.
Extends what you already know and love about jQuery.
Ninja UI works with jQuery back to v1.6 and HTML5 browsers, mobile and desktop**.
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.
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. :)
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.
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);
}
});
});
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
});
$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();
}
});
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();
}
});
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'
)};
var
$icon = $.ninja.icon({
value: 'star'
}),
$iconSpin = $.ninja.icon({
value: 'spin'
}),
$iconStop = $.ninja.icon({
css: {
fill: '#c00',
stroke: '#c00'
},
value: stop
});
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.');
}
}
]
});
var
$ratingOutput = $('<textarea/>'),
$rating = $.ninja.rating({
average: 3
}).select(function (event) {
$ratingOutput.html('New rating: ' + event.value + ' stars');
});
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>' }
]
});
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
});
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.
Included in our codebase is an sample theme, called Yugen. Use it as is or as a template to build your own namespaced theme.
We encourage the theming community to contribute more premade themes to our codebase. We may even feature them here! :)
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
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.
