AngularJS仿蘋果滑屏刪除控件
AngularJs被用來開發(fā)單頁面應(yīng)用程序(SPA),利用AJAX調(diào)用配合頁面的局部刷新,可以減少頁面跳轉(zhuǎn),從而獲得更好的用戶體驗。Angular的ngView及其對應(yīng)的強大路由機制,是實現(xiàn)SPA應(yīng)用的核心模塊。本文所說的頁面切換指的就是這個路由機制,即根據(jù)不同的url展示不同的視圖。
前端開發(fā)中,為了對列表項進行快捷操作,有時就添個按鈕來簡單實現(xiàn)。但是,有時會發(fā)現(xiàn)按鈕影響美觀,甚至影響列表行的布局。稍在網(wǎng)上搜索無果,而寫此仿蘋果滑屏刪除控件。
依賴項:angularJS、jQuery
測試瀏覽器:Chrome、IE11、手機瀏覽器
原先列表項代碼:
<div class="row-class" ng-repeat="item in list"> 這是整行顯示的內(nèi)容 </div>
開發(fā)目標:
<div class="row-class" ng-repeat="item in list" slide-delete text="刪除" ondelete="ondelete(item)"> 這是整行顯示的內(nèi)容 </div>
首先,要寫個angular指令:
myapp.directive('slideDelete', function() { return { restrict: 'AE', scope: { text: "@", ondelete: "&" }, link: function (scope, element, attrs) { var w = $(element).outerWidth ();//應(yīng)顯示的寬度 var h = $(element).outerHeight();//應(yīng)顯示的高度 //按鈕寬度 var btn_w = 60; //設(shè)計按鈕: 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將內(nèi)容包裹起來 $(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();//關(guān)閉背景 }); } }; });
再寫個滑屏事件類,當然要兼容鼠標
(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);
關(guān)于上述代碼給大家介紹的AngularJS仿蘋果滑屏刪除控件的相關(guān)代碼,都是小編測試過的,可以放心安全使用。
- Hammer.js+輪播原理實現(xiàn)簡潔的滑屏功能
- javascript單頁面手勢滑屏切換原理詳解
- JavaScript資源預(yù)加載組件和滑屏組件的使用推薦
- javascript實現(xiàn)鎖定網(wǎng)頁、密碼解鎖效果(類似系統(tǒng)屏幕保護效果)
- javascript實現(xiàn)滑動解鎖功能
- javascript實現(xiàn)滑動解鎖功能
- jQuery使用unlock.js插件實現(xiàn)滑動解鎖
- 純JavaScript代碼實現(xiàn)移動設(shè)備繪圖解鎖
- js+html5實現(xiàn)手機九宮格密碼解鎖功能
- js實現(xiàn)類似iphone的網(wǎng)頁滑屏解鎖功能示例【附源碼下載】
相關(guān)文章
angularjs實現(xiàn)多選框分段全選效果實現(xiàn)
這篇文章主要為大家介紹了angularjs實現(xiàn)多選框分段全選效果實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法
下面小編就為大家分享一篇angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03Angularjs編寫KindEditor,UEidtor,jQuery指令
使用過 AngularJS 的朋友應(yīng)該最感興趣的是它的指令?,F(xiàn)今市場上的前端框架也只有AngularJS 擁有自定義指令的功能,并且AngularJS 是目前唯一提供Web應(yīng)用可復(fù)用能力的框架。2015-01-01在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟
在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個現(xiàn)有組件并重寫它以使用 NgTemplateOutlet,需要的朋友可以參考下2024-03-03AngularJs html compiler詳解及示例代碼
本文主要介紹AngularJs html compiler的知識講解,這里整理了相關(guān)資料及相關(guān)示例代碼,有興趣的小伙伴可以參考下2016-09-09