日期：2011/12/26
在线演示 本地下载
今天分享一款jQuery的UI插件 - Ninja UI， 这个插件使用jQuery本身的语法来开发界面元素，而且你不需要关注CSS样式相关设定，因为整个CSS样式都被直接写到了插件中，不过坏处是，你需要 在开发前就确定好CSS，同时目前提供俩个类型的主题。插件使用简单，如果你会写jQuery代码，使用起来得心应手，支持的组件不是特别多，不过比较实 用，整个类库非常小，可以考虑使用其中某些组件。
支持组件：
- 自动补齐 autocomplete
- 按钮 button
- 对话框 Dialog
- 抽屉层 drawer
- 图标 icon
- 菜单 menu
- 星级评级 Rating
- 滑动器选择 Slider
- 标签 Tabs
支持主题：
支持浏览器（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: Novice to Ninja: New Kicks And Tricks (2nd Edition) is your fast track to mastering jQuery—the all-conquering JavaScript framework. Used by over half the world’s top 10,000 websites, jQuery ...
### jQuery Novice to Ninja #### 章节一：爱上 jQuery 本章节主要介绍 jQuery 的基本概念、发展历程以及为何 jQuery 成为了前端开发人员钟爱的工具。通过学习本章，读者将了解到 jQuery 如何简化了 JavaScript ...
jQuery UI Datepicker是Ninja Forms中常用的一个组件，用于提供用户友好的日期输入方式。Datepicker不仅提供了日期选择的功能，还支持多种语言和自定义样式，使其成为国际化网站的理想选择。 要实现Datepicker的...
9. **Plugins, Themes, and Advanced Topics**（插件、主题与进阶主题）：引导读者了解如何编写自己的jQuery插件，以及如何使用jQuery UI Themeroller自定义主题等。 #### 附录内容 - **Reference Material**...
- **重点**：不仅介绍了如何开发自己的jQuery插件，还讨论了如何利用主题库（如jQuery UI Themes）来快速美化网站界面；此外，还涉及了一些进阶话题，如性能优化等。 #### 附录内容 - **A. Reference Material**：...
7. **插件生态系统**：jQuery拥有庞大的插件生态系统，如jQuery UI提供各种用户界面组件，Bootstrap框架基于jQuery构建，提供响应式布局和UI组件。 8. **版本迭代与兼容性**：jQuery自1.0版本以来经历了多次迭代，...
1. jQuery Pagination：这是一个轻量级的分页插件，提供多种样式和配置选项，如Bootstrap风格的分页。 2. jQuery Pager：这个插件简单易用，支持无限滚动分页，适合小规模项目。 3. DataTables：虽然它主要是一个...
1、第一次尝试Web UI开发应用 2、进阶学习快手 3、制作QQ机器人，应用于PHP或者直接数据库交互 【分享包】 1、快手项目包（aau、htm、js、css、picture） 2、Png源文件以及QQ素材 【开发用的工具有】 1、...
书中还会介绍插件的使用，jQuery社区提供了大量插件，如Bootstrap、jQuery UI等，它们扩展了jQuery的功能，如弹出框、日期选择器和轮播图等。学习如何正确引入和使用这些插件是提升开发效率的重要一环。 另外，...
10. **"jQuery: Novice to Ninja"**：适合初学者的jQuery教程，通过实例帮助读者快速掌握这个强大的JavaScript库，从而更高效地实现交互效果。 此外，除了书籍，还有在线教程、设计社区、博客和视频课程等资源可供...
8. **依赖注入（Dependency Injection）**：一种设计模式，用于管理组件间的依赖关系。 9. **过滤器（Filters）**：对数据进行格式化显示。 10. **动画（Animation）**：为应用提供动画效果。 11. **部署和国际化...
非常不错的书 Preface . . . . . . . . ....Who Should Read This Book ....Conventions Used ....Code Samples ....Tips, Notes, and Warnings ....Supplementary Materials .... ....Chapter 1 Falling In Love With AngularJS ....
在Web环境下，如文件“WebControlTest”可能暗示的，ComboBox通常通过HTML `<select>` 标签配合JavaScript或jQuery插件实现类似的功能。在ASP.NET等服务器端技术中，ComboBox被封装为服务器控件，提供更丰富的功能和...