AngularJS is an apple-like sliding screen deletion control and angularjs control.

AngularJS is an apple-like sliding screen deletion control and angularjs control.

AngularJs is used to develop a single page application (SPA). Using AJAX call and partial page Refresh can reduce page jumps for 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:

<Div class = "row-class" ng-repeat = "item in list"> This is the content displayed in the whole line </div>

Development goals:

<Div class = "row-class" ng-repeat = "item in list" slide-delete text = "delete" ondelete = "ondelete (item) "> This is the content displayed in the whole line </div>

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 = $ ('<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: cen Ter; padding-top: 10px "> '+ (scope. text | 'delete') + '</div>'); // transform the row and wrap the content with an absolute positioning div $ (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: 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 collapse var bk =$. fixedBackground (6000, scope. open); scope. open & bk. data ("self", self ). click (function () {var self = bk. data ("self"); $. fixedBackground (6000, fal Se); 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 = $ ('<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) "> '); $ ("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.

Articles you may be interested in:

• How to Use AngularJS framework to implement control verification with a line of JS Code
• Use JQUERY paging control in ANGULARJS