jquery android toast效果

最新推荐文章于 2024-05-13 09:57:54 发布

心鑫

最新推荐文章于 2024-05-13 09:57:54 发布

阅读量1.4k

点赞数

转自：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="#" οnclick="tt()">Open dialog</a>
			<button οnclick="tt()" value="fsdafds">fsdafds</button>
			<a href="#dialogPage" οnclick="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>