基于jquery插件右下角弹窗提示效果实例

如

 代码如下 复制代码

$.messager.lays(width, height);

该方法主要用来定义弹出窗口的宽度和高度。

 代码如下 复制代码

$.messager.anim(type,speed);

该方法主要定义窗口以什么样的方式和速度呈现。

 代码如下 复制代码

//以fadeIn的动画方式显示
$.messager.anim("fade",1000);
//以show的动画方式显示
$.messager.anim("show",1000);

该方法主要定义窗口显示的内容，以及窗口显示多长时间后进行隐藏。

如果使用默认的标题，则将title设置为0，另外title和text还可以设置为html内容进行显示。如果希望用户点击弹窗的关闭按钮才关闭消息框，可将time设置为0。

 代码如下 复制代码

$.messager.show(0, "这是一个提示框",5000);
$.messager.show("<font color='red'>提示信息</font>","<a href='http://www.111cn.net'>111cn.net 欢迎你</a>",3000);

在明白了message插件中每个方法的作用后，使用起来就很简单了，具体操作如下：

1. 在页面引入jquery.js和jquery.messager.js文件。

2. 在页面加载的时候调用message插件中的函数，设置窗口的大小，显示效果，以及显示内容。

 代码如下 复制代码

$(function () {
    $.messager.lays(200, 200);
    $.messager.anim('fade', 1000);
    $.messager.show("提示信息", "<A href="http://www.111cn.net">简明现代魔法欢迎你</A>",5000);
});

例

 代码如下 复制代码

<script src="../jquery/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.messager.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $.messager.show(0,'一个Jquery Messager消息弹出插件！');
    $("#showMessager300x200").click(function(){
        $.messager.lays(300, 200);
        $.messager.show(0, '300x200的消息',40000);
    });
    $("#showMessagerFadeIn").click(function(){
        $.messager.anim('fade', 2000);
        $.messager.show(0, 'fadeIn动画消息');
    });
    $("#showMessagerShow").click(function(){
        $.messager.anim('show', 1000);
        $.messager.show(0, 'show动画消息');
    });
    $("#showMessagerDim").click(function(){
        $.messager.show('<font color=red>自定义标题</font>', '<font color=green style="font-size:14px;font-weight:bold;">自定义内容</font>');
    });
    $("#showMessagerSec").click(function(){
        $.messager.show(0, '一秒钟关闭消息', 1000);
    });
});
</script>
<style type="text/css">
<!--
body,td,th { font-size: 12px; }
body { background-color: #fefefe; }
input   { background-color:#F5D99E; color:#333; border:solid 1px #993300; font-size:12px;}
-->
</style>

html
 
<p><strong>JQUEYR PLUGIN - Messager </strong></p>
<p><input type="button" id="showMessager300x200" value="显示一个300x200的消息" /></p>
<p><input type="button" id="showMessagerFadeIn" value="显示一个fadeIn动画消息" /></p>
<p><input type="button" id="showMessagerShow" value="显示一个show动画消息" /></p>
<p><input type="button" id="showMessagerDim" value="显示定义内容和标题消息" /></p>
<p><input type="button" id="showMessagerSec" value="一秒钟关闭消息" /></p>

再看一个实例

Jquery Code：

 代码如下 复制代码

<script type="text/javascript">
$(function(){
    $(window).load(function(){
        $("div[id=newnotice]").css({"right":"0px","bottom":"1px"});
        $("div[id=newnotice]").slideDown("slow");
    }).scroll(function(){
        $("div[id=newnotice]").css({"bottom":"0px"});
        $("div[id=newnotice]").css({"right":"0px","bottom":"1px"});
    }).resize(function(){
        $("div[id=newnotice]").css({"bottom":""});
        $("div[id=newnotice]").css({"right":"0px","bottom":"1px"});  
    });
  
    $("label[id=tomin]").click(function(){
        $("div[id=noticecon]","div[id=newnotice]").slideUp();
    });
  
    $("label[id=tomax]").click(function(){
        $("div[id=noticecon]","div[id=newnotice]").slideDown();
    });
  
    $("label[id=toclose]").click(function(){
        $("div[id=newnotice]").hide();
    });
    /**
 $.get("/cgi/test.xml", function(data){
  $(data).find('channel').find('item').each(function(index, ele){
   var titles = $(ele).find('title').text();
   var links = $(ele).find('link').text();
   $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');
  })
 });
    **/
});
</script>

html代码

 代码如下 复制代码

<div id="newnotice">
    <p>
        <span class="title">最热新闻</span>
        <span id="bts">
            <label class="button" id="tomin" title="最小化">_</label>
            <label class="button" id="tomax" title="最大化">口</label>
            <label class="button" id="toclose" title="关闭">×</label>
        </span>
    </p>
    <div id="noticecon">
  <ol>
  </ol>
 </div>
</div>
时间： 2025-01-19 10:20:24

基于jquery插件右下角弹窗提示效果实例的相关文章

基于jquery的自定义鼠标提示效果 jquery.toolTip_jquery

IE下效果 Firefox或其它浏览器效果 代码 复制代码 代码如下: //版权 酷车中国 www.kuchechina.com //作者 逐月 zhuyue.cnblogs.com //演示 http://www.kuchechina.com/carstools/Default.aspx jQuery.fn.toolTip = function() { this.unbind().hover( function(e) { this.t = this.title; this.title = ''

基于jquery弹出层提示插件使用例子

一款非常好用的jquery弹窗插件(自我感觉),4种状态提示,分别为:正确.提醒.加载.错误,需要时可带跳转链接.遮罩层,可设置超时时间,默认20秒,好了,不多说,直接看预览或演示弹窗提示效果. 使用方法:  代码如下 复制代码 <span onclick="popStatus(1, '非常好,你很棒', 5)">正确提示</span> <span onclick="popStatus(2, '你这么叼,你家人知道吗?', 5)">

jQuery实现的超链接提示效果示例【附demo源码下载】_jquery

本文实例讲述了jQuery实现的超链接提示效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <style type="text/css"&g

jquery实现简单文字提示效果_jquery

本文实例讲述了jquery实现简单文字提示效果.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery实现简单文字提示</title> &l

基于jquery实现的树形菜单效果代码_jquery

本文实例讲述了基于jquery实现的树形菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的树形菜单代码,点击菜单项可以向下滑出对应的二级菜单,效果流畅自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tree-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

基于javascript实现右下角浮动广告效果_javascript技巧

本文实例为大家分享了基于javascript实现右下角浮动广告效果,供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>右下角广告代码</title> <script type="text/javascript&q

基于jquery的手风琴图片展示效果实现方法_jquery

本文实例讲述了基于jquery的手风琴图片展示效果实现方法.分享给大家供大家参考.具体实现方法如下: 代码运行效果如下图所示: index.html页面代码如下: 复制代码 代码如下: <!DOCTYPE html> <html class=''> <head>     <title>一款基于jquery的手风琴图片展示效果demo</title>     <style class="cp-pen-styles">

基于jQuery实现仿51job城市选择功能实例代码_jquery

前些文章用写过,省市县三级联动,但是感觉选择的时候不够直观,现在改进了下,效果如下图 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="City.aspx.cs" Inherits="System_Select_City" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

怎么关闭wps右下角弹窗提示

  怎么关闭wps右下角弹窗提示 已经升级到最新版本 非常讨厌啊 会给你设置网址大全 进入任务管理器,结束任务wpsupdate.exe 如果要绿化它,写个脚本 保存为1.bat:: taskkill wpsupdate.exe