本文给大家分享的是使用 javascript 实现简单的页面右下角提示信息框的方法和示例代码,有需要的小伙伴可以参考下。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
由于之前找到一个开源的很好用,可以固定在浏览器的右下角;兼容性也很好;加上之后影响到应用的一个小功能点,决定重写一个;这个只能固定在当前页面的右下加,系统是上下结构满足需求,没在继续扩展;
两个函数:
1.lay -- 设置提示框高宽(可选)
2.show -- 设置标题,内容,和停留时间
notice.js
- var time;
- var delayTime;
- $(function() {
- // 增加浮动DIV
- $('body').append("<div id='notice' onselectstart='return false'><span class='notice_title'> </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>
来源: