效果图
hui.toast(msg, timer) 自动消失的提示框
功能:弹出自动消失的提示框
参数:
1、msg 消息内容;
2、消息时长,可省参数,默认: short 短,可以使用 long 代表较长时间;
返回值:无
hui.iconToast(msg, icon)
功能:弹出自动消失的、带有图标的提示框
参数:
1、msg 消息内容;
2、消息图标,可省参数,默认: success,可以使用hui-icons-xxx 样式进行图标替换,使用是省去 hui-icons部分。
返回值:无
hui.upToast(msg)
功能:弹出自动消失的、顶部出现的提示框
参数:
1、msg 消息内容;
返回值:无
示例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>HUI</title> <link rel="stylesheet" type="text/css" href="../css/hui.css" /> </head> <body> <header class="hui-header"> <div id="hui-back"></div> <h1>HUI </h1> </header> <div class="hui-wrap"> <div class="hui-common-title" style="margin-top:15px;"> <div class="hui-common-title-line"></div> <div class="hui-common-title-txt">Toast 提示框演示</div> <div class="hui-common-title-line"></div> </div> <div style="padding:25px 50px;"> <button type="button" class="hui-button hui-button-large" id="btn1">普通 Toast</button> <button type="button" class="hui-button hui-button-large" id="btn2" style="margin-top:15px;">时间比较长的 Toast</button> <button type="button" class="hui-button hui-button-large" id="btn3" style="margin-top:15px;">带有指定图标的 Toast</button> <button type="button" class="hui-button hui-button-large" id="btn4" style="margin-top:15px;">顶部弹出的信息框</button> </div> </div> <script src="../js/hui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> hui('#btn1').click(function(){hui.toast('Hi......');}); hui('#btn2').click(function(){hui.toast('Hi......', 'long');}); hui('#btn3').click(function(){hui.iconToast('操作成功', 'success');}); hui('#btn4').click(function(){hui.upToast('更新成功 !');}); </script> </body> </html>