Skip to content

Commit d65e9aa

Browse files
why520crazywhy520crazy
committed
添加 dismiss 功能，重新组织优化代码，并且修改相关说明
1 parent 3cd3df6 commit d65e9aa

File tree

4 files changed

+86
-28
lines changed

4 files changed

+86
-28
lines changed

‎README.md‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,23 @@ wt-pbox Worktile 使用的基于 Angular.js 的弹出层插件
1616
<button data-placement="left" ng-click="open($event)">open</button>
1717
1818
$scope.open = function ($event) {
19-
var pbox = $pbox.open({
20-
event : $event,
21-
templateUrl:"box.html",
22-
//template : '<div><a>ssss111111 {{aaa}}</a> dddd <button ng-click="add()">click</button></div>',
23-
controller: function ($scope,$pboxInstance) {
24-
$scope.aaa = "sss";
25-
$scope.add = function () {
26-
$scope.aaa = "bbbbbb";
27-
}
28-
}
29-
});
30-
};
19+
var pbox = $pbox.open({
20+
event : $event,
21+
templateUrl: "box.html",
22+
//template : '<div><a>ssss111111 {{aaa}}</a> dddd <button ng-click="add()">click</button></div>',
23+
controller : function ($scope, $pboxInstance) {
24+
$scope.aaa = "sss";
25+
$scope.add = function () {
26+
$scope.aaa = "bbbbbb";
27+
}
28+
}
29+
});
30+
pbox.result.then(function (result) {
31+
alert("close,result:" + result);
32+
}, function () {
33+
alert("dismiss");
34+
});
35+
};
3136
```
3237

3338
## 参数说明

‎sample/box.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<div class="pbox-header"> <h3>标题</h3></div><div class="pbox-body"> dddddd {{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}</div><div class="pbox-footer"> ddd <button class="btn btn-default" ng-click="$pboxInstance.close()">关闭</button></div>
1+
<div class="pbox-header"> <h3>标题</h3></div><div class="pbox-body"> dddddd {{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}</div><div class="pbox-footer"> ddd <button class="btn btn-default" ng-click="$pboxInstance.close('hello')">关闭</button> <button class="btn btn-default" ng-click="$pboxInstance.dismiss()">dismiss</button></div>

‎sample/index.html‎

Lines changed: 56 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,53 @@
1111
<div ng-controller="sampleCtrl">
1212
<button data-placement="left" ng-click="open($event)">open</button>
1313
<p>ddddd</p>
14-
<p>ddddd</p> <p>ddddd</p> <p>ddd <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="right" ng-click="open($event)">open right</button>dddffffffffffffddddddffffffffffffddddddffffffffffffddddddffffffffffffddddddffffffffffff <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="right" ng-click="open($event)">open right</button> <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="left" ng-click="open($event)">open</button></p> <p>ddddd</p> <p>ddddd</p> <button data-placement="left" ng-click="open($event)">open</button><p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p>
15-
<p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p>
14+
15+
<p>ddddd</p>
16+
17+
<p>ddddd</p>
18+
19+
<p>ddd
20+
<button data-placement="left" ng-click="open($event)">open</button>
21+
<button data-placement="right" ng-click="open($event)">open right</button>
22+
dddffffffffffffddddddffffffffffffddddddffffffffffffddddddffffffffffffddddddffffffffffff
23+
<button data-placement="left" ng-click="open($event)">open</button>
24+
<button data-placement="left" ng-click="open($event)">open</button>
25+
<button data-placement="right" ng-click="open($event)">open right</button>
26+
<button data-placement="left" ng-click="open($event)">open</button>
27+
<button data-placement="left" ng-click="open($event)">open</button>
28+
<button data-placement="left" ng-click="open($event)">open</button>
29+
</p>
30+
<p>ddddd</p>
31+
32+
<p>ddddd</p>
33+
<button data-placement="left" ng-click="open($event)">open</button>
34+
<p>ddddd</p>
35+
36+
<p>ddddd</p>
37+
38+
<p>ddddd</p>
39+
40+
<p>ddddd</p>
41+
42+
<p>ddddd</p>
43+
44+
<p>ddddd</p>
45+
46+
<p>ddddd</p>
47+
48+
<p>ddddd</p>
49+
50+
<p>ddddd</p>
51+
52+
<p>ddddd</p>
53+
54+
<p>ddddd</p>
55+
56+
<p>ddddd</p>
57+
58+
<p>ddddd</p>
59+
60+
<p>ddddd</p>
1661
<button data-placement="bottom" ng-click="open($event)">open</button>
1762
</div>
1863
<script src="../bower_components/jquery/dist/jquery.js"></script>
@@ -22,23 +67,24 @@
2267
<script>
2368
var app = angular.module("app", ["wt.pbox"]);
2469
app.controller("sampleCtrl", ["$scope", "$pbox", function ($scope, $pbox) {
25-
var pbox = null;
2670
$scope.open = function ($event) {
27-
pbox = $pbox.open({
28-
event : $event,
29-
templateUrl:"box.html",
71+
var pbox = $pbox.open({
72+
event : $event,
73+
templateUrl: "box.html",
3074
//template : '<div><a>ssss111111 {{aaa}}</a> dddd <button ng-click="add()">click</button></div>',
31-
controller: function ($scope,$pboxInstance) {
75+
controller : function ($scope, $pboxInstance) {
3276
$scope.aaa = "sss";
3377
$scope.add = function () {
3478
$scope.aaa = "bbbbbb";
3579
}
3680
}
3781
});
82+
pbox.result.then(function (result) {
83+
alert("close,result:" + result);
84+
}, function () {
85+
alert("dismiss");
86+
});
3887
};
39-
$scope.close = function () {
40-
pbox.close();
41-
}
4288
}]);
4389

4490
</script>

‎src/pbox.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,12 @@
233233

234234
$target.data(globalOptions.boxInstanceName, this);
235235

236+
PBoxModal.prototype._remove = function(){
237+
this._$target.removeData(globalOptions.boxInstanceName);
238+
this._$target.removeClass(this._options.openClass);
239+
this._pboxElement.remove();
240+
};
241+
236242
PBoxModal.prototype._bindEvents = function () {
237243
$document.bind("mousedown.pbox", function (e) {
238244
var _eTarget = angular.element(e.target);
@@ -260,21 +266,22 @@
260266
PBoxModal.prototype.open = function (tpl, scope) {
261267
this._pboxElement = angular.element('<div class="pbox"></div>');
262268
this._pboxElement.html(tpl);
263-
269+
this._$target.addClass(this._options.openClass);
264270
$compile(this._pboxElement)(scope);
265271
$body.append(this._pboxElement);
266272
$timeout(function () {
267-
$wtPosition.calculatePos(options, $target, _self._pboxElement);
273+
$wtPosition.calculatePos(_self._options, $target, _self._pboxElement);
268274
});
269275
this._bindEvents();
270276
};
271277

272278
PBoxModal.prototype.close = function (result) {
273-
this._$target.removeData(globalOptions.boxInstanceName);
274-
this._pboxElement.remove();
279+
this._remove();
275280
_resultDeferred.resolve(result);
276281
};
282+
277283
PBoxModal.prototype.dismiss = function (reason) {
284+
this._remove();
278285
_resultDeferred.reject(reason);
279286
}
280287
}
@@ -293,6 +300,7 @@
293300
throw new Error("The event.target not be null.")
294301
}
295302

303+
//verify is exists pbox,if exists close it and return,else open continue...
296304
var $target = util.getTarget(options.event);
297305
options.placement = $target.data("placement") ? $target.data("placement") : options.placement;
298306
options.align = $target.data("align") ? $target.data("align") : options.align;
@@ -305,7 +313,6 @@
305313
var templateAndResolvePromise =
306314
$q.all([getTemplatePromise(options)].concat(getResolvePromises(options.resolve)));
307315

308-
309316
templateAndResolvePromise.then(function resolveSuccess(tplAndVars) {
310317

311318
var pboxScope = (options.scope || $rootScope).$new();

0 commit comments

Comments
 (0)