Angularjs Imitation Apple slide screen Delete control _angularjs

ANGULARJS is used to develop a single page application (SPA), using AJAX calls to match the local refresh of the page, can reduce page jumps, so as to obtain a better user experience. Angular's ngview and its corresponding powerful routing mechanism are the core modules to realize the SPA application. This article refers to the page switching is the routing mechanism, that is, according to different URLs to display different views.

In the front-end development, in order to make the list items quick operation, sometimes add a button to simple implementation. However, it is sometimes found that the buttons affect the appearance and even affect the layout of the list rows. A little online search without fruit, and write this imitation Apple slide screen delete control.

Dependencies: Angularjs, JQuery

Test browser: Chrome, IE11, mobile browser

Original list Item code:

<div class= "Row-class" ng-repeat= "Item in List" >
this is the whole line of content
</div>

Development objectives:

<div class= "Row-class" ng-repeat= "Item in List" Slide-delete text= "delete" ondelete= "OnDelete (item)" >
This is the entire line of content displayed
</div>

First, write a angular directive:

Myapp.directive (' Slidedelete ', function () {return {restrict: ' AE ', scope: {text: "@", OnDelete: "&"}, Link:funct Ion (scope, element, Attrs) {var w = $ (Element). Outerwidth ()////should display the width of var h = $ (Element). Outerheight ();//height should be displayed//button width V
Ar btn_w = 60; Design button: scope.btn = $ (' <div style= ' position:absolute;z-index:5998;right:0;top:0;width: ' +btn_w+ ' px;height: ' +h+ ' Px;color: #fff background-color: #900, text-align:center;padding-top:10px ">" + (scope.text| | ')
Delete ') + ' </div> '); To transform the line, use an absolutely positioned div to wrap the contents up $ (Element). Contents (). Wrapall (' <div new_box style= "Position:absolute;z-index:5999;left : 0;top:0;width: ' +w+ ' px;height: ' +h+ ' Px;background-color: #fff;
></div> '); Add button: $ (Element). css ({overflow: "hidden", Position: "Relative", "Z-index": 5999}). Append (scope.btn)//sliding screen function. Slideable ({getleft:function (self) {return Self.children (': First-child '). Position (). Left;, setleft:function (self, x) {Self.children (": First-child"). CSS ({left:x<-btn_w &&-btn_w | | x<0 && x|| 0});}, Onslide:function (self, x) {Scope.open = x <-BTN_W/2; Self.css ("Z-index", Scope.open && 6001 | | 5999)
;
Background, click to close up var bk = $.fixedbackground (6000, scope.open); Scope.open && bk.data ("self", self). Click (function () {var self = bk.data ("self"); $.fixedbackground (6000, False
);
Self && self.css ("Z-index", 5999). Children (": First-child"). Animate ({left:0},100);
});
Self.children (": First-child"). Animate ({left:scope.open.-btn_w:0},100); })//button event Scope.btn.click (function () {scope.ondelete && scope.ondelete (); $.fixedbackground (6000, 1). Click ()
;//close background});
}
}; });

To write a slide-screen event class, of course, compatible with the mouse

(function ($) {$.fn.slideable = function (options) {var self = this; self.options = options; self.left = 0; self.down = 0;
self.pressed = false; Self.bindobj = Options.bindobj | |
Self Self.bindobj.bind ("MouseDown", function (event) {onmousedown (self, event);}) Self.bindobj.bind ("MouseMove", function (event)
{onmousemove (self, event);}) Self.bindobj.bind ("MouseUp", function (event) {onmouseup (self, event);}) Self.bindobj[0].addeventlistener ('
Touchstart ', function (event) {onmousedown (self, {screenx:event.changedtouches[0].pagex});}) Self.bindobj[0].addeventlistener (' Touchmove ', function (event) {onmousemove (self, {screenx:event.changedtouches[0) . Pagex}); }) Self.bindobj[0].addeventlistener (' Touchend ', function (event) {onmouseup (self, {screenx:event.changedtouches[0). Pagex});
}) return this; function onmousedown (self, event) {Self.down = Event.screenx; Self.options.onmousedown &&
Self.options.onmousedown (self); Self.left = Self.options.getLeft && self.options.getLeft (self) | |
0;
Self.pressed = true; function onmousemove (self, event) {self.pressed && self.options.setLeft && self.options.setLeft (self
, Self.left + Event.screenx-self.down); function onmouseup (self, event) {self.pressed = false; Self.left + = Event.screenx-self.down; self.options.onslide
;& self.options.onslide (self, self.left);  }//Background feature $.fixedbackground = function (Z_index, b_show) {var bk = $ (' #fixed-background-' +z_index+ '); if (!b_show) return BK
&& Bk.remove (); if (!) ( BK && bk.length>0)) {BK = $ (' <div id= ' fixed-background-' +z_index+ ' "style=" Position:fixed;z-index: ' +z_
Index+ '; Left:0;top:0;right:0;bottom:0;background-color:rgba (0,0,0,0) ">");
$ ("Body"). Append (BK);
return BK; }) (JQuery);

About the above code to introduce the Angularjs imitation Apple slide screen to delete the control of the relevant code, are small series tested, you can safely use.