文档章节

右下角信息提示框

海棠
 海棠
发布于 2015/07/30 14:25
字数 319
阅读 11
收藏 0

由于当时找到一个开源的messager嵌在系统中影响功能,决定重写;


notice.js


var time;

var delayTime;

$(function(){

// 增加浮动DIV

$('body').append("<div id='notice' onselectstart='return false'><span class='notice_title'>&nbsp;</span><span class='cbtn'>[关闭]</span><div class='notice_content'></div></div>");

// 更改样式

$('#notice').css({right:"0",bottom:"0",cursor:"default",position:"fixed","background-color":"#CFDEF4",color:"#1F336B","z-index":"999",border:"1px #1F336B solid",margin:"2px",padding:"10px","font-weight":"bold","line-height":"25px",display:"none"});

$('#notice .cbtn').css({color:"#FF0000",cursor:"pointer","padding-right":"5px",float:"right",position:"relative"});

$('#notice .notice_content').css({margin:"3px","font-weight":"normal",border:"1px #B9C9EF solid","line-height":"20px","margin-bottom":"10px",padding:"10px"});

/* 绑定事件*/

$('#notice').hover(

function(){

$(this).stop(true,true).slideDown();

clearTimeout(time);

},

function(){

time = setTimeout('_notice()',delayTime);

}

);

//绑定关闭事件

$('.cbtn').bind('click',function(){

$('#notice').slideUp('fast');

clearTimeout(time);

});

});

$.extend({

lay:function(_width,_height){

$('#notice').css({width:_width,height:_height});

},

show:function(_title,_msg,_time){

delayTime = _time;

$('.notice_title').html(_title);

$('.notice_content').html(_msg);

$('#notice').slideDown(2000);

time = setTimeout('_notice()',delayTime);

},

});

function _notice(){

$('#notice').slideUp(2000);

}


index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

  <head>

    <title>index.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>

    <meta http-equiv="description" content="this is my page"/>

    <meta http-equiv="content-type" content="text/html; charset=GBK"/>

    

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->


  </head>

  

  <body onload='initPage();'>

  </body>

  <script type="text/javascript">

  function initPage(){

  var returnMsg = "<p>信息1 jquery-1.7.2.min.js</p><p>信息2 notice.js</p><p>信息3</p>";

  $.show('提示信息',returnMsg,10000);

  }

  </script>

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

  <script src="notice.js" type="text/javascript" ></script>

</html>


效果图如下:

© 著作权归作者所有

海棠
粉丝 0
博文 3
码字总数 641
作品 0
杭州
程序员
私信 提问
登陆工行网上银行报60058017错误及输入正确网银密码提示密码不正确

文章编号: 000007 - 最后修改:2010年07月28日 - 撰写人: Lander Zhang 适合项目: 通用 标题: 登陆工行网上银行报60058017错误及输入正确网银密码提示密码不正确 症状: 客户公司财务在第一次使...

科技小能手
2017/11/12
0
0
Sublime Text 3 插件安装

1,package control。 我们用sublime几乎都会首先安装这个插件,这个插件是管理插件的功能,先安装它,再安装其他插件就方便了。 安装方法: 点击sublime的菜单栏 view->show console ;现在...

辰月
2015/08/15
99
0
Messager jQuery Plugin

Messager jQuery Plugin 是一个在浏览器右下角弹出式的一个消息提示框,有点类似于 QQ 的消息提示框,现在很多网站都有这个功能。 用法: $.messager.show({ title:'My Title', msg:'Message...

匿名
2009/10/13
5.9K
1
winform版弹框操作

公共弹框帮助类操作手册 1.说明 封装了对于winform操作的一些提示框,包括数据加载耗时的时候,提示数据正在加载,请稍后的提示窗体,动态提示给用户一些有用的信息。例如网吧里面续费提醒等...

我只是一只小小鸟
2016/07/27
181
0
虚拟机中安装windows server 2003忘记密码

关闭虚拟机电源; 打开工具栏上的虚拟机--》设置,选中硬盘,右下角有个实用工具,点开后选择映射; 讲“以只读模式打开文件”的默认选择去掉,单击确定,此时会出现警告的提示框,直接点击确...

蓝蝶飞扬
2016/02/25
381
0

没有更多内容

加载失败,请刷新页面

加载更多

友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
4
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
3
0
JAVA 利用时间戳来判断TOKEN是否过期

import java.time.Instant;import java.time.LocalDateTime;import java.time.ZoneId;import java.time.ZoneOffset;import java.time.format.DateTimeFormatter;/** * @descri......

huangkejie
昨天
3
0
分页查询

一、配置 /*** @author beth* @data 2019-10-14 20:01*/@Configurationpublic class MybatisPlusConfig { @Bean public PaginationInterceptor paginationInterceptor(){ ......

一个yuanbeth
昨天
6
0
在LINQPad中使用Ignite.NET

LINQPad是进行.NET开发的一款优秀工具,非常有利于Ignite.NET API的快速入门。 入门 下载LINQPad:linqpad.net/Download.aspx,注意要选择64位操作系统的AnyCPU版本; 安装Ignite.NET的NuGet...

李玉珏
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部