Heim > Web-Frontend > js-Tutorial > jQuery弹出层插件简化版代码_jquery

jQuery弹出层插件简化版代码_jquery

PHP中文网
Freigeben: 2016-05-16 19:00:04
Original
1298 Leute haben es durchsucht

这个简化版不能在别的框架弹出层的,所以也就没有了那个cssurl属性了,也没有target 属性了

复制代码 代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

String.prototype.replaceAll = function(s1,s2){

return this.replace(new RegExp(s1,"gm"),s2);

};

(function($){

/*

* $-layer 0.1 - New Wave Javascript

*

* Copyright (c) 2008 King Wong

* $Date: 2008-10-09 $

*/

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___).css("top", _top);

$("#"+___id___).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:"layerp",

width:220,

height:220,

templete:&#39;<p 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>

</p><p style="border:solid #ff0000 1px; width:@width@px; height:@height@px;">

<p style="width:100%; height:100%; background-color:#ffffff;" id="@contentid@">

</p></p>&#39;,

content:&#39;&#39;,

title:&#39;&#39;,

isbg:true,

opacity:0.3

},

layerSetup: function( settings ) {

$.extend( $.layerSettings, settings );

___settings___[settings.id] = settings;

___id___ = settings.id;

},

layershow:function(){

var __bw = $("body").width();

var __bh = $("body").height() > $(window).height() ? $("body").height() : $(window).height();

var _width = $.layerSettings.width;

var _height = $.layerSettings.height;

if(document.getElementById(___id___)) return;

var _moveid = ___id___ + "_move";

var _titleid = ___id___ + "_title";

var _contentid = ___id___ + "_content";

var _cssurl = $.layerSettings.cssurl;

var opacity = $.layerSettings.opacity;

__index = $.layermaxindex();

var __left = (__bw - _width) > 0 ? (__bw - _width)/2 : 0;

var __top = 100;

var __bgp = &#39;<p id="&#39;+___id___+&#39;_background" style="background:#000000;

filter:alpha(opacity=&#39;+(opacity*100)+&#39;); opacity: &#39;+opacity+&#39;; width:&#39;+__bw+&#39;px;

height:&#39;+__bh+&#39;px; z-index:&#39;+(__index++)+&#39;; position:absolute; left:0px; top:0px;"></p>&#39;;

if($.layerSettings.isbg)

{

$("body").append(__bgp);

}

$("body").append(&#39;<p id="&#39;+___id___+&#39;" style="z-index:&#39;+__index+&#39;;position:absolute;

left:&#39;+__left+&#39;px; top:&#39;+__top+&#39;px;"></p>&#39;);

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___).append(__templete);

$("#"+_contentid).append($.layerSettings.content);

$("#"+_titleid).append($.layerSettings.title);

var idd = ___id___;

$(".layerclose").bind("click",function()

{

$.layerclose(idd);

});

$("#"+___id___).bind("click",function()

{

var id = this.id;

$.layerSetup(___settings___[id]);

$(this).css("z-index",$.layermaxindex());

});

$(document).bind("click",function(e)

{

var pos = $.getMousePosition(e);

});

$(document).mousemove(function(e){

if(isMouseDown && dragStatus[currentElement.id] != &#39;false&#39;){

$.updatePosition(e);

if(dragCallbacks[currentElement.id] != undefined){

dragCallbacks[currentElement.id](e, currentElement);

}

return false;

}

});

$(document).mouseup(function(e){

if(isMouseDown && dragStatus[currentElement.id] != &#39;false&#39;){

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).css("cursor", "move");

$("#"+_moveid).mousedown(function(e){

var id = this.id.replace("_move","");

___id___ = id;

$("#"+id).css("z-index",$.layermaxindex());

$.layerSetup(___settings___[id]);

if((dragStatus[___id___] == "off") || (dragStatus[___id___] == "handler" && !holdingHandler))

return bubblings["#"+___id___];

isMouseDown = true;

currentElement = $("#"+___id___);

var pos = $.getMousePosition(e);

lastMouseX = pos.x;

lastMouseY = pos.y;

lastElemTop = document.getElementById(___id___).offsetTop;

lastElemLeft = document.getElementById(___id___).offsetLeft;

$.updatePosition(e);

holdingHandler = true;

});

$("#"+_moveid).mouseup(function(e){

holdingHandler = false;

});

//end setHandler

})();

},

layerclose:function(__id)

{

$("#"+__id+"_background").remove();

$("#"+__id).remove();

},

layermaxindex:function()

{

var ___index = 0;

$.each($("*"),function(i,n){

var __tem = $(n).css("z-index");

if(__tem>0)

{

if(__tem > ___index)

{

___index = __tem + 1;

}

}

});

return ___index;

}

});

})(jQuery);

Nach dem Login kopieren



使用方法:
(1)显示层:

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

function show()

{

$.layerSetup({

id:"abc",//弹出层的ID

title:"test",//标题

content:&#39;test&#39;,//内容

isbg:false,//是否显示背景遮照层

opacity:0.3,//背景遮照层的透明度,值越大透明度越低,0为完全透明,1为不透明

templete:&#39;<p 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></p><p class="showwint_mini_content"><p class="showwint_mini_content_content" id="@contentid@"></p>

</p>&#39;//模板

});

$.layershow();

}

Nach dem Login kopieren


(2)关闭层:

复制代码 代码如下:

1

$.layerclose("弹出层的ID");

Nach dem Login kopieren


注意:那个如果你的模板有CSS文件的话,就要直接引入到本页面就行了,这个简化版不能在别的框架弹出层的,所以也就没有了那个cssurl属性了,也没有target 属性了。

以上就是jQuery弹出层插件简化版代码_jquery的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage