分享一款jQuery的UI插件:Ninja UI

日期:2011/12/26

分享一款jQuery的UI插件:Ninja UI by gbin1.com

在线演示  本地下载

今天分享一款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({width:'-=30px'});
}
},
{
select: function(){
$('#avaimg').animate({width:'100px'});
}
},
{
select: function(){
$('#avaimg').animate({width:'+=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%;
}

你可能感兴趣的:(jquery)