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

posted @ 2011-12-26 17:32 igeekbar 閱讀(4701) 評論(12) 收藏舉報

刷新頁面返回頂部

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

如何使用？

HTML

CSS樣式

公告

中文互聯： GBin1.com | RSS訂閱 | 郵件訂閱 | 手機訂閱