欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-05-19 20:25:56
...

日期：2011/12/26

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

在线演示  本地下载

今天分享一款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%;
}

上一篇： 使用POI进行Excel文件下载的示例工程  

下一篇： POJ 2255

推荐阅读