jquery.extend 在jQuery中有2种用法
1、扩展jQuery方法或属性
2、将2个或多个对象合并到第一个
jQuery.extend( target [, object1 ] [, objectN ] )
我们可以通过它的第一个用法给jQuery添加各种自定义方法
实现toast效果代码如下
$.extend({
/**
* toast效果,position支持top:10px;bottom:10px
* {title: "title", duration: "duration", position: "position", width: "width", height: "height", backgroundColor: "backgroundColor", textColor: "textColor"}
*/
toast: function(obj) {
if($("#toast-div").length) {
return;
}
var title = obj.title;
var showTime = obj.duration || 2000;
var width = obj.width || "auto";
var height = obj.height || "20px";
var position = obj.position || '';
var backgroundColor = obj.backgroundColor || 'rgba(0, 0, 0, .7)';
var textColor = obj.textColor || '#fff';
var flag = obj.flag || true;
var lineheight = obj.lineheight || height;
if(position == 'bottom') {
position = "bottom: 15px;";
} else if(position == 'middle') {
position = "top: calc(45% - 15px);";
} else if(position == 'top') {
position = "top: 0px;";
} else if(position === '') {
position = "top: 80%;";
} else {
}
if(flag) {
var content = "<div id='toast-div' style='position: fixed;display: none; z-index:999;font-size: 12px; " + position + ";left: 0;width:100%; height: " + height + "; text-align: center'>";
} else {
var content = "<div id='toast-div' style='position: fixed; display: none;z-index:999; top: 0; left: 0;width:100%; height:100%; text-align: center'>";
}
content += '<div id="toast-content" style="display: inline-block; width: ' + width + ';min-height: ' + height + ';padding: 8px 14px;background-color: ' + backgroundColor + ';text-align: center;line-height: ' + lineheight +';border-radius: 3px;color: ' + textColor + ';">' + title + '</div>';
content += '</div>';
$("body").append(content);
$("#toast-div").fadeIn(500);
setTimeout(function(){$("#toast-div").fadeOut(500);}, showTime);
setTimeout(function(){$("#toast-div").remove();}, showTime + 1000);
}
});调用方法
$.toast(obj);
//object可选参数如下：
{title: "title", duration: "duration", position: "position", width: "width", height: "height", backgroundColor: "backgroundColor", textColor: "textColor"}使用示例
<!doctype html>
<html>
<head>
<title>toast弱提示</title>
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0">
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
.btn {
width: 240px;
height: 37px;
margin: 10px;
background: #1d953f;
border-radius: 2px;
color: white;
text-align: center;
line-height: 37px;
}
</style>
<body>
<div class='btn' id='default'>默认</div>
<div class='btn' id='top'>顶部弹出</div>
<div class='btn' id='middle'>中部弹出</div>
<div class='btn' id='bottom'>底部弹出</div>
<div class='btn' id='set-position'>自定义弹出位置</div>
<div class='btn' id='set-width-height'>自定义宽高</div>
<div class='btn' id='set-color'>自定义背景色与字体色值</div>
<div class='btn' id='set-duration'>自定义显示时间</div>
</body>
<script>
$.extend({
/**
* toast效果,position支持top:10px;bottom:10px
* {title: "title", duration: "duration", position: "position", width: "width", height: "height", backgroundColor: "backgroundColor", textColor: "textColor"}
*/
toast: function(obj) {
if($("#toast-div").length) {
return;
}
var title = obj.title;
var showTime = obj.duration || 2000;
var width = obj.width || "auto";
var height = obj.height || "20px";
var position = obj.position || '';
var backgroundColor = obj.backgroundColor || 'rgba(0, 0, 0, .7)';
var textColor = obj.textColor || '#fff';
var flag = obj.flag || true;
var lineheight = obj.lineheight || height;
if(position == 'bottom') {
position = "bottom: 15px;";
} else if(position == 'middle') {
position = "top: calc(45% - 15px);";
} else if(position == 'top') {
position = "top: 0px;";
} else if(position === '') {
position = "top: 80%;";
} else {
}
if(flag) {
var content = "<div id='toast-div' style='position: fixed;display: none; z-index:999;font-size: 12px; " + position + ";left: 0;width:100%; height: " + height + "; text-align: center'>";
} else {
var content = "<div id='toast-div' style='position: fixed; display: none;z-index:999; top: 0; left: 0;width:100%; height:100%; text-align: center'>";
}
content += '<div id="toast-content" style="display: inline-block; width: ' + width + ';min-height: ' + height + ';padding: 8px 14px;background-color: ' + backgroundColor + ';text-align: center;line-height: ' + lineheight +';border-radius: 3px;color: ' + textColor + ';">' + title + '</div>';
content += '</div>';
$("body").append(content);
$("#toast-div").fadeIn(500);
setTimeout(function(){$("#toast-div").fadeOut(500);}, showTime);
setTimeout(function(){$("#toast-div").remove();}, showTime + 1000);
}
});
$(document).ready(function() {
$('#default').click(function() {
$.toast({title: '这是一个提示'});
});
$('#top').click(function() {
$.toast({title: '这是一个提示', position: 'top'});
});
$('#middle').click(function() {
$.toast({title: '这是一个提示', position: 'middle'});
});
$('#bottom').click(function() {
$.toast({title: '这是一个提示', position: 'bottom'});
});
$('#set-position').click(function() {
$.toast({title: '这是一个提示', position: 'top: 50px;'});
});
$('#set-width-height').click(function() {
$.toast({title: '这是一个提示', width: '80%', height: '40px'});
});
$('#set-color').click(function() {
$.toast({title: '这是一个提示', backgroundColor: '#d93a49', textColor: '#cde6c7'});
});
$('#set-duration').click(function() {
$.toast({title: '我显示10秒后消失', duration: 10000});
});
});
</script>
</html>
随时随地看视频
