jQuery消息提醒插件jquery.my-message

jQuery消息提醒插件jquery.my-message

添加时间:2021-02-24 18:46:07
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:弹窗
  • 模板颜色模板颜色:入门级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

可以自定义样式的jQuery消息提醒插件jquery.my-message,弹出层消息内容、图标样式、颜色等均可以自由设置,根据不同按钮的点击出现不同的提示内容。
jQuery消息提醒插件jquery.my-message
分类:悬浮层/弹出层 > 弹窗 难易:入门级

开头引入CSS样式、jquery库和my-message插件,可以自由写入触发按钮的样式:

<link type="text/css" rel="stylesheet" href="css/jquery.my-message.1.1.css"/>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.my-message.1.1.js"></script>
#btns{position:absolute;top:40%;width:100%;height:28px;text-align:center;font-size:15px;font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;letter-spacing:1px;}
#btns a{display:inline-block;width:108px;line-height:28px;color:#fff;border-radius:3px;}
#btn1{background-color:#5bc0de;border:1px solid #46b8da;}
#btn2{background-color:#00d46a;border:1px solid #00c161;}
#btn3{background-color:#ff6055;border:1px solid #ff483a;}
#btn4{background-color:#ffc928;border:1px solid #ffc30c;}

body部分很简单,我写了4个a标签作为触发按钮,放在一个固定id的div里面,你也可以直接写button来代替a标签的,跟后面的事件绑定的选择器保持一致就好:

<div id="btns">
	<a id="btn1">普通消息</a>
	<a id="btn2">成功消息</a>
	<a id="btn3">警告消息</a>
	<a id="btn4">错误消息</a>
</div>

底部的调用方式及参数说明:

var message = new MyMessage.message({
	/*默认参数,下面为默认项*/
	iconFontSize: "20px", //图标大小,默认为20px
	messageFontSize: "12px", //信息字体大小,默认为12px
	showTime: 3000, //消失时间,默认为3000
	align: "center", //显示的位置类型center,right,left
	positions: { //放置信息距离周边的距离,默认为10px
		top: "10px",
		bottom: "10px",
		right: "10px",
		left: "10px"
	},
	message: "这是一条消息", //消息内容,默认为"这是一条消息"
	type: "normal", //消息的类型,还有success,error,warning等,默认为normal
});
/*两种不同的设置方式*/
message.setting({
	align: "bottom" //会覆盖前面的所有设置,可以创建不同的对象去避免覆盖
});
message.setting("showTime", "5000");
$('#btn1').click(function() {
	message.add("普通的消息");
});
$('#btn2').click(function() {
	message.add("成功的消息", "success");
});
$('#btn3').click(function() {
	message.add("警告的消息", "warning");
});
$('#btn4').click(function() {
	message.add("错误的消息", "error");
});

/*IE浏览器版本8以下的未必兼容*/
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:jQuery消息提醒插件jquery.my-message

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.200319s