• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

FezVrasta/snackbarjs: Create Material Design snackbars and toasts with ease.

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称（OpenSource Name）：

FezVrasta/snackbarjs

开源软件地址(OpenSource Url)：

https://github.com/FezVrasta/snackbarjs

开源编程语言(OpenSource Language)：

JavaScript 71.9%

开源软件介绍(OpenSource Introduction)：

SnackbarJS

SnackbarJS is a lightweight and jQuery powered plugin made to work just like the tooltips in Bootstrap.

Include it in your html page with:

<head>
    <!-- core CSS of SnackbarJS, find it in /dist -->
    <link href=snackbar.min.css rel=stylesheet>
    <!-- the default theme of SnackbarJS, find it in /themes-css -->
    <link href=material.css rel=stylesheet>
</head>
<body>
    ...
    <!-- SnackbarJS, find it in /dist -->
    <script src=snackbar.min.js></script>
</body>

To use it in HTML:

<span data-toggle=snackbar data-content="This is my awesome snackbar!">Click me</span>

or with javascript:

$.snackbar({content: "This is my awesome snackbar!"});

Options

Following options are supported to customize look and behaviour:

var options =  {
    content: "Some text", // text of the snackbar
    style: "toast", // add a custom class to your snackbar
    timeout: 100, // time in milliseconds after the snackbar autohides, 0 is disabled
    htmlAllowed: true, // allows HTML as content value
    onClose: function(){ } // callback called when the snackbar gets closed.
}

$.snackbar(options);

Or in HTML:

<span data-toggle=snackbar
      data-content="Some text"
      data-style="toast"
      data-timeout="100"
      data-html-allowed="true">
Click me
</span>

Tip: SnackbarJS returns always a jQuery element which corresponds to the snackbar DOM element, you can use it to get the ID of the element, and then do other operations with it.

Heads up!: The onClose callback is not available using the HTML syntax.

Interact with snackbars

Once you have created a snackbar you can show, hide or toggle it with:

$("#snackbarid").snackbar("show");
$("#snackbarid").snackbar("hide");
$("#snackbarid").snackbar("toggle");

#snackbarid can be both the button with the data-toggle=snackbar attribute or the snackbar element. Calling it on a non-existing snackbar will create it before executing the specificed action.

Demo

To see SnackbarJS in action visit the demo page.

Browserify

This library is UMD compatible, so you can use it in this way:

var jquery = require('jquery');
require('snackbarjs');

var options =  {
    ...
}

jquery.snackbar(options);

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
PolymerElements/paper-tooltip: A Material Design tooltip发布时间：2022-08-17
下一篇：
aritraroy/PatternLockView: An easy-to-use, customizable and Material Design read ...发布时间：2022-08-17
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap