最近熟悉jq的extend写法,封装了一个简单的移动端提示插件。
最近熟悉jq的extend写法,封装了一个简单的移动端提示插件。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
body{
background: #fff;
}
</style>
</head>
<body>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="assets/js/jquery.tips.js"></script>
<script>
$(function(){
$.tips({
position:"bottom",
text:"我是tips插件内容",
time:2000
});
})
</script>
</body>
</html>
js
;(function($){
var defaults = {
position:"bottom",//显示位置
time:2000,//消失时间 s
text:"默认提示"
};
$.extend({
"tips" : function(option){
var options = $.extend({},defaults,option);
var centerVal = ($(window).height() - $("#tips").height()) / 2;
var position = 'bottom';
var lineVal = "20px";
if(options.position == 'top'){
position = 'top';
}else if(options.position == 'center'){
position = 'bottom';
lineVal = centerVal + 'px';
}
var html = '<div id="tips" style="position:fixed;'+position+':'+lineVal+';color:#fff;font-size:14px;text-align:center;width:100%;"><p style="background-color:rgba(0,0,0,0.2);display:inline-block;border-radius:30px;padding:10px 15px;margin:10px;filter:alpha(opacity=50);">'+ options.text +'</p></div>';
$('body').append(html);
setTimeout(function(){
$("#tips").remove();
}, options.time);
}
});
})(jQuery);
欢迎关注小程序,感谢您的支持!