弹出层插件
String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,"gm"),s2); }; (function($){ /* * $-layer 0.1 - jquery pulg-in * * Copyright (c) 2008 King Wong * $Date: 2008-09-28 $ */ var ___win___ = window.self; var ___self___ = window.self; var ___id___ = ""; var ___settings___ = {}; var isMouseDown = false; var currentElement = null; var dropCallbacks = {}; var dragCallbacks = {}; var bubblings = {}; var lastMouseX; var lastMouseY; var lastElemTop; var lastElemLeft; var dragStatus = {}; var holdingHandler = false; $.getMousePosition = function(e){ var posx = 0; var posy = 0; if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } return { 'x': posx, 'y': posy }; }; $.updatePosition = function(e) { var pos = $.getMousePosition(e); var spanX = (pos.x - lastMouseX); var spanY = (pos.y - lastMouseY); var _top = (lastElemTop + spanY) > 0 ? (lastElemTop + spanY) : 0; var _left = (lastElemLeft + spanX) > 0 ? (lastElemLeft + spanX) : 0; $("#"+___id___,___win___.document).css("top", _top); $("#"+___id___,___win___.document).css("left", _left); }; $.fn.ondrag = function(callback){ return this.each(function(){ dragCallbacks[this.id] = callback; }); }; $.fn.ondrop = function(callback){ return this.each(function(){ dropCallbacks[this.id] = callback; }); }; $.fn.dragOff = function(){ return this.each(function(){ dragStatus[this.id] = 'off'; }); }; $.fn.dragOn = function(){ return this.each(function(){ dragStatus[this.id] = 'on'; }); }; $.extend({ layerSettings:{ id:"layerdiv", target:window.self, width:220, height:220, templete:'<div style="height:20px; width:@width@px; background-color:#777777;"><span id="@moveid@" style="position:relative; left:0px; top:0px; height:20px; width:100px;"><span id="@titleid@">@title@</span></span><span class="layerclose" style="position:relative; top:0px; float:right; right:20px; color:red;">close</span></div><div style="border:solid #ff0000 1px; width:@width@px; height:@height@px;"><div style="width:100%; height:100%; background-color:#ffffff;" id="@contentid@"></div></div>', cssurl:'', content:'', title:'', isbg:true, opacity:0.3 }, layerSetup: function( settings ) { $.extend( $.layerSettings, settings ); ___settings___[settings.id] = settings; ___id___ = settings.id; }, layershow:function(){ ___win___ = $.layerSettings.target == undefined || $.layerSettings.target == null ? window.self : $.layerSettings.target; var win = $.layerSettings.target == undefined || $.layerSettings.target == null ? window.self : $.layerSettings.target; var __bw = $("body",win.document).width(); var __bh = $("body",win.document).height() > $(window).height() ? $("body",win.document).height() : $(window).height(); var _width = $.layerSettings.width; var _height = $.layerSettings.height; if(___win___.document.getElementById(___id___)) return; var _moveid = ___id___ + "_move"; var _titleid = ___id___ + "_title"; var _contentid = ___id___ + "_content"; var _cssurl = $.layerSettings.cssurl; var opacity = $.layerSettings.opacity; (function(){ $("head",win.document).append('<link type="text/css" href="'+_cssurl+'" rel="stylesheet" />'); })(); __index = $.layermaxindex(); var __left = (__bw - _width) > 0 ? (__bw - _width)/2 : 0; var __top = 100; var __bgDiv = '<div id="'+___id___+'_background" style="background:#000000; filter:alpha(opacity='+(opacity*100)+'); opacity: '+opacity+'; width:'+__bw+'px; height:'+__bh+'px; z-index:'+(__index++)+'; position:absolute; left:0px; top:0px;"></div>'; if($.layerSettings.isbg) { $("body",win.document).append(__bgDiv); } $("body",win.document).append('<div id="'+___id___+'" style="z-index:'+__index+';position:absolute; left:'+__left+'px; top:'+__top+'px;"></div>'); var _templete = $.layerSettings.templete; var __templete = _templete.replaceAll("@width@",_width).replaceAll("@height@",_height).replaceAll("@titleid@",_titleid).replaceAll("@contentid@",_contentid).replaceAll("@title@",jQuery.layerSettings.title).replaceAll("@moveid@",_moveid); $("#"+___id___,win.document).append(__templete); $("#"+_contentid,win.document).append($.layerSettings.content); var self = window.self; var ___win = $.layerSettings.target.document; var idd = ___id___; $(".layerclose",win.document).bind("click",function() { self.$.layerclose(idd,___win); }); $("#"+___id___,win.document).bind("click",function() { var id = this.id; self.$.layerSetup(___settings___[id]); self.$(this).css("z-index",$.layermaxindex()); }); $(win.document,win).bind("click",function(e) { var pos = self.$.getMousePosition(e); }); $(win.document,win).mousemove(function(e){ if(isMouseDown && dragStatus[currentElement.id] != 'false'){ self.$.updatePosition(e); if(dragCallbacks[currentElement.id] != undefined){ dragCallbacks[currentElement.id](e, currentElement); } return false; } }); $(win.document,win).mouseup(function(e){ if(isMouseDown && dragStatus[currentElement.id] != 'false'){ isMouseDown = false; if(dropCallbacks[currentElement.id] != undefined){ dropCallbacks[currentElement.id](e, currentElement); } return false; } }); (function(){ bubblings[___id___] = true; dragStatus[___id___] = "on"; //setHandler bubblings[this.id] = true; dragStatus[_moveid] = "handler"; $("#"+_moveid,win.document).css("cursor", "move"); $("#"+_moveid,win.document).mousedown(function(e){ var id = this.id.replace("_move",""); ___id___ = id; self.$("#"+id,win.document).css("z-index",$.layermaxindex()); self.$.layerSetup(___settings___[id]); if((dragStatus[___id___] == "off") || (dragStatus[___id___] == "handler" && !holdingHandler)) return bubblings["#"+___id___]; isMouseDown = true; currentElement = self.$("#"+___id___); var pos = self.$.getMousePosition(e); lastMouseX = pos.x; lastMouseY = pos.y; lastElemTop = win.document.getElementById(___id___).offsetTop; lastElemLeft = win.document.getElementById(___id___).offsetLeft; self.$.updatePosition(e); holdingHandler = true; }); $("#"+_moveid,win.document).mouseup(function(e){ holdingHandler = false; }); //end setHandler })(); }, layerclose:function(__id,__win) { $("#"+__id+"_background",__win).remove(); $("#"+__id,__win).remove(); }, layermaxindex:function() { var ___index = 0; $.each($("*",___win___.document),function(i,n){ var __tem = $(n).css("z-index"); if(__tem>0) { if(__tem > ___index) { ___index = __tem + 1; } } }); return ___index; } }); })(jQuery);
使用方法:
$.layerSetup({ id:"弹出层的ID", title:'弹出层的标题文字', target:在哪个目标柜架弹出层如window.parent,默认为window.self, cssurl:'弹出层的CSS样式文件的地址', content:'弹出的内容', isbg:是否显示一个遮照层, templete:'为层设置布局模板如:<div class="showwint_mini_title"><span class="showwint_mini_close_btn"><a href="javascript:void(null);" class="layerclose"></a></span><span class="showwint_mini_title_content" id="@moveid@"><span id="@titleid@"></span></span></div><div class="showwint_mini_content"><div class="showwint_mini_content_content" id="@contentid@"></div></div>', opacity:设置遮照层的透明度, width:宽, height:高 }); $.layershow();
其中布局模板中的"@titleid@"、"@moveid@"、"@contentid@"、"@width@"、"@height@"为模板中放置标题ID、拖动ID、内容ID、宽、高等,可以根据你自己设计的模板不同放在不同的位置.

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini