消息提示

消息提示组件已经打包为单独的组件,可脱离UI总组件单独使用。
下载组件

默认效果

<a href="javascript:;" class="ui-btn msg" data-title="错误提示" data-align="center" data-time="5">默认(浏览器居中)</a>
<a href="javascript:;" class="ui-btn msg" data-title="错误提示" data-align="center" data-time="5" data-progress="false">不显示进度条</a>
<script>
$(function()
{
$(".msg").click(function()
{
var title=$(this).data("title");
var color=$(this).data("color");
var align=$(this).data("align");
var progress=$(this).data("progress");
var time=$(this).data("time");
$.toast(
{
title:title,
text:'错误内容',
align:align,
color:color,
progress:progress,
time:time
});
});
})
</script>

显示位置

<a href="javascript:;" class="ui-btn msg ui-btn-red" data-title="错误提示" data-color="red" data-align="top-left">红色 top-left</a>
<a href="javascript:;" class="ui-btn msg ui-btn-yellow" data-title="错误提示" data-color="yellow" data-align="top-right">红色 top-right</a>
<a href="javascript:;" class="ui-btn msg ui-btn-blue" data-title="错误提示" data-color="blue" data-align="top-center">蓝色 top-center</a>
<a href="javascript:;" class="ui-btn msg ui-btn-green" data-title="错误提示" data-color="green" data-align="bottom-left">绿色 bottom-left</a>
<a href="javascript:;" class="ui-btn msg ui-btn-info" data-title="错误提示" data-color="info" data-align="bottom-right">淡蓝色 bottom-right</a>
<a href="javascript:;" class="ui-btn msg ui-btn-red" data-title="错误提示" data-color="red" data-align="bottom-center">红色 bottom-center</a>

消息提示

<a href="javascript:;" class="ui-btn success" data-title="成功提示" data-align="center" data-time="5">成功提示</a>
<a href="javascript:;" class="ui-btn error" data-title="错误提示" data-align="top-right" data-time="5">错误提示</a>
<a href="javascript:;" class="ui-btn warn" data-title="警告提示" data-align="bottom-right" data-time="5">警告提示</a>
<a href="javascript:;" class="ui-btn simple">最简单的调用方式</a>
<script>
$(function()
{
//成功的提示,第2个参数为显示的位置,可以去掉
sdcms.success('操作成功','top-right');

//错误提示
sdcms.error('操作失败');

//警告
sdcms.warn('警告提示');
})
</script>

参数说明

参数 默认值 是否必须 参数说明
title 标题
text 内容部分
align center 页面中显示的位置
time 0 定时关闭,单位:秒,为0时无定时关闭功能
color 0 背景色
progress true 是否显示进度条