日期：2011/12/26
今天分享一款jQuery的UI插件 - Ninja UI， 这个插件使用jQuery本身的语法来开发界面元素，而且你不需要关注CSS样式相关设定，因为整个CSS样式都被直接写到了插件中，不过坏处是，你需要 在开发前就确定好CSS，同时目前提供俩个类型的主题。插件使用简单，如果你会写jQuery代码，使用起来得心应手，支持的组件不是特别多，不过比较实 用，整个类库非常小，可以考虑使用其中某些组件。
支持组件：
- 自动补齐 autocomplete
- 按钮 button
- 对话框 Dialog
- 抽屉层 drawer
- 图标 icon
- 菜单 menu
- 星级评级 Rating
- 滑动器选择 Slider
- 标签 Tabs
支持主题：
- 缺省
- DOJO
支持浏览器（HTML5浏览器）：
- Chrome
- Safari
- Firefox
- Internet Explorer*
- Opera
注释：IE9不支持Gradients，IE6-8不支持透明背景及其圆角
如何使用？
倒入类库：
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.ninjaui.min.js"></script>
在document加载完成之前来创建Ninja相关组件：
(function ($) {
...
$(document).ready(function () {
$('#tabs').append($tabs);
$('#city').append($autocompleteExample);
$('#usageButton').append($button);
$('#ava').append($slider);
$('#poli').append($policy);
});
}(jQuery));
创建各种组件：
var $autocompleteExample = $.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) {
$autocompleteExample.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);
}
});
});
$tabs = $.ninja.tabs({
values: [
{
html: '<div style="padding:5px">Full registration</div>',
select: function () {
$('#extra').fadeIn();
}
},
{
html: '<div style="padding:5px">Quick registration</div>',
select: function () {
$('#extra').fadeOut();
}
}
]
});
$policy = $.ninja.drawer({
html: '<div style="padding: 20px">Welcome to <a href="http://gbin1.com">gbin1.com</a>, please pay attention to our community polices. thanks!</div>',
value: 'GBin1 Policy',
select: true
});
var $dialog, $button = $.ninja.button({
html: '<div style="padding:5px">Register Now</div>'
}).select(function () {
$dialog.attach();
});
$dialog = $.ninja.dialog({
html: '<div style="padding: 50px">Congratulations! welcome to GBin1.com</div>'
}).detach(function () {
$button.deselect();
});
var
$slider = $.ninja.slider({
value: 1,
values: [
{
select: function(){
$('#avaimg').animate({'-=30px'});
}
},
{
select: function(){
$('#avaimg').animate({'100px'});
}
},
{
select: function(){
$('#avaimg').animate({'+=30px'});
}
}
]
});
在将生成的组件添加到DOM中：
$(document).ready(function () {
$('#tabs').append($tabs);
$('#city').append($autocompleteExample);
$('#usageButton').append($button);
$('#ava').append($slider);
$('#poli').append($policy);
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Ninja UI Registration Demo</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Ninja UI Registration Demo" />
<meta name="keywords" content="jQuery UI, jQuery plugin, GBin1.com" />
<meta name="author" content="Terry li - GBin1.com" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="sitebody">
<header>
<nav>
<span id="tabs"></span>
</nav>
</header>
<section>
<h1>Ninja UI Registration Demo</h1>
<p id=""><label>Email:</label> <input type="text"></p>
<p id="pwd"><label>Password:</label> <input type="password"></p>
<div id="extra">
<p id="city"><label>City:</label></p>
<p id="ava"><label>Avatar size:</label></p>
<p id="avaimgwrap"><img id="avaimg" src="images/logo.png"></p>
<p id="poli"></p>
</div>
<p id="usageButton"></p>
</section>
<footer>
<p>copywrite 2011 by gbin1.com</p>
</foorer>
</div>
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.ninjaui.min.js"></script>
<script src="js/gbin1.js"></script>
</body>
</html>
CSS样式
/* General Demo Style */
body{
background:#101010;
color: #333;
font-size: 14px;
padding: 0;
margin: 0;
}
h1{
font-size:25px;
font-weight: bold;
padding: 10px 0px 10px 5px;
margin: 0px;
color: #CCC;
}
*{
position: relative;
padding: 0;
margin: 0;
}
#sitebody{
height: 120%;
}
header{
width: 570px;
padding: 50px 5px 20px;
margin: 0px auto;
}
footer{
width: 560px;
padding: 20px 0px 450px;
margin: 0px auto;
}
section{
position:relative;
width: 560px;
margin: 0px auto;
padding: 15px 5px 25px;
border: 1px solid #444;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
background: #222;
height: 650px;
color: #666;
}
input {
margin: 10px 0;
width: 220px;
border: 1px solid #000000;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
padding: 5px 17px 5px 5px;
}
label{
width: 100px;
display: block;
margin: 10px 0;
float: left;
padding: 5px 0;
}
#poli{
width:550px;
}
#ava span span{
padding-left: 90px;
}
#avaimg{
width: 100px;
}
#usageButton{
padding: 10px 5px;
}
clr{
clear: both;
}
section p{
padding: 5px;
float: left;
width: 100%;
}