- 浏览: 503494 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
caipeiming:
可以使用array的indexOf方法,参考JavaScrip ...
js-判断元素是否存在于array数组中 -
zhangyaochun:
这个不错,新属性哦~
html5新特性-- <a>标签新属性download -
housheng33:
空间和时间星型-雪花-ER一范式-二范式-三范式
浅谈多维模型 -
housheng33:
对不起,我已经24岁了。我已经没有能力和你谈那一场天真而不计得 ...
对不起,我已经24岁了。我已经没有能力和你谈那一场天真而不计得失的恋爱了。 -
zhangyaochun:
这篇整理的不错
js-清空array数组
优点:右下角弹出同时可配置对应的开始和结束的animated的效果
缺点:没有对外的api支持例如控制显示和隐藏
附件1:css默认样式源码
附件2:jquery插件源码
缺点:没有对外的api支持例如控制显示和隐藏
<script type="text/javascript" src="jquery-popMessage.js"></script> <script type="text/javascript"> $(function(){ $.fn.popMessage({ content : '<a href="#" class="ime-btn"></a>', height:282, auto:false, width:280, html:true, openAnimType:{'type':'slideDown','speed':'slow'}, closeAnimType:{'type':'fadeOut','speed':'slow'} }); }); $('#test').click(function(){ $('.Pop-Message-container').hide(200); });//利用jquery手动添加隐藏显示 </script>
附件1:css默认样式源码
@charset "utf-8"; .Pop-Message-container{background:url(../images/wke-dialog-panel_title.png) repeat;position:absolute;right:0px;border:1px solid #ccc;box-shadow:3px 3px 3px rgba(0, 0, 0, 0.2);border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;} .Pop-Message-title{color:#7297a9;height:26px;line-height:22px;position:relative;padding:10px;padding-bottom:0;border-bottom:1px solid #ccc;} .Pop-Message-close,.Pop-Message-close-hover{background:url(../images/wke-dialog-panel_tools.gif) no-repeat scroll -16px 0;width:16px;height:16px;position:absolute;top:10px;right:10px;filter:alpha(opacity=60);opacity:0.6;-moz-opacity:0.6;cursor:pointer;} .Pop-Message-close-hover{opacity:1;filter:alpha(opacity=100);-moz-opacity:1;} .Pop-Message-con{background:url(../images/con_bg.png) no-repeat #fff;} .ime-btn,.ime-btn-hover{background:url(../images/btn.png) no-repeat;height:29px;width:91px;display:inline-block;position:absolute;left:100px;top:273px;} .ime-btn:hover{background:url(../images/btn-hover.png) no-repeat;} .Pop-Message-body{padding:10px;} .Pop-Message-footer{height:25px;border-top:1px solid #ccc;padding:10px 0 0 10px;color:#7297a9;} .noNotice{margin-left:5px;}
附件2:jquery插件源码
(function(){ /*设计定位为作为一般的插件*/ $.extend($.fn,{ popMessage : function(options){ //合并配置 options = $.extend({},$.fn.popMessage.defaults,options); //render container var container = $('<div></div>').addClass('Pop-Message-container').css({'width':options.width,'display':'none','height':'auto','zIndex':options.zIndex}); //这边为了防止ie6下select的遮盖问题 //思路是判断是否加载了jquery.bgiframe.js if($.fn.bgiframe){ container.bgIframe(); } //title var title = $('<div></div>').addClass('Pop-Message-title').appendTo(container); title.text(options.title); //conWrap //更改策略可以设置高度 但是container还是auto的设置的是conWrap的高度 var conWrap = $('<div></div>').addClass('Pop-Message-con').appendTo(container).css('height',options.height != 'auto' ? options.height : 'auto'); //messageBody var messageBody = $('<div></div>').addClass('Pop-Message-body').appendTo(conWrap); //增加一个尾部 var footer = $('<div></div>').addClass('Pop-Message-footer').appendTo(container); //footer的具体 var footerCon = $('<input type="checkbox" class="" /><span class="noNotice">下次不在提醒</span>').appendTo(footer); //判断是否支持远程调用 if(options.loadUrl != ''){ messageBody.load(options.loadUrl); }else{ if(options.html){ messageBody.html(options.content); }else{ messageBody.text(options.content); } } //关闭按钮 if(options.closeBtn){ var closeBtn = $('<span></span').addClass('Pop-Message-close').appendTo(title).hover(function(){ $(this).addClass('Pop-Message-close-hover'); },function(){ $(this).removeClass('Pop-Message-close-hover'); }).click(function(){ //其实就是调用关闭的api closeMessage(); }); } //计算右下角 var interval = setInterval(function(){ var h = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) +document.documentElement.clientHeight -container.height() -12; if(h < document.body.offsetHeight){ container.css('top',h+ 'px'); }else{ container.css('top',document.body.offsetHeight+ 'px'); } },20); //最后在appendTo container.appendTo($(document.body)); //初始显示 if(options.openAnimType){ switch(options.openAnimType.type){ case 'slideUp': container.slideUp(options.openAnimType.speed); case 'slideDown': container.slideDown(options.openAnimType.speed); case 'show': container.show(options.openAnimType.speed); case 'fadeIn': container.fadeIn(options.openAnimType.speed); }; } /*container.slideDown('slow');*/ //关闭 function closeMessage(){ if(options.closeAnimType){ switch(options.closeAnimType.type){ case 'slideDown': container.slideDown(options.closeAnimType.speed); case 'slideUp': container.slideUp(options.closeAnimType.speed); case 'hide': container.hide(options.closeAnimType.speed); case 'fadeOut': container.fadeOut(options.closeAnimType.speed); }; } /* container.slideUp('slow');*/ } //是否自动关闭 if(options.auto){ setTimeout(function(){ closeMessage(); clearInterval(interval); //container.remove(); },options.time); } } }); /*默认设置*/ $.fn.popMessage.defaults ={ title : '提醒', content : '您有新的提醒', closeBtn: true, //关闭按钮是否默认显示 width : 250, height: 'auto', //规则目前为了适应高度最后的效果是设置内容区域的高度 zIndex: 10000, loadUrl:'', //远程调用 html: false, //支持html语义化的内容,默认关了 openAnimType:{'type':'slideUp','speed':'slow'}, //支持开始的动画配置 closeAnimType:{'type':'hide','speed':'slow'}, //支持结束的动画配置 auto:true, //自动关闭 time:4000 //定时 }; })(jQuery) /*考虑到scroll*/ $(window).scroll(function(){ var topHeight = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) +document.documentElement.clientHeight -$('Pop-Message-container').height() -12; if(topHeight < document.body.offsetHeight){ $('Pop-Message-container').css('top',topHeight+ 'px'); }else{ $('Pop-Message-container').css('top',document.body.offsetHeight+ 'px'); } });
- jquery-dialog.rar (372.8 KB)
- 下载次数: 13
发表评论
-
jquery插件之--TableDnD plugin
2015-05-07 18:41 0http://www.jqueryscript.net/dem ... -
jquery插件之--autocomplete
2015-05-07 18:40 656jQuery.Autocomplete 能够很好的实现输入框的 ... -
jquery选择器匹配方式
2015-04-07 19:49 639一直了解jQuery的优势之一是支持强大的 ... -
清空dom源码解析
2015-04-04 17:06 590jquery中empty()是采用逐个移除子元素实现的 zep ... -
Jquery方法-is()检测匹配元素集合
2015-04-01 16:08 750.is( selector ) 判断当前匹配的元素 ... -
类数组转换为数组makeArray()
2015-04-01 11:01 1210面试的时候遇到这个问题,在jquery中如何实现的将 ... -
jQuery.data()和html5 dataset
2015-03-26 16:33 1270我们先来看下HTML 5 增加的一项新功能是自定义数据 ... -
jquery插件之-图片放大镜
2015-03-26 10:17 948(一)mlens图片放大镜 尊重原创:http://www.j ... -
利用unique()去重和merge()合并数组
2015-03-24 14:28 4414$.unique() jQuery.unique(array ... -
jQuery.ajax 执行异步请求
2015-03-23 15:34 1058jQuery.ajax( url [, settings ] ... -
jQuery插件开发入门
2015-03-19 16:09 856是什么? 所谓“插件”,就是用户自己新增的jQuery ... -
Jquery.extend()
2015-03-19 15:12 669var object = $.extend({}, objec ... -
jquery匹配元素替换目标元素
2015-03-04 10:47 664DOM树结构如下: <div class="c ... -
jquery-元素属性操作
2015-03-03 17:33 623attr(attributeName) 或者attr(attr ... -
jquery-one()
2015-02-13 16:06 774one() 为被选元素附加一个或多个事件处理程序,并规定当事件 ... -
jquery-map()遍历
2015-02-12 15:52 5705map() 把每个元素通过函数传递到当前匹配集合中,生成包含返 ... -
parseJSON()方法
2015-02-10 16:14 736jQuery.parseJSON(json) 将要解析的 J ... -
jquery-ajax get()和post()
2015-02-06 16:21 860get( url [,data][,success(data, ... -
jquery-ajaxStart()和ajaxStop()
2015-02-06 11:41 773ajaxStart()和ajaxStop()方法是绑定Ajax ... -
jquery ajax $.param()方法序列化字符串
2015-02-05 16:45 1009jQuery.param( obj )将表单元素的值转换为序列 ...
相关推荐
popmessage参考html页面
以popup小窗口技术实现实时提醒,类似于div形式弹出框。
- **Version 1.1.2**:修复了popMessage接口在无参数情况下waitseconds取值不正确的问题,现在会使用QueueMeta设置的值。 2. **使用步骤**: - **下载**:获取最新版本的SDK和sample代码。 - **导入项目**:使用...
### Linux系统环境下的Socket编程详细解析 #### 一、引言 在计算机网络通信中,Socket编程是一种常用的技术手段,用于实现不同计算机之间的数据交换。本文档将详细解析Linux环境下Socket编程的基础概念、核心函数...
桌面客户端程序(如Win.PopMessage)需要安装在用户的计算机上,它会监听并处理来自服务器的消息。 实现这个功能的过程大致如下: 1. **服务器端**:使用.NET 5创建一个Web API项目,设置路由来接收请求,这些请求...