dialog插件demo
基本操作
默认窗体
new Dialog('这是一个默认对话框').show();
非模态对话框
- new Dialog('非模态对话框,可以打开多个!',{modal:false}).show();
自动关闭
- new Dialog('5秒后自动关闭',{time:5000}).show();
非fixed模式
- new Dialog('对话框不随滚动条移动',{fixed:false}).show();
显示指定ID的内容
- // 将显示本标签内的内容。
- new Dialog({type:'id',value:'content-type-id'}).show();
加载一张图片
- new Dialog({type:'img',value:'http://www.caixw.com/public/uploads/demo/images/300x125.gif'}).show();
加载一URL到iframe
- new Dialog({type:'iframe',value:'http://www.caixw.com'}).show();
加载一URL地址
- new Dialog({type:'url',value:'http://www.caixw.com/public/uploads/demo/jquery/dialog/test.html'}).show();
自定义CSS
自定义背景遮盖层
- #dialog1-overlay
- {
- background:blue;
- opacity:0.8;
- filter:alpha(opacity=80);
- }
自定义内容部分背景
- #dialog2 .content
- {
- width:250px;
- height:80px;
- background-image:url(http://www.caixw.com/public/uploads/demo/images/300x125.gif);
- }
回调函数
show()函数
- new Dialog('show()回调函数'
- {beforeShow:function(){alert('before show'),return true},afterShow:function(){alert('after show');}})
- .show();
hide()函数
- dlg = new Dialog('hide()回调函数'
- {beforeHide:function(){alert('before hide'),return true},afterHide:function(){alert('after hide');}})
- .show();
- dlg.hide();
close()函数
- new Dialog('close()回调函数'
- {beforeClose:function(){alert('before close'),return true},afterClose:function(){alert('after close');}})
- .show();
- /**
- * Dialog
- *
- * @author caixw <http://www.caixw.com>
- * @copyright Copyright (C) 2010, http://www.caixw.com
- * @license FreeBSD license
- */
- /**
- * jQuery的Dialog插件。
- *
- * @param object content
- * @param object options 选项。
- * @return
- */
- function Dialog(content, options)
- {
- var defaults = { // 默认值。
- title:'标题', // 标题文本,若不想显示title请通过CSS设置其display为none
- showTitle:true, // 是否显示标题栏。
- closeText:'[关闭]', // 关闭按钮文字,若不想显示关闭按钮请通过CSS设置其display为none
- draggable:true, // 是否移动
- modal:true, // 是否是模态对话框
- center:true, // 是否居中。
- fixed:true, // 是否跟随页面滚动。
- time:0, // 自动关闭时间,为0表示不会自动关闭。
- id:false // 对话框的id,若为false,则由系统自动产生一个唯一id。
- };
- var options = $.extend(defaults, options);
- options.id = options.id ? options.id : 'dialog-' + Dialog.__count; // 唯一ID
- var overlayId = options.id + '-overlay'; // 遮罩层ID
- var timeId = null; // 自动关闭计时器
- var isShow = false;
- var isIe = $.browser.msie;
- var isIe6 = $.browser.msie && ('6.0' == $.browser.version);
- /* 对话框的布局及标题内容。*/
- var barHtml = !options.showTitle ? '' :
- '<div class="bar"><span class="title">' + options.title + '</span><a class="close">' + options.closeText + '</a></div>';
- var dialog = $('<div id="' + options.id + '" class="dialog">'+barHtml+'<div class="content"></div></div>').hide();
- $('body').append(dialog);
- /**
- * 重置对话框的位置。
- *
- * 主要是在需要居中的时候,每次加载完内容,都要重新定位
- *
- * @return void
- */
- var resetPos = function()
- {
- /* 是否需要居中定位,必需在已经知道了dialog元素大小的情况下,才能正确居中,也就是要先设置dialog的内容。 */
- if(options.center)
- {
- var left = ($(window).width() - dialog.width()) / 2;
- var top = ($(window).height() - dialog.height()) / 2;
- if(!isIe6 && options.fixed)
- { dialog.css({top:top,left:left}); }
- else
- { dialog.css({top:top+$(document).scrollTop(),left:left+$(document).scrollLeft()}); }
- }
- }
- /**
- * 初始化位置及一些事件函数。
- *
- * 其中的this表示Dialog对象而不是init函数。
- */
- var init = function()
- {
- /* 是否需要初始化背景遮罩层 */
- if(options.modal)
- {
- $('body').append('<div id="' + overlayId + '" class="dialog-overlay"></div>');
- $('#' + overlayId).css({'left':0, 'top':0,
- /*'width':$(document).width(),*/
- 'width':'100%',
- /*'height':'100%',*/
- 'height':$(document).height(),
- 'z-index':++Dialog.__zindex,
- 'position':'absolute'})
- .hide();
- }
- dialog.css({'z-index':++Dialog.__zindex, 'position':options.fixed ? 'fixed' : 'absolute'});
- /* IE6 兼容fixed代码 */
- if(isIe6 && options.fixed)
- {
- dialog.css('position','absolute');
- resetPos();
- var top = parseInt(dialog.css('top')) - $(document).scrollTop();
- var left = parseInt(dialog.css('left')) - $(document).scrollLeft();
- $(window).scroll(function(){
- dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left});
- });
- }
- /* 以下代码处理框体是否可以移动 */
- var mouse={x:0,y:0};
- function moveDialog(event)
- {
- var e = window.event || event;
- var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);
- var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);
- dialog.css({top:top,left:left});
- mouse.x = e.clientX;
- mouse.y = e.clientY;
- };
- dialog.find('.bar').mousedown(function(event){
- if(!options.draggable){ return; }
- var e = window.event || event;
- mouse.x = e.clientX;
- mouse.y = e.clientY;
- $(document).bind('mousemove',moveDialog);
- });
- $(document).mouseup(function(event){
- $(document).unbind('mousemove', moveDialog);
- });
- /* 绑定一些相关事件。 */
- dialog.find('.close').bind('click', this.close);
- dialog.bind('mousedown', function(){ dialog.css('z-index', ++Dialog.__zindex); });
- // 自动关闭
- if(0 != options.time){ timeId = setTimeout(this.close, options.time); }
- }
- /**
- * 设置对话框的内容。
- *
- * @param string c 可以是HTML文本。
- * @return void
- */
- this.setContent = function(c)
- {
- var div = dialog.find('.content');
- if('object' == typeof(c))
- {
- switch(c.type.toLowerCase())
- {
- case 'id': // 将ID的内容复制过来,原来的还在。
- div.html($('#' + c.value).html());
- break;
- case 'img':
- div.html('加载中...');
- $('<img alt="" />').load(function(){div.empty().append($(this));resetPos();})
- .attr('src',c.value);
- break;
- case 'url':
- div.html('加载中...');
- $.ajax({url:c.value,
- success:function(html){div.html(html);resetPos();},
- error:function(xml,textStatus,error){div.html('出错啦')}
- });
- break;
- case 'iframe':
- div.append($('<iframe src="' + c.value + '" />'));
- break;
- case 'text':
- default:
- div.html(c.value);
- break;
- }
- }
- else
- { div.html(c); }
- }
- /**
- * 显示对话框
- */
- this.show = function()
- {
- if(undefined != options.beforeShow && !options.beforeShow())
- { return; }
- /**
- * 获得某一元素的透明度。IE从滤境中获得。
- *
- * @return float
- */
- var getOpacity = function(id)
- {
- if(!isIe)
- { return $('#' + id).css('opacity'); }
- var el = document.getElementById(id);
- return (undefined != el
- && undefined != el.filters
- && undefined != el.filters.alpha
- && undefined != el.filters.alpha.opacity)
- ? el.filters.alpha.opacity / 100 : 1;
- }
- /* 是否显示背景遮罩层 */
- if(options.modal)
- { $('#' + overlayId).fadeTo('slow', getOpacity(overlayId)); }
- dialog.fadeTo('slow', getOpacity(options.id), function(){
- if(undefined != options.afterShow){ options.afterShow(); }
- isShow = true;
- });
- // 自动关闭
- if(0 != options.time){ timeId = setTimeout(this.close, options.time); }
- resetPos();
- }
- /**
- * 隐藏对话框。但并不取消窗口内容。
- */
- this.hide = function()
- {
- if(!isShow){ return; }
- if(undefined != options.beforeHide && !options.beforeHide())
- { return; }
- dialog.fadeOut('slow',function(){
- if(undefined != options.afterHide){ options.afterHide(); }
- });
- if(options.modal)
- { $('#' + overlayId).fadeOut('slow'); }
- isShow = false;
- }
- /**
- * 关闭对话框
- *
- * @return void
- */
- this.close = function()
- {
- if(undefined != options.beforeClose && !options.beforeClose())
- { return; }
- dialog.fadeOut('slow', function(){
- $(this).remove();
- isShow = false;
- if(undefined != options.afterClose){ options.afterClose(); }
- });
- if(options.modal)
- { $('#'+overlayId).fadeOut('slow', function(){$(this).remove();}); }
- clearTimeout(timeId);
- }
- init.call(this);
- this.setContent(content);
- Dialog.__count++;
- Dialog.__zindex++;
- }
- Dialog.__zindex = 500;
- Dialog.__count = 1;
- Dialog.version = '1.0 beta';
- function dialog(content, options)
- {
- var dlg = new Dialog(content, options);
- dlg.show();
- return dlg;
- }
- @charset "utf-8";
- .dialog-overlay
- {
- opacity:0.5;
- filter:alpha(opacity:50);
- background:gray;
- }
- .dialog
- {
- /*border:5px solid rgba(200,200,200,0.9);*/
- background:gray;
- padding:10px;
- opacity:0.9;
- filter:alpha(opacity:70);
- border-radius:3px;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
- _width:expression('200px'); /* IE6下不指定此值,会一直粘在右侧 */
- }
- .dialog .bar
- {
- cursor:move;
- color:#fff;
- background:#000;
- padding:6px;
- min-height:15px; /* 不指定此值,在title和closeText都为空的情况下,可能移动条会消失不见 */
- _height:expression('20px'); /* ie6下不指定高度,标题栏会变得很小 */
- }
- .dialog .bar .title
- {
- float:left;
- margin-right:10px;
- }
- .dialog .bar .close
- {
- float:right;
- cursor:pointer;
- text-decoration:underline;
- }
- .dialog .content
- {
- background:#fff;
- padding:10px;
- }
- .dialog iframe
- {
- height:100%;
- width:100%;
- }
- /* 指定图像最大尺寸,不需要可以删除。 */
- .content img
- {
- overflow:auto;
- max-width:700px;
- max-height:500px;
- /* IE6版的max-width和max-height,但是也会有点BUG在图片太小时,也会显示最大值,需要同时指定width和height */
- _width:expression((document.body.clientWidth > 700) ? '700px' : 'auto');
- _height:expression((document.body.clientHeight > 500) ? '500px' : 'auto');
- }
dialog插件demo的更多相关文章
- 一个好用的Dialog插件
网页中常常须要弹出dialog,尽管非常多JS开源框架都提供这个功能,可是效果都不是非常好,比方easy-UI.改动样式这些又不是我擅长的,身边又没有美工兄弟,苦逼啊! (Easy-UI的BasicD ...
- 一个简单的MariaDB认证插件demo
代码地址如下:http://www.demodashi.com/demo/13076.html 一.前言 众所周知(其实可能很多人不知道)MariaDB支持插件认证.在MariaDB中新建用户,常见的 ...
- 代码:jquery自定义插件 demo
jquery自定义插件 demo 2016-1-13 只是一个简易的示例 <script type="text/javascript" src="http://cd ...
- jQuery UI dialog插件出错信息:$(this).dialog is not a function
使用jQuery UI 1.7.2 dialog插件,遇到这样的错误: [img]http://dl.iteye.com/upload/attachment/308166/97c428e4-2ce2- ...
- 实时更新数据的jQuery图表插件DEMO演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件
支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...
- Dialog插件artDialog
经本人测试,发现没有layer好用,因为artDialog不能拖拽.不过除了拖拽,其他还蛮简洁的,在自定义上的灵活性也还可以.下面是我自己写的测试demo. <!DOCTYPE html> ...
- 经典Dialog插件Layer
Github上只有一个test,所以最好还是到官网去学习,官网的示例写的很详尽,难得一见的设计思路和灵活性都极好的插件.下面是我自己test过的demo <!DOCTYPE html> & ...
- phonegap入门–3 Android phonegap 自定义插件DEMO
一.环境要求: 首先需要建立phonegap android 工程,请参考:http://www.cnblogs.com/zhujinguo/p/4369883.html 二.建立java类 ...
随机推荐
- maven 安装、运行、获取帮助 —— maven权威指南学习笔记(二)
这部分在网上很容易找到详细教程,这里就略写了. 基础:系统有配置好的jdk,通过 命令行 java -version,有类似下面的提示,表示java环境以配好 下载maven:官网 http://ma ...
- nginx 反向代理配置之---可配置多域名请求
配置文件如下: server { listen 80; server_name ngin服务器所对应的的域名; error_log /data/logs/nginx/mainsite.error.lo ...
- json数据的拼接与解析
json数据格式 [{ "firstName": "Brett", "lastName":"McLaughlin", & ...
- python中的一些编码问题
声明Python源码编码方式 在程序的开始写上:# -*- coding: utf-8 -*- # -*- coding: gbk -*- 注: decode是将其它编码方式转换成unicode编码 ...
- pandas读取Excel
time31 = pd.read_excel('F:/save_file/3问出车表.xlsx', sheetname='Sheet1') # 读取‘3问出车表.xlsx’中的Sheet1表单, ti ...
- 将Sql2008的数据库转到2005
今天碰到一个特别伤心的事情. 事情的起因是这样的,现在我负责评教系统的维护工作.由于中途服务器转迁,迁移之前数据库版本是2005,而现在的服务器版本是2008R2的.在这个过程并没有发生什么问题. 问 ...
- SSIS的控制流之For循环容器
SSIS包由一个控制流以及一个或多个数据流(可选)组成.下面的关系图显示具有一个容器和六项任务的控制流. 这些任务中有五项定义于包级别,还有一项定义于容器级别.任务位于容器内.在控制流中的工具箱.我们 ...
- python字典中dict.get()和dict.setdefault()的异同点
相同点: 两者是参数相同:dict.get(key, default=None), dict.setdefault(key, default=None) 如果指定的键不存在时,两者都返回默认值,默认是 ...
- String随笔
1.古罗马皇帝凯撒在打仗时曾经使用过以下方法加密军事情报:,请编写一个程序,使用上述算法加密或解密用户输入的英文字串要求设计思想.程序流程图.源代码.结果截图. 设计思想:1)定义一个String类型 ...
- 【Prism】MEF版HelloWorld
引言 Pirsm框架是由微软P & P小组设计的,用于构建组合式的WPF企业级应用,支持两个IOC容器,分别为Unity和MEF.官方地址为http://compositewpf.codepl ...