您的位置：首页 > Web前端 > JQuery

jquery android toast效果

2015-01-17 15:38 127 查看

转自：http://mft.iteye.com/blog/2166172

toast.js

/**
* 模仿android里面的Toast效果，主要是用于在不打断程序正常执行的情况下显示提示数据
* @param config
* @return
*/
var Toast = function(config){
this.context = config.context==null?$('body'):config.context;//上下文
this.message = config.message;//显示内容
this.time = config.time==null?3000:config.time;//持续时间
this.left = config.left;//距容器左边的距离
this.top = config.top;//距容器上方的距离
this.init();
}
var msgEntity;
Toast.prototype = {
//初始化显示的位置内容等
init : function(){
$("#toastMessage").remove();
//设置消息体
var msgDIV = new Array();
msgDIV.push('<div id="toastMessage" style="border-radius:18px;-moz-opacity:0.6;opacity:0.6;">');
msgDIV.push('<span>'+this.message+'</span>');
msgDIV.push('</div>');
msgEntity = $(msgDIV.join('')).appendTo(this.context);
//设置消息样式
var left = this.left == null ? this.context.width()/2-msgEntity.find('span').width()/2 : this.left;
var top = this.top == null ? '20px' : this.top;
msgEntity.css({position:'absolute',bottom:top,'z-index':'99',left:left,'background-color':'black',color:'white','font-size':'15px',padding:'10px',margin:'10px'});
msgEntity.hide();
},
//显示动画
show :function(){
msgEntity.fadeIn(this.time/2);
msgEntity.fadeOut(this.time/2);
}

}

test.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<title>dialog demo</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="toast.js"></script>
<script
src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
function tt() {
alert("fdsafd");
new Toast({
context : $('body'),
message : 'Toast效果显示'
}).show();
}
</script>
</head>
<body>

<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div role="main" class="ui-content">
<a href="#" onclick="tt()">Open dialog</a>
<button onclick="tt()" value="fsdafds">fsdafds</button>
<a href="#dialogPage" onclick="click()" data-rel="dialog">Open
dialog</a> -->
</div>
<div data-role="footer">
<h2></h2>
</div>
</div>

<div data-role="page" id="dialogPage">

<div role="main" class="ui-content">
<p>I am a dialog</p>
</div>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航