成都web前端培训
成都达内金融街中心

18628200088

热门课程

jQuery消息提示框插件分享

  • 时间:2016-06-28 15:13
  • 发布:达内杨老师
  • 来源:达内

成都达内分享——jquery.toast.js是一款可自由配置的jQuery消息提示框插件。该消息提示框可以自定义背景和前景色,提示框的位置,提示框的显示时间,提示框的动画效果等。

可以通过bower或npm来安装该消息提示框插件。

bower install jquery-toast-plugin

npm install jquery-toast-plugin                 

使用方法

在页面中引入jquery.toast.css文件,jquery和jquery.toast.js文件。

<link type="text/css" rel="stylesheet" href="css/jquery.toast.css">

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.toast.js"></script>                 

初始化插件

简单文本的消息提示框:

// Non sticky version

$.toast("Lorem ipsum dolor sit amet...")

// Sticky version

$.toast({

text : "Lorem ipsum dolor sit amet...",

hideAfter : false

})               

使用HTML标签的消息提示框:

// Non sticky

$.toast("Let's test some HTML stuff... <a href='#'>github</a>")

// sticky

$.toast({

text : "<strong>Remember!</strong> You can <span style='font-weight: bold; color:red;' class='horribly-styled'>always</span> introduce your own × HTML and <span style='font-size: 18px;'>CSS</span> in the toast.",

hideAfter : false

})               

使用数组作为列表元素的消息提示框:

// Non sticky version

$.toast(["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"])

// Sticky version

$.toast({

text : ["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"],

hideAfter : false

})              

配置参数

自定义动画:

$.toast({

text : "Let's test some HTML stuff... <a href='#'>github</a>",

showHideTransition : 'slide' // It can be plain, fade or slide

})               

自定义消息提示框的样式:

$.toast({

text : "......",

showHideTransition : 'slide',

bgColor : 'blue',

textColor : '#eee',

allowToastClose : false,

hideAfter : 5000,

stack : 5,

textAlign : 'left',

position : 'bottom-left'

})              

text:消息提示框的内容。

showHideTransition:消息提示框的动画效果。可取值:plain,fade,slide。

bgColor:背景颜色。

textColor:文字颜色。

allowToastClose:是否显示关闭按钮。

hideAfter:设置为false则消息提示框不自动关闭。设置为一个数值则在指定的毫秒之后自动关闭消息提示框。

stack:消息栈。

textAlign:文本对齐:left, right, center。

position:消息提示框的位置:bottom-left、bottom-right、bottom-center、top-left、top-right、top-center、mid-center。

重置消息提示框

var myToast = $.toast('Some toast that needs to be removed.');

myToast.reset(); // remove the toast "Some toast that needs to be removed"                 

可以通过下面的方法来重置所有的消息提示框:

$.toast().reset('all');                 

更新消息提示框

你可以通过下面的方法来更新页面上的消息提示框:

var myToast = $.toast({

text : 'Some toast that needs to show the success message after the ajax call.',

hideAfter : false,

bgColor : '#E01A31'

});

window.setTimeout(function(){

myToast.update({

text : '<strong>Updated after a few seconds</strong>',

bgColor : '#23B65D'

});

}, 5000); 

上一篇:jQuery的选项卡插件介绍
下一篇:jQuery幻灯片插件(带音效的旋转式)
选择城市和中心
贵州省

广西省

海南省