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('确 定'); var cancel = $('<button>').html('取 消'); 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是一个JavaScript库,专门用于处理MP4文件,特别是在Web环境中。它在标题和描述中被提及,主要用于获取MP4文件的信息、对MP4文件进行切片以及从MP4文件中提取帧来创建TextTracks。这个工具对于开发者来说...
jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码
《jQuery.dialogBox.js动画对话框插件详解及应用实践》 在网页开发中,对话框是一种常见的用户交互元素,用于提示信息、确认操作或者展示详细内容。jQuery.dialogBox.js插件是一个轻量级且功能丰富的动画对话框工具...
jQuery.dialogBox.js是一款轻量级的JavaScript插件,专门用于创建对话框效果。它基于jQuery框架,通过简单的API调用即可实现各种对话框功能,包括警告、确认、信息提示等。插件的灵活性和易用性使其成为初学者快速...
mp4box.js, GPAC工具的MP4Box版本 MP4Box.js JavaScript库,在浏览器( 在NodeJS中) 中处理MP4文件,支持渐进解析。 灵感来自于来自的 MP4Box 工具。 它可以用于:获得关于MP4文件的信息,一个MP4文件,用于与
jQuery.dialogBox.js是一款优秀的JavaScript插件,它提供了丰富的动画效果和自定义选项,使得创建具有吸引力的对话框变得简单而高效。本文将深入探讨jQuery.dialogBox.js的特性和使用方法,帮助开发者更好地理解和...
MP4Box.js JavaScript库可在浏览器(和NodeJS)中处理MP4文件,并支持渐进式解析。 灵感来自项目的工具。 它可以用于: , MP4文件以与, 从MP4中样本以创建TextTracks。 在此页面上,您会找到有关如何 ,或或进行...
MP4Box.js 在浏览器中处理 MP4 文件的 JavaScript 库,支持渐进式解析。 灵感来自项目的工具。 X3DOM 集成文档文件: 可用于: [获取有关 MP4 文件的信息] (#getting-information), 将 MP4 文件以与, 从 MP4 中...
弹窗框box.js 2.0
一个js版本的box2d引擎,包含重力系统和碰撞检测,可以去github上下载,放在此处只是为了方便,侵删~
superbox.min.js
《jQuery.dialogBox.js插件详解及其应用》 在网页开发中,对话框是不可或缺的交互元素,用于提示信息、确认操作或展示详细内容。jQuery是一个广泛使用的JavaScript库,提供了丰富的功能来简化DOM操作和事件处理。...
Box2DJS是Box2D物理引擎的JavaScript端口。如何引入laya 参考 https://blog.csdn.net/weixin_41316824/article/details/88965058
选择框.js VanillaJS 自定义选择框 灵感来自 ##使用 只需将sb-init类添加到select 。 如果您需要添加自定义类,请使用此类名添加data-sb-custom属性 < select class =" sb-init " data-sb-custom =" custom-...
simplebox.js simplebox.js是一个轻量级的lightbox插件(〜936字节),可以轻松修改或扩展以满足您的需求。 该插件旨在快速,响应Swift,高效。 这个插件背后的想法是使设置灯箱的过程变得轻松。 我在查找和设置...
Box2D是一个非常知名的开源2D物理引擎,它在JavaScript版本中被称为Box2D--1.0.js。这个引擎主要用于创建具有真实世界物理特性的2D游戏和模拟。它的强大功能使得开发者能够轻松地实现物体碰撞检测、重力、摩擦力、...
- `jquery.selectBox.js`: 插件的主要JavaScript文件,包含了所有核心功能。 - `jquery.selectBox.css`: 默认的CSS样式文件,定义了基本的外观。 - `demo`目录:可能包含一个演示页面,展示了插件的用法和效果。 - `...
1. **源代码**:可能包括JavaScript文件(如`photobox.js`),这些文件包含了photobox插件的核心逻辑和功能实现。 2. **CSS样式**:如`photobox.css`,这是用来定义插件的外观和布局的样式表文件,包括按钮、蒙版、...