帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:FLEX  component  Stylish  angular  notification  COM  
Angular.js component for stylish and flexible top bar notifications.

  • 源代碼名稱:ng-notifications-bar
  • 源代碼網址:http://www.github.com/alexbeletsky/ng-notifications-bar
  • ng-notifications-bar源代碼文檔
  • ng-notifications-bar源代碼下載
  • Git URL:
    git://www.github.com/alexbeletsky/ng-notifications-bar.git
  • Git Clone代碼到本地:
    git clone http://www.github.com/alexbeletsky/ng-notifications-bar
  • Subversion代碼到本地:
    $ svn co --depth empty http://www.github.com/alexbeletsky/ng-notifications-bar
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • ng-notifications-bar

    angular.jsAnimate.css 基於組件的時尚靈活的應用程序通知。

    演示工具

    概述

    Web應用程序要求通知用戶正在進行的事件。 常見的情況是錯誤,成功完成通知 等等 與 ng-notifications-bar 一樣簡單,

    <body>
     <notifications-barclass="notifications"></notifications-bar>
    . . .

    安裝

    Npm安裝,

    $ npm install ng-notifications-bar --save

    或者 Bower 安裝

    $ bower install ng-notifications-bar --save

    更新腳本和樣式部分或者使用browserified應用程序的要求。

    <linkrel="stylesheet"href="bower_components/ng-notifications-bar/dist/ngNotificationsBar.min.css"/>
    <scriptsrc="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <scriptsrc="bower_components/ng-notifications-bar/dist/ngNotificationsBar.min.js"></script>

    如果你使用 Grunt,wiredep 應該為你注入所需的angular-sanitize.js

    對於 browserify 應用程序,在你的應用程序模塊中需要 MODULE,

    require('ng-notifications-bar');

    如果在項目中使用 sass,則僅導入 ngNotificationsBar 樣式是可能的,

    @import"../../node_modules/ng-notifications-bar/sass/ngNotificationsBar";

    在應用程序模塊中

    angular.module('app', ['ngNotificationsBar', 'ngSanitize']);

    如果不需要HTML支持,則可以省略 ngSanitize

    API

    MODULE 由元素- 指令,服務和提供者組成。

    指令

    notifications-bar 元素指令,應放置一次,通常在 <body> 打開標記之後。

    <notifications-barclass="notifications"></notifications-bar>

    如果你使用 icon 庫除Glyphicons以外的關閉按鈕( 例如 Font Awesome ),請包含 closeIcon 屬性。

    <notifications-barclass="notifications"closeIcon="fa fa-times-circle"></notifications-bar>

    默認為 glyphicon-remove icon,所以如果你沒有定義 closeIcon 屬性,那麼不要忘記導入 Glyphicons 。

    可以作為屬性使用,也可以使用

    <divnotifications-barclass="notifications"></divnotifications-bar>

    電子郵件服務

    notification 服務由控制器( 或者其他指令) 使用,以顯示通知。

    app.controllers('app', function ($scope, api, notifications) {
     api.get({resource:'tasks'})
    . then(function (tasks) {
     $scope.tasks= tasks;
     }, function (error) {
     notifications.showError({message:error.message});
     });
     $scope.submitTask=function () {
     api.post({resource:'tasks'}, {description:this.description})
    . then(function () {
     notifications.showSuccess({message:'Your task posted successfully'});
     }, function (error) {
     notifications.showError({message:'Oh no! Task submission failed, <em>please try again.</em>'});
     });
     }
    });

    提供程序

    notificationsConfigProvider 用於覆蓋某些通知欄默認值。

    app.config(['notificationsConfigProvider', function (notificationsConfigProvider) {
     // auto hidenotificationsConfigProvider.setAutoHide(true)
     // delay before hidenotificationsConfigProvider.setHideDelay(3000)
    }])

    設置

    可以在 MODULE 配置中設置整個通知欄 MODULE,並在控制器中分別設置每個通知

    可用選項:

    • 自動隱藏
    • hideDelay
    • acceptHTML
    • autoHideAnimation
    • autoHideAniationDelay

    請注意 note,HTML支持僅在全局級別配置。 如果要支持 HTML,請確保注入了 'ngSanitize' 依賴項。

    var app =angular.module('app', ['ngNotificationsBar', 'ngSanitize']);

    配置期間的

    app.config(['notificationsConfigProvider'], function (notificationsConfigProvider) {
     // auto hidenotificationsConfigProvider.setAutoHide(true);
     // delay before hidenotificationsConfigProvider.setHideDelay(3000);
     // support HTMLnotificationsConfigProvider.setAcceptHTML(false);
     // Set an animation for hiding the notificationnotificationsConfigProvider.setAutoHideAnimation('fadeOutNotifications');
     // delay between animation and removing the nofiticationnotificationsConfigProvider.setAutoHideAnimationDelay(1200);
    }])

    控制器中的 Override

    app.controller('main', function ($scope, notifications) {
     $scope.showError=function () {
     notifications.showError({
     message:'Oops! Something bad just happened! (hides faster)',
     hideDelay:1500, //ms hide:true//bool });
     };
    });

    插件開發

    安裝 bower 依賴項,

    $ bower install

    安裝 npm 依賴項,

    $ npm install

    運行 grunt 構建,

    $ grunt

    因此,創建 /dist 文件夾,可以使用 .js.css 文件。

    項目目前沒有測試,所以運行 example 並檢查功能,

    $ grunt start:example

    許可證

    版權所有( c ) 2014,alexander.beletsky@gmail.com

    MIT



    文章标签:COM  angular  component  notification  FLEX  Stylish  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语