今天分享一款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%;}
时间： 2024-08-01 06:00:10