摘要:本篇jQuery教程探讨了如何开发jQuery移动设备弹出框插件msgalert.js,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
因为定位是jQuery插件,所以目前必须依赖jQuery。
有空将其改为纯JS。最近开发用jQuery,原生JS都不太会了。
代码很少,贴出来吧。
function msgAlert(type,msg) { $('.msg_'+type).html(msg); $('.msg_'+type).animate({'top': 0},500); setTimeout(function(){$('.msg_'+type).animate({'top': '-3rem'},500)},2000); } $(document).ready(function(){ var htmlstyle = "<style>body{padding:0;margin:0;}.msg{color:#FFF;width:100%;height:3rem;text-align:center;font-size:1.2rem;line-height:3rem;position:fixed;top:-3rem;z-index:20;}" +".msg_success{background-color:#1fcc6c;}" +".msg_warning{background-color:#e94b35;}" +".msg_primary{background-color:#337ab7;}" +".msg_info{background-color:#5bc0de;}</style>"; $('head').append(htmlstyle); $('body').prepend('<div class="msg msg_success"></div>' +'<div class="msg msg_warning"></div>' +'<div class="msg msg_primary"></div>' +'<div class="msg msg_info"></div>'); })
使用时直接调用msgAlert(type,msg)函数;
参数type表示弹出框类型,可选择的String类型参数暂有:success / warning / info / primary;
参数msg表示弹出框内容,String类型;
示例:msgAlert("success","登录成功!");
弹出框会使用0.5秒的时间下来,停顿2秒后,重新收缩回去。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号