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