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

来源：互联网发布：nvidia游戏优化怎么样编辑：程序博客网时间：2024/05/17 08:56

日期：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