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

标签：分享 jquery ui | 发表时间：2011-12-26 17:25 | 作者：jjfat

出处：http://blog.csdn.net

日期：2011/12/26 来源： GBin1.com

分享一款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的UI插件：Ninja UI

作者：jjfat 发表于2011-12-26 17:25:22 原文链接

阅读：22 评论：0 查看评论

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

如何使用？

HTML

CSS样式

相关 [分享 jquery ui] 推荐：

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

[转] jQuery ui框架

jQuery Tools：Web开发必备的 jQuery UI 库

免费的 jQuery UI 主题集合

自己实现的基于jquery的UI组件库

【分享】jQuery 表格Table插件汇总

分享20个很不错的UI图标集资源

【界面设计】一组UI元素分享

推荐两个iOS应用UI界面分享网站

分享10种针对不同类型的移动APP UI设计模式

相关文章

订阅