新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

设计规范

开发者文档

用来显示错误、提示、警告、公告等信息。

  • 更新 v1.4.1:增加了一个记住当前关闭状态的功能。
  • 更新 v1.1.4:增加了一个可选的关闭按钮。

小尺寸(默认尺寸)

错误信息提示


禁止信息提示


成功信息提示


警示信息提示


公告信息提示


提示信息提示


提醒信息提示


疑问信息提示
  1. <div class="sui-msg msg-error">
  2. <div class="msg-con">错误信息提示</div>
  3. <s class="msg-icon"></s>
  4. </div><br><br>
  5. <div class="sui-msg msg-stop">
  6. <div class="msg-con">禁止信息提示</div>
  7. <s class="msg-icon"></s>
  8. </div><br><br>
  9. <div class="sui-msg msg-success">
  10. <div class="msg-con">成功信息提示</div>
  11. <s class="msg-icon"></s>
  12. </div><br><br>
  13. <div class="sui-msg msg-warning">
  14. <div class="msg-con">警示信息提示</div>
  15. <s class="msg-icon"></s>
  16. </div><br><br>
  17. <div class="sui-msg msg-notice">
  18. <div class="msg-con">公告信息提示</div>
  19. <s class="msg-icon"></s>
  20. </div><br><br>
  21. <div class="sui-msg msg-tips">
  22. <div class="msg-con">提示信息提示</div>
  23. <s class="msg-icon"></s>
  24. </div><br><br>
  25. <div class="sui-msg msg-info">
  26. <div class="msg-con">提醒信息提示</div>
  27. <s class="msg-icon"></s>
  28. </div><br><br>
  29. <div class="sui-msg msg-question">
  30. <div class="msg-con">疑问信息提示</div>
  31. <s class="msg-icon"></s>
  32. </div>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

大尺寸

错误信息提示


禁止信息提示


成功信息提示


警示信息提示


公告信息提示


提示信息提示


提醒信息提示


疑问信息提示
  1. <div class="sui-msg msg-large msg-error">
  2. <div class="msg-con">错误信息提示</div>
  3. <s class="msg-icon"></s>
  4. </div><br><br>
  5. <div class="sui-msg msg-large msg-stop">
  6. <div class="msg-con">禁止信息提示</div>
  7. <s class="msg-icon"></s>
  8. </div><br><br>
  9. <div class="sui-msg msg-large msg-success">
  10. <div class="msg-con">成功信息提示</div>
  11. <s class="msg-icon"></s>
  12. </div><br><br>
  13. <div class="sui-msg msg-large msg-warning">
  14. <div class="msg-con">警示信息提示</div>
  15. <s class="msg-icon"></s>
  16. </div><br><br>
  17. <div class="sui-msg msg-large msg-notice">
  18. <div class="msg-con">公告信息提示</div>
  19. <s class="msg-icon"></s>
  20. </div><br><br>
  21. <div class="sui-msg msg-large msg-tips">
  22. <div class="msg-con">提示信息提示</div>
  23. <s class="msg-icon"></s>
  24. </div><br><br>
  25. <div class="sui-msg msg-large msg-info">
  26. <div class="msg-con">提醒信息提示</div>
  27. <s class="msg-icon"></s>
  28. </div><br><br>
  29. <div class="sui-msg msg-large msg-question">
  30. <div class="msg-con">疑问信息提示</div>
  31. <s class="msg-icon"></s>
  32. </div>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

成块级

错误信息提示

错误信息提示
  1. <div class="sui-msg msg-block msg-error">
  2. <div class="msg-con">错误信息提示</div>
  3. <s class="msg-icon"></s>
  4. </div><br>
  5. <div class="sui-msg msg-large msg-block msg-error">
  6. <div class="msg-con">错误信息提示</div>
  7. <s class="msg-icon"></s>
  8. </div>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

清除模式

错误信息提示

错误信息提示
  1. <div class="sui-msg msg-clear msg-error">
  2. <div class="msg-con">错误信息提示</div>
  3. <s class="msg-icon"></s>
  4. </div><br>
  5. <div class="sui-msg msg-large msg-clear msg-error">
  6. <div class="msg-con">错误信息提示</div>
  7. <s class="msg-icon"></s>
  8. </div>
清除模式区别于成块级模式,Msg内联状态独占一行,常用于表单校验

默认字体颜色

公告信息提示


公告信息提示
  1. <div class="sui-msg msg-default msg-notice">
  2. <div class="msg-con">公告信息提示</div>
  3. <s class="msg-icon"></s>
  4. </div><br><br>
  5. <div class="sui-msg msg-large msg-default msg-notice">
  6. <div class="msg-con">公告信息提示</div>
  7. <s class="msg-icon"></s>
  8. </div>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

去边框和底色

错误信息提示


错误信息提示
  1. <div class="sui-msg msg-naked msg-error">
  2. <div class="msg-con">错误信息提示</div>
  3. <s class="msg-icon"></s>
  4. </div><br><br>
  5. <div class="sui-msg msg-large msg-naked msg-error">
  6. <div class="msg-con">错误信息提示</div>
  7. <s class="msg-icon"></s>
  8. </div>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

带关闭按钮

此类用法必须用于msg-block类型的消息上

1.4.1版本 增加了一个记忆功能,只需要给 .sui-msg 加上一个id并且增加一个class remember,就可以自动记住当前消息的关闭状态(即关闭之后刷新页面也不会再显示出来)。注意这个功能是使用localStorage实现的。

通知:特色中国页面自13年4月上线以来,业务整合了更多的地域营销资源
重大消息:特色中国页面自13年4月上线以来,业务整合了更多的地域营销资源

自动记住关闭状态

通知:我会自动记住自己的关闭状态,关闭我并刷新页面试试

刷新之后点我显示消息

  1. <div class="sui-msg msg-info msg-block">
  2. <div class="msg-con">通知:特色中国页面自13年4月上线以来,业务整合了更多的地域营销资源
  3. <button type="button" data-dismiss="msgs" class="sui-close">×</button>
  4. </div>
  5. <s class="msg-icon"></s>
  6. </div>
  7. <div class="sui-msg msg-large msg-tips msg-block">
  8. <div class="msg-con">重大消息:特色中国页面自13年4月上线以来,业务整合了更多的地域营销资源
  9. <button type="button" data-dismiss="msgs" class="sui-close">×</button>
  10. </div>
  11. <s class="msg-icon"></s>
  12. </div>
  13. <h4>自动记住关闭状态</h4>
  14. <div id="msg-remember-demo" class="sui-msg msg-info msg-block remember">
  15. <div class="msg-con">通知:我会自动记住自己的关闭状态,关闭我并刷新页面试试
  16. <button type="button" data-dismiss="msgs" class="sui-close">×</button>
  17. </div>
  18. <s class="msg-icon"></s>
  19. </div>
  20. <p><a id="show-msg" href="javascript: void(0);" class="sui-btn btn-primary">刷新之后点我显示消息</a></p>
  21. <script>
  22. $("#show-msg").click(function() {
  23. var $msg = $("#msg-remember-demo").show();
  24. localStorage.removeItem("sui-msg-" + $msg.attr("id"));
  25. });
  26. </script>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

多行模式

多行提示展示
1、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
2、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示


多行提示展示

1、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
2、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示

  1. <div class="sui-msg msg-question">
  2. <div class="msg-con"><strong>多行提示展示</strong><br>1、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示<br>
  3. 2、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
  4. </div>
  5. <s class="msg-icon"></s>
  6. </div><br><br>
  7. <div class="sui-msg msg-large msg-question">
  8. <div class="msg-con">多行提示展示
  9. <p>
  10. 1、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示<br>
  11. 2、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
  12. </p>
  13. </div>
  14. <s class="msg-icon"></s>
  15. </div>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge