jQuery Noty

🌙
手机阅读
本文目录结构

插件 jQuery.noty 中文 API 文档

noty 是一个 jQuery 的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件。

Github:https://github.com/needim/noty

<p align="center">
  <a href="http://ned.im/noty?ref=readme">
    <img src="http://ned.im/noty/_media/noty-v3-logo.png" width=200 height=70>
  </a>

  <p align="center">
    Dependency-free notification library.
    <br>
    <a href="http://ned.im/noty"><strong>Documentation &raquo;</strong></a>
  </p>

  <p align="center">
    <a href="https://github.com/needim/noty/releases"><img src="https://img.shields.io/github/release/needim/noty.svg" alt="GitHub release"></a>
    <a href="https://bower.io/"><img src="https://img.shields.io/bower/v/noty.svg" alt="Bower version"></a>
    <a href="https://www.npmjs.com/package/noty"><img src="https://img.shields.io/npm/v/noty.svg" alt="NPM version"></a>
    <a href="https://packagist.org/packages/needim/noty"><img src="https://img.shields.io/packagist/v/needim/noty.svg" alt="Packagist version"></a>
    <a href="https://cdnjs.com/libraries/noty"><img src="https://img.shields.io/cdnjs/v/noty.svg" alt="CDNJS version"></a>
    <br>
    <img src="https://img.shields.io/david/needim/noty.svg" alt="Dependencies">
    <img src="https://img.shields.io/david/dev/needim/noty.svg" alt="Dev Dependencies">
    <br>
    <a href="https://travis-ci.org/needim/noty"><img src="https://img.shields.io/travis/needim/noty/master.svg" alt="Travis"></a>
    <a href="https://www.npmjs.com/package/noty"><img src="https://img.shields.io/npm/dm/noty.svg?label=npm%20downloads" alt="NPM Downloads"></a>
    <a href="https://github.com/needim/noty/graphs/contributors"><img src="https://img.shields.io/github/contributors/needim/noty.svg" alt="Contributors"></a>
  </p>
</p>

介绍

NOTY 是一个通知库,可以轻松创建警报 - 成功 - 错误 - 警告 - 信息 - 确认消息,以替代标准警报对话框。

通知可以放置在; 顶部 - 左上 - topCenter - topRight - 中心 - centerLeft - centerRight - 底 - BOTTOMLEFT - bottomCenter - bottomRight

API 中还有许多其他选项可以自定义文本,动画,按钮等等。

它还具有用于按钮的各种回调,即打开,关闭通知和队列控制。

特征

  • 无依赖
  • 具有 Service Worker 支持的 Web 推送通知
  • UMD
  • 命名队列系统
  • 具有 11 种布局,5 种通知样式,5 种以上主题
  • 自定义容器(内联通知)
  • 确认通知
  • TTL
  • 进度条指示器,用于定时通知
  • 支持CSS动画, animate.css, mojs, bounce.js, velocity 和其他动画库
  • 2 个关闭选项:单击,按钮
  • API 和回调
  • 自定义模板
  • 文档可见性控制(模糊,焦点)
<table>
  <tr>
    <td vlign="center">
      <a target="_blank" href="https://pusher.com/?utm_source=needim&utm_medium=paid&utm_campaign=needim">
        <img src="http://ned.im/noty/_media/pusher_logo_dark.png" width="160" alt="">
      </a>
    </td>
    <td vlign="center">
      <a target="_blank" href="https://www.jetbrains.com?ref=notyjs">
        <img src="http://ned.im/noty/_media/logo_JetBrains_4.svg" width="80" alt="">
      </a>
    </td>
    <td vlign="center">
      <a target="_blank" href="https://www.browserstack.com?ref=notyjs">
        <img src="http://ned.im/noty/_media/browserstack.svg" width="220" alt="">
      </a>
    </td>
    <td vlign="center">
      <a target="_blank" href="https://goo.gl/ttbzE4">
        <img src="http://ned.im/noty/_media/site_splat.svg" width="235" alt="">
      </a>
    </td>
  </tr>
</table>

文档

英文文档在这里:http://ned.im/noty

基本用法

import Noty from 'noty';

new Noty({
    text: 'Notification text'
}).show();

// or

const Noty = require('noty');

new Noty({
    text: 'Notification text'
}).show();

开发

$ npm run dev
$ npm test
$ npm run build
$ npm run browserstack
$ npm run serve-docs
开发环境
  • Standard
  • Prettier
  • ES6 & Babel & Webpack
  • Sass
  • Autoprefixer
  • QUnit
  • BrowserStack
  • Pre-commit tests
  • Travis CI

JavaScript Style Guide

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了