一款网页提示框小插件:jquery.messager.js
这个基本已经能满足一般情况下的弹窗消息提示需求,特点就是很小巧。
使用方法:
1、引入jquery.js库文件。
2、引入jquery.messager.js。
3、调用方法。
例一:
<script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript" src="./jquery.messager.js"></script> <script> $(function(){ // anim:有三种动画显示方式slow、fast、normal(slow) $.messager.anim('slow'); // lays:定义消息提示框宽高(宽,高) $.messager.lays(250, 80); // show:(标题,内容,动画时间) $.messager.show(0, '<a href="#" style="font-size:18px;">立即查看</a>',0); }); </script>
当然默认情况下都是在右下角显示提示框,默认是写死位置的。
要想改位置就得去改js文件(position定位位置变化),当然也可以参考:jquery-easyui去调整位置。
我们看看jquery-easyui当中消息提示框那一块他的定位置设置:就看定位的地方style
<script> // 顶左 function topLeft(){ $.messager.show({ title:'My Title', msg:'The message content', showType:'show', style:{ right:'', left:0, top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } }); } // 顶中 function topCenter(){ $.messager.show({ title:'My Title', msg:'The message content', showType:'slide', style:{ right:'', top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } }); } // 顶右 function topRight(){ $.messager.show({ title:'My Title', msg:'The message content', showType:'show', style:{ left:'', right:0, top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } }); } // 中左 function centerLeft(){ $.messager.show({ title:'My Title', msg:'The message content', showType:'fade', style:{ left:0, right:'', bottom:'' } }); } // 中中 function center(){ $.messager.show({ title:'My Title', msg:'The message content', showType:'fade', style:{ right:'', bottom:'' } }); } // 中右 function centerRight(){ $.messager.show({ title:'My Title', msg:'The message content', showType:'fade', style:{ left:'', right:0, bottom:'' } }); } // 底左 function bottomLeft(){ $.messager.show({ title:'My Title', msg:'The message content', showType:'show', style:{ left:0, right:'', top:'', bottom:-document.body.scrollTop-document.documentElement.scrollTop } }); } // 底中 function bottomCenter(){ $.messager.show({ title:'My Title', msg:'The message content', showType:'slide', style:{ right:'', top:'', bottom:-document.body.scrollTop-document.documentElement.scrollTop } }); } // 底右 function bottomRight(){ $.messager.show({ title:'My Title', msg:'The message content', showType:'show' }); } </script>
如果要更加多样化的可以查看jquery-easyui插件(有很多功能的,不光是消息提示框哦)。
还有网页布局,手机网页布局等等。各种菜单导航样式。
需要的可以了解一下:jquery-easyui,点击下载jquery-easyui
转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/157.html
1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,下载后请24小时内删除。
2、本站所有内容均不能保证其完整性,不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用
3、本站联系方式Email:admin@youhutong.com ,收到邮件会第一时间处理。
4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意