Skip to content

Commit d4cf185

Browse files
committed
add pop
1 parent 4f4bdd1 commit d4cf185

File tree

5 files changed

+167
-53
lines changed

5 files changed

+167
-53
lines changed

Diff for: common/test.html

+8-17
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,23 @@
55
<title>test jing pop</title>
66
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
77
<link rel="stylesheet" type="text/css" href="../css/pop.css"/>
8-
8+
<style type="text/css">
9+
.wrap{ width:500px; margin:40px auto;}
10+
#btn{width: 100%; height:40px; line-height:40px;cursor: pointer;}
11+
</style>
912
</head>
1013
<body>
11-
<div>111</div>
12-
<div>222</div>
13-
<div>333</div>
14-
<div id="test">
15-
<p>这是测试p1</p>
16-
<p>这是测试p2</p>
17-
</div>
18-
<div class="a b">111</div>
19-
<div class="a b c">222</div>
20-
<div class="a c b">333</div>
21-
<div id="test2">
22-
<p>这里是p2的内容</p>
14+
<div class="wrap">
15+
<input id="btn" type="submit" value="test-弹出层"/>
2316
</div>
2417
<script type="text/javascript" src="../js/jing.js"></script>
2518
<script type="text/javascript" src="../js/pop.js"></script>
2619
<!--<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>-->
2720
<script type="text/javascript">
28-
var p = new $.pop({
29-
21+
$('#btn').on('click', function(){
22+
new $.pop();
3023
});
3124

32-
33-
3425
</script>
3526
</body>
3627
</html>

Diff for: css/pop.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
.ui-pop{position:fixed;min-width:150px;border:10px solid #4b4b4b;background:#fff;overflow:hidden;z-index:99999;}
1+
.ui-pop{position:fixed;min-width:350px;min-height:300px;border:10px solid #4b4b4b;background:#fff;overflow:hidden;z-index:99999;}
22
.ui-pop h1{*margin-top:-3px;position:relative; text-indent:1em;padding:10px 0;font-size:14px;font-weight:normal;background:#efefef;border-bottom:1px solid #ccc;-moz-user-select:none;/* FF禁止选择文字 */-webkit-user-select:none;/* Chrome禁止选择文字 */}
33
.ui-pop h1 .ui-closeWin{position:absolute;right:10px;cursor:pointer;text-indent:0;}
44
.ui-pop h1 .ui-maxwin{position:absolute;right:50px;cursor:pointer;}
55
.ui-win-body{padding:10px;line-height:23px;}
66
.ui-win-footer{background:#f6f6f6;border-top:1px solid #dadee5;padding:5px;text-align:right;white-space:nowrap;}
77
.ui-win-footer button{border:1px solid #999;color:#333;cursor:pointer;margin-left:15px;padding:5px 8px;text-align:center;display:inline-block;}
8-
.ui-mask{position:absolute;left:0;top:0;z-index:77777;background:#fff;filter:alpha(opacity=50);opacity:0.5;cursor:pointer;}
98
.in{margin:50px auto;width:90px;}
109
.tab{border-collapse:collapse;border:1px solid #ccc;}
1110
.tab td{border:1px solid #ccc;padding:2px;}

Diff for: js/jing.js

+148-29
Original file line numberDiff line numberDiff line change
@@ -836,8 +836,14 @@
836836
});
837837
});
838838

839-
840839
var strundefined = typeof undefined;
840+
841+
var rformElems = /^(?:input|select|textarea)$/i,
842+
rkeyEvent = /^key/,
843+
rmouseEvent = /^(?:mouse|contextmenu)|click/,
844+
rfocusMorph = /^(?:focusinfocus|focusoutblur)$/,
845+
rtypenamespace = /^([^.]*)(?:\.(.+)|)$/;
846+
841847
// 事件
842848
$.event = {
843849
global : {},
@@ -849,21 +855,36 @@
849855
* @param data
850856
* @param selector
851857
*/
852-
add : function(elem, types, hanlder, data, selector){
858+
add : function(elem, types, handler, data, selector){
853859
var t,
854860
tmp,
861+
type,
855862
events,
856-
elemData = $._data(elem),
857-
eventHandle;
858-
863+
handlers,
864+
origType,
865+
handleObj,
866+
namespaces,
867+
handleObjIn,
868+
elemData = $._data(elem), // 1. 在$.cahce缓存中获取存储的事件句柄对象,如果没就新建elemData
869+
eventHandle; // 不仅仅只是只是充当一个回调函数的角色,而是一个实现了EventListener接口的对象
870+
871+
if(handler.handler){
872+
handleObjIn = handler;
873+
handler = handleObjIn.handler;
874+
selector = handleObjIn.selector;
875+
}
876+
877+
// 第二步:创建编号
859878
if(!handler.guid){
879+
// 用来寻找或者删除handler,因为这个东东是缓存在缓存对象上的,没有直接跟元素节点发生关联
860880
handler.guid = $.guid++;
861881
}
862882

863883
if(!(events = elemData.events)){
864884
events = elemData.events = {};
865885
}
866886

887+
// 第三步:分解事件名与句柄
867888
if(!(eventHandle = elemData.handle)){
868889
eventHandle = elemData.handle = function(e){
869890
return typeof $ !== strundefined && (!e || $.event.triggered !== e.type) ?
@@ -873,11 +894,51 @@
873894
eventHandle.elem = elem;
874895
}
875896

897+
// 第四步: 填充事件名与事件句柄
876898
types = (types || '').match(rnotwhite) || [''];
877899
t = types.length;
878900
while(t--){
901+
tmp = rtypenamespace.exec(types[t]) || [];
902+
type = origType = tmp[1];
903+
namespaces = (tmp[2] || '').split('.').sort();
904+
905+
if(!type){
906+
continue;
907+
}
908+
909+
handleObj = $.extend({
910+
type : type,
911+
origType : origType,
912+
data : data,
913+
handler : handler,
914+
guid : handler.guid,
915+
selector : selector,
916+
needsContext : selector,
917+
namespace : namespaces.join('.')
918+
}, handleObjIn);
919+
920+
if(!(handlers = events[type])){
921+
handlers = events[type] = [];
922+
handlers.delegateCount = 0;
923+
924+
if(elem.addEventListener){
925+
elem.addEventListener(type, eventHandle, false);
926+
} else if(elem.attachEvent){
927+
elem.attachEvent('on' + type, eventHandle);
928+
}
929+
}
930+
931+
if(selector){
932+
handlers.splice(handlers.delegateCount++, 0, handleObj);
933+
} else {
934+
handlers.push(handleObj);
935+
}
879936

937+
// 表示事件曾经使用过,用于事件优化
938+
$.event.global[type] = type;
880939
}
940+
941+
elem = null;
881942
},
882943
remove : function(){
883944

@@ -888,7 +949,19 @@
888949
/**
889950
* 分派(执行)事件处理函数
890951
*/
891-
dispatch : function(){
952+
dispatch : function(event){
953+
var i,
954+
j,
955+
args = slice.call(arguments),
956+
handlerQueue = [],
957+
handlers = ($._data(this, 'events') || {})[event.type] || [],
958+
handleObj;
959+
960+
args[0] = event;
961+
event.delegateTarget = this;
962+
963+
handlerQueue = $.event.handlers.call(this, event, handlers);
964+
handlers[0].handler.apply(handlerQueue[0].elem, args);
892965

893966
},
894967
/**
@@ -898,37 +971,41 @@
898971
* @param handlers
899972
*/
900973
handlers : function(event, handlers){
974+
var handleQueue = [],
975+
delegateCount = handlers.delegateCount;
901976

977+
if(delegateCount < handlers.length){
978+
handleQueue.push({ elem : this, handlers : handlers.slice(delegateCount) });
979+
}
980+
981+
return handleQueue;
902982
},
903983
/**
904984
* fix修正Event对象
905985
* 将原生的事件对象 event 修正为一个 可以读读写event 对象,并对该 event 的属性以及方法统一接口
906986
* @param event
907987
*/
908988
fix : function(event){
909-
910-
}
911-
}
989+
if(event[Jing.expando]){
990+
return event;
991+
}
912992

913-
/**
914-
* 构造函数创建可读写的 jQuery事件对象 event, 该对象即可以是原生事件对象 event 的增强版,也可以是用户自定义事件
915-
* @constructor
916-
*/
917-
$.Event = function(){
918-
919-
}
920-
921-
$.Event.prototype = {
922-
923-
}
993+
var i,
994+
prop,
995+
copy,
996+
type = event.type,
997+
originalEvent = event,
998+
fixHook = this.fixHooks[type];
924999

925-
_.returnTrue = function(){
926-
return true;
927-
}
928-
_.returnFalse = function(){
929-
return false;
1000+
if(!fixHook){
1001+
1002+
}
1003+
1004+
},
1005+
fixHooks : {}
9301006
}
9311007

1008+
9321009
$.fn.extend({
9331010
/**
9341011
* 事件绑定总入口
@@ -943,12 +1020,18 @@
9431020
var type,
9441021
origFn;
9451022

946-
if(data == null && fn == null){
1023+
if(data == null && fn == null){ // 以 on('click', fn)方式调用
9471024
fn = selector;
9481025
data = selector = undefined;
9491026
}
1027+
1028+
if(fn === false){
1029+
fn = _.returnFalse;
1030+
} else if(!fn) {
1031+
return this;
1032+
}
9501033

951-
return this.each(function(){
1034+
return this.each(function(){ // 对所有elem进行处理,比如$('#a,.a'),
9521035
$.event.add(this, types, fn, data, selector);
9531036
});
9541037
},
@@ -966,6 +1049,25 @@
9661049
}
9671050
});
9681051

1052+
/**
1053+
* 构造函数创建可读写的 jQuery事件对象 event, 该对象即可以是原生事件对象 event 的增强版,也可以是用户自定义事件
1054+
* @constructor
1055+
*/
1056+
$.Event = function(){
1057+
1058+
}
1059+
1060+
$.Event.prototype = {
1061+
1062+
}
1063+
1064+
_.returnTrue = function(){
1065+
return true;
1066+
}
1067+
_.returnFalse = function(){
1068+
return false;
1069+
}
1070+
9691071
/**
9701072
* 缓存内部方法
9711073
* @param elem
@@ -1081,7 +1183,7 @@
10811183

10821184
return arguments.length > 1 ?
10831185
this.each(function(){
1084-
$.data(this, key, value)
1186+
$.data(this, key, value);
10851187
}) :
10861188
elem ? $.data(elem, key) : undefined;
10871189
// elem ? _.dataAttr(elem, key, $.data(elem, key)) : undefined;
@@ -1093,6 +1195,22 @@
10931195
}
10941196
});
10951197

1198+
$.fn.show = function(){
1199+
this.css({ display : 'block' });
1200+
}
1201+
1202+
$.fn.hide = function(){
1203+
this.css({ display : 'none' });
1204+
}
1205+
1206+
/*
1207+
$.each(['toggle', 'show', 'hide'], function(i, name){
1208+
$.fn[name] = function(){
1209+
$(this).css({ display : 'none' })
1210+
}
1211+
});
1212+
*/
1213+
10961214
}(window));
10971215

10981216
// 2014-04-21 : 准备开发第一版
@@ -1103,4 +1221,5 @@
11031221
// 2014-05-07 : 增加$().appendTo,$().prependTo等方法,增加$().html();
11041222
// 2014-05-08 : 增加$().css({ color : 'red' }), $(window).width,height(), $(document).width,height();
11051223
// 2014-05-09 : 增加$().width()方法, event first;
1106-
// 2014-05-12 : 增加$().data(), $().removeData()方法
1224+
// 2014-05-12 : 增加$().data(), $().removeData()方法
1225+
// 2014-05-13 : 增加$().event.dispatch方法

Diff for: js/pop.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,20 @@
4747
defaults = this.defaults,
4848
handler = this.handler;
4949

50-
m = $('<div class="ui-mask"></div>').appendTo('body');
50+
this.mask = m = $('<div class="ui-mask"></div>').appendTo('body');
5151
m.css({ width :$(window).width(), height : $(document).height() });
5252
},
5353
// 绑定事件
5454
close : function(){
5555
var defaults = this.defaults,
5656
handler = this.handler,
57+
mask = this.mask,
5758
pop = this.pop;
5859

60+
pop.on('click', function(){
61+
$(this).hide();
62+
mask.hide();
63+
});
5964
}
6065
}
6166
}(window, Jing));

Diff for: test.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@
1111
<div id="test" style="width:100px;">test</div>
1212
<div class="a">aa</div>
1313
<div class="a">bbb</div>
14+
<input id="btn" type="button" value="test-click"/>
1415
<script type="text/javascript">
15-
$('#test').data('name', 'jikey');
16-
var a = $('#test').data('name');
17-
console.log(a);
18-
16+
$('#btn').on('click', function(){
17+
console.log('click');
18+
});
1919
</script>
2020
</body>
2121
</html>

0 commit comments

Comments
 (0)