1.   本网站所有源码包解压密码:www.youhutong.com
会员登录  帮助问答

Jquery消息提示框、网页右下角消息提示插件、html消息弹窗提示框、php消息通知框(网页消息提示框小插件)

小川 特效组件
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com

一款网页提示框小插件:jquery.messager.js

这个基本已经能满足一般情况下的弹窗消息提示需求,特点就是很小巧。

1111.jpg

使用方法:

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




 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com
升级为VIP会员,有效期内免费下载本站所有VIP源码  点击升级为VIP

转载请注明来源地址:小川编程 » http://www.youhutong.com/index.php/article/index/157.html

( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情