基于Jquery响应式tip组件,适合移动端应用。主要针对用户在操作过程中的界面提示信息,出现3s后自动消失。
需要引用的文件:
<script src="js/jquery-1.10.2.min.js"></script> <link rel="stylesheet" href="css/dora.css"/> <script src="js/dora.js"></script>
注意:
1、jquery是基础文件
2、dora.css 是组件相关样式
3、dora.js 是组件所涉及到的js
使用方法:
$('#tipsMe').click(function(){
$.tipsShow({
overClass : 'tips-b',
message : '操作有误,请重试',
type : 'danger',
callBack : function(){
alert('提示解除');
}
});
})示例:
<script>
$(function(){
$('#tipsMe').click(function(){
$.tipsShow({
overClass : 'tips-b',
message : '操作有误,请重试',
type : 'danger',
callBack : function(){
alert('提示解除');
}
});
})
})
</script>
<body>
<h3>约定信息提示状态划分为4种:</h3>
<ol>
<li>提示:info</li>
<li>成功:success</li>
<li>危险:danger</li>
<li>警告:warning</li>
</ol>
<br/>
<hr/>
<br/>
<button id="tipsMe">打开tips窗口</button>参数配置:
| 参数 | 说明 | 必须 |
| message | 传入tip提示信息,String类型 | 是 |
| type | 传入提示信息类别info,success,danger,warning | 是 |
| overClass | 重写弹框样式 | 否 |
| callBack | 提示信息消失后的回调函数 | 否 |
功能方法接口:
| 方法名 | 使用示例 | 说明 |
| tipsHide | $.tipsHide(); | 关闭提示 |