`

box.js

 
阅读更多
jQuery.fn.center = function(scope){
    this.css("position","absolute");
    this.css("top", ($(window).height() - this.outerHeight())/2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.outerWidth())/2 + $(window).scrollLeft() + "px");
    return this;
};
jQuery.fn.drag = function(handle){
	var me = $(this);
	var _handle = $(handle, this);
	var _move = false;
	var _x = 0;
	var _y = 0;
	var ww = $(window).width() +  $(window).scrollLeft();
	var wh = $(window).height() +  $(window).scrollTop();
	var w = me.outerWidth();
	var h = me.outerHeight();
	_handle.mousedown(function(e){
		e.stopPropagation();
        _move = true;
        _handle.css('cursor','move');
        _x= e.pageX - me.offset().left;
        _y= e.pageY - me.offset().top;
		$(document).mousemove(function (ev) {
			_handle.mousemove(ev);
		});
    });
	_handle.mouseup(function(){
		_move = false;
        _handle.css('cursor','auto');
	});
	$(document).mouseup(function () {
		$(document).unbind("mousemove");
	});
	_handle.mousemove = function(e){
        if(_move){
            w = me.outerWidth();
            h = me.outerHeight();	
            var x = e.pageX - _x;
            var y = e.pageY - _y;
            x = (x <= 0) ? 0 : x;
            x = (x >= ww - w) ? (ww - w) : x;
            y = (y <= 0) ? 0 : y;
            y = (y >= wh - h) ? (wh - h) : y;
            me.css({position:'absolute',top:y,left:x});
        }
    };
};
$.extend({
	open:function(cfg){
		var state = {top:0,left:0,width:0,height:0,size:'original'};
		var mask = $('<div class=rzy-mask>');
		var wrap_out = $('<div class=wrap_out>');
		var win = $('<div class=rzy-box>');
		mask.hide();
		var header = $('<div class=head>');
		var x = $('<span class=x title=关闭>X</span>');
		var max = $('<span class=max title=最大化>口</span>');
		var bd = $('<div class=body>');
		var foot = $('<div class=foot2>');
		var ok = $('<button>').html('确&nbsp;&nbsp;定');
		var cancel = $('<button>').html('取&nbsp;&nbsp;消');
		var iframe = $("<iframe frameborder=0 width='100%' height='100%'></iframe>");
		if(cfg&&cfg.url){
			var time = '_' + new Date().getTime();
			var url = (cfg.url.indexOf('?')==-1)?(cfg.url + '?' + time):(cfg.url + '&' + time);
			if(cfg&&cfg.ajax){
				
			}else{
				if(cfg&&cfg.data){
					url += '&' + $.param(cfg.data);
				}
				iframe.attr('src', url);	
				iframe.load(function() { 
					//bd.height($(this).contents().height()); 
				});
			}
		}
		var w = parseInt($(window).width() + $(window).scrollLeft());
		var h = parseInt($(window).height() + $(window).scrollTop());
		x.click(function(){
			$(this).parents('div.wrap_out').hide();
			mask.hide();
			$(this).parents('div.wrap_out').remove();
			mask.remove();
			iframe.remove();
			if(cfg&&cfg.close){
				cfg.close();
			}
		});
		max.toggle(function(){
			$(this).text('_').attr('title','恢复');
			var wrap_out = $(this).parents('div.wrap_out');
			iframe.animate({
				width: w - parseInt(wrap_out.css('border-width'))*2,
				height: h - parseInt(wrap_out.css('border-width'))*2 - header.outerHeight()
			});
			var win = $(this).parents('div.rzy-win');
			win.height(h - parseInt(wrap_out.css('border-width'))*2 - parseInt(wrap_out.css('padding'))*2);
			wrap_out.animate({
				top: 0,
				left: 0,
				width: w - parseInt(wrap_out.css('border-width'))*2 - parseInt(wrap_out.css('padding'))*2,
				height: h - parseInt(wrap_out.css('border-width'))*2
			});
		},function(){
			$(this).text('口').attr('title','最大化');
			var wrap_out = $(this).parents('div.wrap_out');
			iframe.animate({
				width: state['width'],
				height: state['height'] - header.outerHeight()
			});
			win.height(state['height']-2);
			wrap_out.animate({
				top: state['top'],
				left: state['left'],
				width: state['width'],
				height: state['height']
			});
		});
		/**wrap_out.dblclick(function() {
			if(state['size']=='max'){
				state['size']='original';
				wrap_out.animate({
					top: state['top'],
					left: state['left'],
					width: state['width'],
					height: state['height']
				});
				win.animate({
					height: state['height']
				});
			}else{
				wrap_out.animate({
					top: 0,
					left: 0,
					width: w - parseInt(wrap_out.css('border-width'))*2 - parseInt(wrap_out.css('padding'))*2,
					height: h - parseInt(wrap_out.css('border-width'))*2 - parseInt(wrap_out.css('padding'))*2
				});
				win.height(h - parseInt(wrap_out.css('border-width'))*2 - parseInt(wrap_out.css('padding'))*2);
				state['size']='max';
			}
		});**/
		foot.append(ok).append(cancel);
		//win.css({zIndex:'11000',position:'absolute'});
		mask.css({zIndex:'1999',position:'absolute'}).css('top',0).css('left',0);
		win.append(header);
		win.append(bd);
		win.append(foot);
		
		mask.width(w).height(h);
		if(cfg&&cfg.width){
			wrap_out.width(cfg.width);
		}else{
			wrap_out.width(350);
		}
		if(cfg&&cfg.height){
			bd.height(cfg.height);
		}else{
			bd.height(100);
		}
		if(cfg&&cfg.title){
			header.text(cfg.title);
		}else{
			header.text('Win');
		}
		header.append(x);
		//header.append(max);
		bd.append(iframe);
		//win.appendTo($('body'));
		mask.appendTo($('body'));
		
		wrap_out.append(win);
		wrap_out.appendTo($('body'));
		wrap_out.drag('.head');
		wrap_out.css("top", ($(window).height() - wrap_out.outerHeight())/2 + $(window).scrollTop() + "px");
		wrap_out.css("left", ($(window).width() - wrap_out.outerWidth())/2 + $(window).scrollLeft() + "px");
		
		//win.drag('.head');
		if(cfg&&cfg.url){
            var time = '_' + new Date().getTime();
            var url = (cfg.url.indexOf('?')==-1)?(cfg.url + '?' + time):(cfg.url + '&' + time);
			if(cfg&&cfg.ajax){
				bd.css('padding', '20px');
				bd.load(url,function(){
					mask.show();
					wrap_out.center().show();
					state['left'] = wrap_out.css('left');
					state['top'] = wrap_out.css('top');
					state['height'] = wrap_out.height();
					state['width'] = wrap_out.width();
					if(cfg&&cfg.before){
						cfg.before();
					}
				});
			}else{
				setTimeout(function(){
					mask.show();
					wrap_out.show();
					wrap_out.css("top", ($(window).height() - wrap_out.outerHeight())/2 + $(window).scrollTop() + "px");
					wrap_out.css("left", ($(window).width() - wrap_out.outerWidth())/2 + $(window).scrollLeft() + "px");
					state['left'] = wrap_out.css('left');
					state['top'] = wrap_out.css('top');
					state['height'] = wrap_out.height();
					state['width'] = wrap_out.width();
				}, 50);
			}
			
		}
		ok.click(function(){
			if(cfg&&cfg.ok){
				cfg.ok(iframe[0].contentWindow);
			}else{
				$(this).parents('div.wrap_out').hide().remove();
				$('div.rzy-mask').hide().remove();
				$(this).parents('div.wrap_out').find('iframe').hide().remove();
			}
		});
		cancel.click(function(){
			$(this).parents('div.wrap_out').hide().remove();
			$('div.rzy-mask').hide().remove();
			$(this).parents('div.wrap_out').find('iframe').hide().remove();
		});
		return iframe;
	},
	close:function(callback){
		$('body').find('div.wrap_out iframe').remove();
		$('body').find('div.wrap_out').hide().remove();
		$('body').find('div.rzy-mask').hide().remove();
		if(callback){
			callback();
		}
	}
});

 

div.rzy-mask {
	background-color: #eee;
	filter: alpha(opacity=60);
	opacity: 0.6;
}

.wrap_out {
	padding: 5px;
	background: #eee;
	position: absolute;
	z-index: 2000;
	left: -9999px;
	border: 0px solid #ccc;
	font: 16px/20px "\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
}

div.rzy-box {
	border: 1px solid #ccc;
	background: #fff;
	font-size: 12px;
	position: relative;
}

div.rzy-box div.head {
	height: 30px;
	padding: 5px;
	line-height: 32px;
	color: #FFFFFF;
	background-color: #1abc9c;
	font-size: 16px;
	font-weight: bold;
	position: relative;
	border-bottom: 1px solid #ccc;
}

div.rzy-box .x {
	position: absolute;
	top:5px;
	right:8px;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
}

div.rzy-box .max {
	position: absolute;
	top:0;
	right:20px;
	cursor: pointer;
}

div.rzy-box .body {
	word-wrap:break-word;
}

div.rzy-box .foot {
	height: 24px;
	background-color: #eee;
	text-align: center;
	border-top: 1px solid #CFCFCF;
	padding: 5px 0;
}

div.rzy-box .foot2 {
	background-color: #fff;
	text-align: right;
	border-top: 0px solid #CFCFCF;
	padding:2px 20px 2px 0;
}

div.rzy-box .foot button {
	background: #1abc9c;
	border: 1px solid;
	color: #fff;
	text-align: center;
	vertical-align: baseline;
	margin: 0 20px;
	cursor: pointer;
	border-color: #1abc9c #bbb #bbb #1abc9c;
	outline: none;
}
div.rzy-box .foot2 button {
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	border: 1px solid #d1d1d1;
	color: #7e7e7e;
	text-align: center;
	margin: 10px;
	cursor: pointer;
	background-color: #f7f7f7;
	font: 14px/20px "\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
}

 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    mp4box.js.zip_mileq5o_mp4box.all.js_mp4box.js_mp4切片的软件_mp4文件

    MP4Box.js是一个JavaScript库,专门用于处理MP4文件,特别是在Web环境中。它在标题和描述中被提及,主要用于获取MP4文件的信息、对MP4文件进行切片以及从MP4文件中提取帧来创建TextTracks。这个工具对于开发者来说...

    jquery.selectbox.js select下拉菜单美化代码

    jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码

    jquery.dialogBox.js动画对话框插件

    《jQuery.dialogBox.js动画对话框插件详解及应用实践》 在网页开发中,对话框是一种常见的用户交互元素,用于提示信息、确认操作或者展示详细内容。jQuery.dialogBox.js插件是一个轻量级且功能丰富的动画对话框工具...

    jquery.dialogBox.js插件下载.zip

    jQuery.dialogBox.js是一款轻量级的JavaScript插件,专门用于创建对话框效果。它基于jQuery框架,通过简单的API调用即可实现各种对话框功能,包括警告、确认、信息提示等。插件的灵活性和易用性使其成为初学者快速...

    mp4box.js, GPAC工具的MP4Box版本.zip

    mp4box.js, GPAC工具的MP4Box版本 MP4Box.js JavaScript库,在浏览器( 在NodeJS中) 中处理MP4文件,支持渐进解析。 灵感来自于来自的 MP4Box 工具。 它可以用于:获得关于MP4文件的信息,一个MP4文件,用于与

    jquery.dialogBox.js动画对话框插件.zip

    jQuery.dialogBox.js是一款优秀的JavaScript插件,它提供了丰富的动画效果和自定义选项,使得创建具有吸引力的对话框变得简单而高效。本文将深入探讨jQuery.dialogBox.js的特性和使用方法,帮助开发者更好地理解和...

    mp4box.js:GPAC的MP4Box工具JavaScript版本

    MP4Box.js JavaScript库可在浏览器(和NodeJS)中处理MP4文件,并支持渐进式解析。 灵感来自项目的工具。 它可以用于: , MP4文件以与, 从MP4中样本以创建TextTracks。 在此页面上,您会找到有关如何 ,或或进行...

    mp4box.js-3d-old:Fork for mp4 与 X3D 场景测试

    MP4Box.js 在浏览器中处理 MP4 文件的 JavaScript 库,支持渐进式解析。 灵感来自项目的工具。 X3DOM 集成文档文件: 可用于: [获取有关 MP4 文件的信息] (#getting-information), 将 MP4 文件以与, 从 MP4 中...

    box.js 移动端弹出框源代码

    弹窗框box.js 2.0

    Box2dWeb-2.1.a.3.min.js

    一个js版本的box2d引擎,包含重力系统和碰撞检测,可以去github上下载,放在此处只是为了方便,侵删~

    superbox.min.js

    superbox.min.js

    jquery.dialogBox.js插件下载特效代码

    《jQuery.dialogBox.js插件详解及其应用》 在网页开发中,对话框是不可或缺的交互元素,用于提示信息、确认操作或展示详细内容。jQuery是一个广泛使用的JavaScript库,提供了丰富的功能来简化DOM操作和事件处理。...

    2D物理引擎 Box2d.js

    Box2DJS是Box2D物理引擎的JavaScript端口。如何引入laya 参考 https://blog.csdn.net/weixin_41316824/article/details/88965058

    Selectbox.js:VanillaJS 自定义选择框

    选择框.js VanillaJS 自定义选择框 灵感来自 ##使用 只需将sb-init类添加到select 。 如果您需要添加自定义类,请使用此类名添加data-sb-custom属性 &lt; select class =" sb-init " data-sb-custom =" custom-...

    simplebox.js:一个简单的响应式灯箱插件

    simplebox.js simplebox.js是一个轻量级的lightbox插件(〜936字节),可以轻松修改或扩展以满足您的需求。 该插件旨在快速,响应Swift,高效。 这个插件背后的想法是使设置灯箱的过程变得轻松。 我在查找和设置...

    box2d--1.0.js很好的物理引擎

    Box2D是一个非常知名的开源2D物理引擎,它在JavaScript版本中被称为Box2D--1.0.js。这个引擎主要用于创建具有真实世界物理特性的2D游戏和模拟。它的强大功能使得开发者能够轻松地实现物体碰撞检测、重力、摩擦力、...

    前端项目-jquery.selectbox.zip

    - `jquery.selectBox.js`: 插件的主要JavaScript文件,包含了所有核心功能。 - `jquery.selectBox.css`: 默认的CSS样式文件,定义了基本的外观。 - `demo`目录:可能包含一个演示页面,展示了插件的用法和效果。 - `...

    前端项目-photobox.zip

    1. **源代码**:可能包括JavaScript文件(如`photobox.js`),这些文件包含了photobox插件的核心逻辑和功能实现。 2. **CSS样式**:如`photobox.css`,这是用来定义插件的外观和布局的样式表文件,包括按钮、蒙版、...

Global site tag (gtag.js) - Google Analytics