`
buliedian
  • 浏览: 1191146 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

日期：2011/12/26

分享一款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%;
}
0
顶
0
踩
分享到：
| 深入浅出SQL之左连接、右连接和全连接
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics