设计规范

开发者文档
用来显示错误、提示、警告、公告等信息。
- 更新 v1.4.1:增加了一个记住当前关闭状态的功能。
- 更新 v1.1.4:增加了一个可选的关闭按钮。
小尺寸(默认尺寸)
错误信息提示
禁止信息提示
成功信息提示
警示信息提示
公告信息提示
提示信息提示
提醒信息提示
疑问信息提示
- <div class="sui-msg msg-error">
- <div class="msg-con">错误信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-stop">
- <div class="msg-con">禁止信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-success">
- <div class="msg-con">成功信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-warning">
- <div class="msg-con">警示信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-notice">
- <div class="msg-con">公告信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-tips">
- <div class="msg-con">提示信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-info">
- <div class="msg-con">提醒信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-question">
- <div class="msg-con">疑问信息提示</div>
- <s class="msg-icon"></s>
- </div>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge
- 复制代码代码已复制
大尺寸
错误信息提示
禁止信息提示
成功信息提示
警示信息提示
公告信息提示
提示信息提示
提醒信息提示
疑问信息提示
- <div class="sui-msg msg-large msg-error">
- <div class="msg-con">错误信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-large msg-stop">
- <div class="msg-con">禁止信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-large msg-success">
- <div class="msg-con">成功信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-large msg-warning">
- <div class="msg-con">警示信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-large msg-notice">
- <div class="msg-con">公告信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-large msg-tips">
- <div class="msg-con">提示信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-large msg-info">
- <div class="msg-con">提醒信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-large msg-question">
- <div class="msg-con">疑问信息提示</div>
- <s class="msg-icon"></s>
- </div>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge
- 复制代码代码已复制
成块级
错误信息提示
错误信息提示
- <div class="sui-msg msg-block msg-error">
- <div class="msg-con">错误信息提示</div>
- <s class="msg-icon"></s>
- </div><br>
- <div class="sui-msg msg-large msg-block msg-error">
- <div class="msg-con">错误信息提示</div>
- <s class="msg-icon"></s>
- </div>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge
- 复制代码代码已复制
清除模式
错误信息提示
错误信息提示
- <div class="sui-msg msg-clear msg-error">
- <div class="msg-con">错误信息提示</div>
- <s class="msg-icon"></s>
- </div><br>
- <div class="sui-msg msg-large msg-clear msg-error">
- <div class="msg-con">错误信息提示</div>
- <s class="msg-icon"></s>
- </div>
清除模式区别于成块级模式,Msg内联状态独占一行,常用于表单校验
- 复制代码代码已复制
默认字体颜色
公告信息提示
公告信息提示
- <div class="sui-msg msg-default msg-notice">
- <div class="msg-con">公告信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-large msg-default msg-notice">
- <div class="msg-con">公告信息提示</div>
- <s class="msg-icon"></s>
- </div>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge
- 复制代码代码已复制
去边框和底色
错误信息提示
错误信息提示
- <div class="sui-msg msg-naked msg-error">
- <div class="msg-con">错误信息提示</div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-large msg-naked msg-error">
- <div class="msg-con">错误信息提示</div>
- <s class="msg-icon"></s>
- </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月上线以来,业务整合了更多的地域营销资源
自动记住关闭状态
通知:我会自动记住自己的关闭状态,关闭我并刷新页面试试
- <div class="sui-msg msg-info msg-block">
- <div class="msg-con">通知:特色中国页面自13年4月上线以来,业务整合了更多的地域营销资源
- <button type="button" data-dismiss="msgs" class="sui-close">×</button>
- </div>
- <s class="msg-icon"></s>
- </div>
- <div class="sui-msg msg-large msg-tips msg-block">
- <div class="msg-con">重大消息:特色中国页面自13年4月上线以来,业务整合了更多的地域营销资源
- <button type="button" data-dismiss="msgs" class="sui-close">×</button>
- </div>
- <s class="msg-icon"></s>
- </div>
- <h4>自动记住关闭状态</h4>
- <div id="msg-remember-demo" class="sui-msg msg-info msg-block remember">
- <div class="msg-con">通知:我会自动记住自己的关闭状态,关闭我并刷新页面试试
- <button type="button" data-dismiss="msgs" class="sui-close">×</button>
- </div>
- <s class="msg-icon"></s>
- </div>
- <p><a id="show-msg" href="javascript: void(0);" class="sui-btn btn-primary">刷新之后点我显示消息</a></p>
- <script>
- $("#show-msg").click(function() {
- var $msg = $("#msg-remember-demo").show();
- localStorage.removeItem("sui-msg-" + $msg.attr("id"));
- });
- </script>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge
- 复制代码代码已复制
多行模式
多行提示展示
1、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
2、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
1、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
2、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
多行提示展示
1、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
2、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
- <div class="sui-msg msg-question">
- <div class="msg-con"><strong>多行提示展示</strong><br>1、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示<br>
- 2、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
- </div>
- <s class="msg-icon"></s>
- </div><br><br>
- <div class="sui-msg msg-large msg-question">
- <div class="msg-con">多行提示展示
- <p>
- 1、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示<br>
- 2、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
- </p>
- </div>
- <s class="msg-icon"></s>
- </div>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge
- 复制代码代码已复制