AngularJS仿蘋果滑屏刪除控制項_AngularJS

AngularJs被用來開發單頁面應用程式（SPA），利用AJAX調用配合頁面的局部重新整理，可以減少頁面跳轉，從而獲得更好的使用者體驗。Angular的ngView及其對應的強大路由機制，是實現SPA應用的核心模組。本文所說的頁面切換指的就是這個路由機制，即根據不同的url展示不同的視圖。

前端開發中，為了對清單項目進行快捷操作，有時就添個按鈕來簡單實現。但是，有時會發現按鈕影響美觀，甚至影響列表行的布局。稍在網上搜尋無果，而寫此仿蘋果滑屏刪除控制項。

依賴項：angularJS、jQuery

測試瀏覽器：Chrome、IE11、手機瀏覽器

原先清單項目代碼：

<div class="row-class" ng-repeat="item in list">這是整行顯示的內容</div>

開發目標：

<div class="row-class" ng-repeat="item in list" slide-delete text="刪除" ondelete="ondelete(item)">這是整行顯示的內容</div>

首先，要寫個angular指令：

myapp.directive('slideDelete', function() {return {restrict: 'AE',scope: {text: "@",ondelete: "&"},link: function (scope, element, attrs) {var w = $(element).outerWidth ();//應顯示的寬度var h = $(element).outerHeight();//應顯示的高度//按鈕寬度var btn_w = 60;//設計按鈕：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||'刪除')+'</div>');//改造行,用一個絕對位置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>');//添加按鈕：$(element).css({overflow:"hidden", position:"relative", "z-index":5999}).append(scope.btn)//滑屏功能.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);//背景，點擊收合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);}})//按鈕事件scope.btn.click(function(){scope.ondelete && scope.ondelete();$.fixedBackground(6000, 1).click();//關閉背景});}};});

再寫個滑屏事件類別，當然要相容滑鼠

(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);}//背景功能$.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);

關於上述代碼給大家介紹的AngularJS仿蘋果滑屏刪除控制項的相關代碼，都是小編測試過的，可以放心安全使用。