AngularJS-like apple sliding screen-removing controls _ AngularJS

In front-end development, in order to perform quick operations on list items, a button is sometimes added for simple implementation. However, buttons may sometimes affect the appearance or even the layout of the List rows. Searching on the internet is fruitless, but the AngularJs control, which is used to develop a single-page application (SPA), is similar to the apple sliding screen deletion control. Using AJAX call and partial page refreshing can reduce page jumps, to provide a better user experience. Angular ngView and its powerful routing mechanism are the core modules for implementing SPA applications. The page switch mentioned in this Article refers to this routing mechanism, that is, displaying different views based on different URLs.

In front-end development, in order to perform quick operations on list items, a button is sometimes added for simple implementation. However, buttons may sometimes affect the appearance or even the layout of the List rows. I did not find any result on the Internet, but I wrote this imitation Apple slide screen to delete the control.

Dependencies: angularJS and jQuery

Test browsers: Chrome, IE11, and mobile browsers

Code of the original list item:

This is the content displayed in the whole line.

Development goals:

This is the content displayed in the whole line.

First, write an angular command:

Myapp. directive ('slidedelete', function () {return {restrict: 'AE', scope: {text: "@", ondelete: "&"}, link: function (scope, element, attrs) {var w = $ (element ). outerWidth (); // var h = $ (element ). outerHeight (); // display height // button width var btn_w = 60; // design button: scope. btn = $ ('
'+ (Scope. text | 'delete') +'
'); // Transform the row and wrap the content with an absolute position p $ (element). contents (). wrapAll ('
'); // Add button: emerge (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 collapse 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 the background });}};});

Write another 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);}) sel F. 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. l Eft + = event. screenX-self. down; self. options. onslide & self. options. onslide (self, self. left);} // background function $. 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 = $ ('
'); $ ("Body"). append (bk);} return bk ;}}) (jQuery );

The AngularJS code about the above Code is similar to the code used to delete controls on the apple sliding screen. It has been tested in small series and can be safely used.