İçerik
- 01. Araçlar
- 02. Işık kutusunu oluşturma
- 03. Başlarken
- 04. Kazan plakası
- 05. HTML
- 06. Küçük resimleri şekillendirme
- Temel ışık kutusu
- 07. Fayda fonksiyonları
- 08. Başlatma
- 09. Kromun oluşturulması
- 10. Slaytları oluşturma
- 11. goTo
- 12. Hareket desteği ekleme
- 13. Dokunma olaylarını dinleme
- 14. handleTouchEvents işlevi
- Bilgi gerekli: Orta CSS, orta ila gelişmiş JavaScript
- Gerektirir: Android veya iOS dokunmatik cihaz
- Proje Zamanı: 2-3 saat
- Destek dosyası
Orijinal lightbox.js 2005'te piyasaya sürüldüğünden beri Lightbox widget'ları web'de standarttır. Lightbox, slaytlar arasında gezinmek için genellikle "sonraki" ve "önceki" düğmeleriyle büyük resimleri görüntülemek için kalıcı bir iletişim kutusu oluşturur.
Dokunmatik cihazların kullanımındaki patlamadan bu yana web siteleri, ışık kutularını değişen başarı dereceleriyle hareket etkileşimini desteklemek için güncelledi. Bu eğitimde size hareket destekli basit bir lightbox'ın nasıl oluşturulacağını göstereceğim. Bu süreçte, dokunmatik arayüzlerin algılanan performansını iyileştirmenin yanı sıra gerçek performansı iyileştirmek için bazı basit püf noktaları hakkında biraz bilgi edineceksiniz.
Dokunmatik cihazlar için kod yazmak, temelde bir masaüstü için kod yazmaktan farklıdır. Masaüstü koduyla olabildiğince çok kod paylaşabilirsiniz (ve paylaşmalısınız), ancak yaptığınız şeyde her zaman büyük farklılıklar olacaktır.
Karşılaştırmalar, en yaygın dokunmatik cihazların performans açısından 1998 dolaylarında masaüstü bilgisayarlarla karşılaştırılabilir olduğunu gösteriyor. Genellikle orijinal iMac ile aynı seviyede yaklaşık 256 MB RAM ve CPU performansına sahipler. Masaüstünde 'sadece çalışmaya' alışkın olduğumuz teknikler olmayacak cep telefonlarında ve tabletlerde iyi çalışır. Neyse ki bizim için bu cihazlar genellikle grafikler için, özellikle de ekrandaki öğeleri hareket ettirmek için iyi bir şekilde optimize edilmiştir. iOS cihazlar ve Android 3.0 ve üzeri donanım grafik hızlandırma özelliğine sahiptir.
Etkili bir şekilde, bu cihazları şu şekilde hayal edebilirsiniz: düzgün ekran kartlarına sahip berbat bilgisayarlar.
Son 20 yıldır masaüstü bilgisayarlarımızla aşağı yukarı aynı şekilde etkileşim içindeyiz. Bir fare işaretçisini hareket ettiriyoruz ve kontrollere tıklıyoruz. Düğmeler, kapalı kutular, bağlantılar ve kaydırma çubukları hem kullanıcılar hem de geliştiriciler için ikinci doğadır. Dokunmatik arayüzler, tamamen farklı bir kurallar dizisi sunar. Yeni sözleşmelerden en yaygın olanlarından biri, Tokatlamak. "Kaydırma" ile birden çok öğe, sanki bir satırdaymış gibi sunulur ve kullanıcı, aralarında gezinmek için bir "kaydırma" hareketini kullanabilir.
Kaydırma o kadar yaygın bir modeldir ki, kullanıcılara bundan bahsetmenize bile gerek yoktur - bir liste gibi görünen bir liste sunulduğunda, kullanıcılar içgüdüsel olarak kaydırmayı deneyeceklerdir.
Çoğunlukla, özellikle yavaş bağlantılar ve yavaş cihazlarla uğraşırken, kodumuzu daha hızlı hale getiremeyiz. Ama arayüzü yapabiliriz görünmek doğru optimizasyonlara odaklanarak daha hızlı.
Algılanan performansı optimize etmenin en sevdiğim örneği TiVo. On üç yıl önce, ilk TiVo kutuları ortaya çıktığında inanılmaz derecede yavaşlardı. (16MB RAM ve 54mhz CPU!) Uzaktan kumandayla bir şeye tıkladıktan sonra, özellikle de çalmaya veya kaydetmeye başladıysanız, bir şeyin olması çok uzun sürebilir. Yine de hiç kimse TiVo'nun yavaş olmasından şikayet etmedi. Bence bu ses yüzünden. TiVo arayüzünün en bilinen kısmı, bir düğmeyi tıkladıktan sonra çalan "bip boop" sesiydi. Bu ses anında çalıyor. TiVo'daki mühendisler, sesin olabildiğince hızlı yüklenmesini sağladı, böylece daha sonra ne olursa olsun, kullanıcı arayüzün ölmediğini biliyordu. Bu küçük ses, kullanıcıya isteğinin duyulduğunu söyler.
Web'de aynı şeyi yapan bir kongre geliştirdik: spinner. Bir tıklamadan sonra hemen bir çark grafiği atarız, böylece kullanıcı duyulduğu mesajı alır. Mobil cihazlarda işleri farklı şekilde yapmalıyız
Hareketler, tıklamalar gibi ayrı eylemler değildir. Yine de, bir arayüzün hızlı görünmesini sağlamak için kullanıcılara bazı geri bildirimler vermeliyiz. Onlar hareket ettikçe arayüzü bir şekilde hareket ettiririz, böylece onları "duyduğumuzu" bilirler.
01. Araçlar
Yanıt veren arayüzler, öğelerin olabildiğince hızlı hareket etmesini gerektirir - hareket, arayüzün isteklerine yanıt verdiğini kullanıcıya nasıl gösterdiğimizdir. Bunun için JavaScript animasyonlarını kullanmak çok yavaş. Bunun yerine CSS dönüşümlerini ve geçişlerini kullanırız: performans için dönüşümler ve geçişler, böylece animasyonlar JavaScript yürütülmesini engellemeden çalışabilir.
Bu eğitim boyunca tüm hareketler ve animasyonlar için dönüşümler ve geçişler kullanacağım.
Mümkün olduğunca kullanmaktan hoşlandığım bir başka optimizasyon da "salt yazılır DOM" adını verdiğim şey. DOM'dan özelliklerin ve değerlerin okunması pahalıdır ve genellikle gereksizdir. Işık kutusu için tüm okumaları başlatma aşamasında birleştirmeye çalışıyorum. Bundan sonra durumu JavaScript'te tutuyorum ve gerektiğinde basit aritmetik yapıyorum.
02. Işık kutusunu oluşturma
Bu eğitim için birkaç küçük resim içeren bir sayfa oluşturacağız. Küçük resimlere tıklamak (veya dokunmak) bir ışık kutusu başlatacaktır. Işık kutusunun içine girdikten sonra, kullanıcı resimler arasında geçiş yapabilir ve ardından ışık kutusundan çıkmak için "kapat" düğmesine dokunabilir.
Hareket arayüzünü oluştururken, algılanan performansın önemini aklınızda bulundurun. Işık kutusunda bu, kullanıcı kaydırırken slaytların hareket ettiğinden emin olmak anlamına gelir. Kullanıcı hareket etmeyi bıraktığında slaytlar bir sonraki konuma hareket etmeli veya slayt ilerlemiyorsa "geri çekilmelidir".
"Geri çekilme" animasyonu kritiktir. Bu, kullanıcının asla arayüzün ölmüş gibi hissetmediğinden emin olmaktır.
03. Başlarken
Aşağıdaki dosyaları oluşturmak:
hafif kutu/
reset.css
slides.css
slides.html
slides.js
04. Kazan plakası
HTML basit olacak. Bu sadece demo uğruna değil. Tanım gereği karmaşık bir DOM ağacı daha yavaştır. Stiller, dom öğesi alma ve yeniden boyama, daha karmaşık bir DOM ağacında daha pahalıdır. Berbat bilgisayarları hedeflediğimiz için, her bit önemlidir, bu yüzden baştan itibaren basit tutun.
Temiz bir CSS seçenek listesi ile başlamak için Eric Meyer'den reset.css kullanıyorum. Ayrıca görüntü alanını, sayfanın yakınlaştırılamayacağı şekilde ayarlıyorum.
Hareketleri engelleyeceği için yakınlaştırmak için yerel kıstırma özelliğini devre dışı bıraktım. (Kıstırma hareketini desteklemenin doğru yolu, onu JavaScript'te yeniden uygulamaktır. Yakınlaştırmak için kıstırma hareketi, kendi eğiticisini hak eder, bu nedenle bunu şimdilik göz ardı edeceğiz.)
JS tarafında, jQuery sözdizimine sahip çok hafif bir çerçeve olan zepto.js kullanıyorum. Hiçbir çerçeve gerçekten gerekli değildir, ancak bazı sıradan görevlerde çalışmayı biraz hızlandırır. Gerçek hareket etkileşimleri için yerel API'leri kullanacağız.
! DOCTYPE html>
html>
kafa>
meta charset = "utf-8">
meta name = "görüntü alanı" content = "width = device-width, initial-scale = 1,0, maximum-scale = 1,0, user-scaleable = hayır">
başlık> Dokunmatik Arayüz Demosu / başlığı>
link rel = "stylesheet" href = "reset.css" type = "text / css" media = "screen" charset = "utf-8">
link rel = "stylesheet" href = "slides.css" type = "text / css" media = "screen" harset = "utf-8">
/ head>
gövde>
/ body>
script src = "zepto.min.js" type = "text / javascript" charset = "utf-8"> / script>
/ html>
05. HTML
Sırasız küçük resim listesi içeren bir div oluşturdum. Özel olan tek parça veri nitelikleridir. Dahil ettiğim her resim için veri tam genişlikli ve veri tam yüksekliği küçük resmin temsil ettiği tam boyutlu görüntünün yüksekliği ve genişliğiyle. Bu numarayı görüntüyü getirdikten sonra alabilirim, ancak önden olması önizleme görüntülerini yüklemeyi ve kullanıcıyı sunucu yanıtlarını bekletmeden düğümleri oluşturmayı mümkün kılar.
a href = "http://www.flickr.com/photos/protohiro/6664939239/in/photostream/">
img data-full-height = "427" data-full-width = "640" src = "http://farm8.staticflickr.com/7142/6664939239_7a6c846ec9_s.webp">
/ a>
/ li>
li>
a href = "http://www.flickr.com/photos/protohiro/6664957519/in/photostream">
img data-full-height = "424" data-full-width = "640" src = "http://farm8.staticflickr.com/7001/6664957519_582f716e38_s.webp">
/ a>
/ li>
li>
a href = "http://www.flickr.com/photos/protohiro/6664955215/in/photostream">
img data-full-height = "640" data-full-width = "427" src = "http://farm8.staticflickr.com/7019/6664955215_d49f2a0b18_s.webp">
/ a>
/ li>
li>
a href = "http://www.flickr.com/photos/protohiro/6664952047/in/photostream">
img data-full-height = "426" data-full-width = "640" src = "http://farm8.staticflickr.com/7017/6664952047_6955870ecb_s.webp">
/ a>
/ li>
li>
a href = "http://www.flickr.com/photos/protohiro/6664948305/in/photostream">
img data-full-height = "428" data-full-width = "640" src = "http://farm8.staticflickr.com/7149/6664948305_fb5a6276e5_s.webp">
/ a>
/ li>
/ ul>
/ div>
/ div>
/ body>
script src = "zepto.min.js" type = "text / javascript" charset = "utf-8"> / script>
script src = "slides.js" type = "text / javascript" charset = "utf-8"> / script>
script type = "text / javascript" charset = "utf-8">
// bu kod ışık kutusunu başlatır ve kullanıcı
// bir slayta tıklar
$ (belge) .ready (işlev () {
var lightbox = new saw.Lightbox (’. carousel’);
$ (document) .on (’click’, ’a’, function (e) {
e.preventDefault ();
lightbox.show (this.href);
});
});
/ script>
/ html>
06. Küçük resimleri şekillendirme
Şimdi küçük güzel küçük resimler ve diğer bazı görsel güzellikler ekleyin:
html {
arkaplan: # f1eee4;
yazı tipi ailesi: Gürcistan;
renk: # 7d7f94;
}
h1 {
renk: # ba4a00;
}
.Hoşgeldiniz {
metin hizalama: merkez;
metin gölgesi: 1px 1px 1px #fff;
}
.welcome h1 {
yazı tipi boyutu: 20px;
yazı tipi ağırlığı: kalın;
}
.Hoşgeldiniz {
-webkit-box-boyutlandırma: border-box; / * Safari / Chrome, diğer WebKit * /
-moz-kutu-boyutlandırma: kenarlık-kutu; / * Firefox, diğer Gecko * /
kutu boyutlandırma: border-box; / * Opera / IE 8+ * /
kenar boşluğu: 5px;
dolgu: 10px;
kutu gölgesi: 2px 2px 5px rgba (0,0,0,0.5);
kenarlık yarıçapı: 5px;
}
.carousel {
kenar boşluğu: 5px;
}
.carousel ul li {
yükseklik: 70px;
genişlik: 70px;
kenar boşluğu: 5px;
taşma: gizli;
Ekran bloğu;
şamandıra: sol;
kenarlık yarıçapı: 5px;
kutu gölgesi: 1px 1px 2px rgba (0,0,0,0.5), -1px -1px 2px rgba (255,255,255,1);
}
Temel ışık kutusu
Işık kutusu için JavaScript'in birkaç farklı şey yapması gerekir:
- Lightbox ile ilgili verileri toplayın ve başlangıç durumuna getirin
- Işık kutusunu gizle ve göster
- Işık kutusu kromu için HTML oluşturun
- Slaytları oluşturun
- Dokunma olaylarını yönetin
07. Fayda fonksiyonları
Yazmak yerine -webkit-dönüşümü ve çeviri3d Tekrar tekrar, işi benim için yapmak için birkaç yardımcı fonksiyon yaratıyorum.
function prefixify (str) {
var ua = window.navigator.userAgent;
eğer (ua.indexOf (’WebKit’)! == -1) {
return ’-webkit-’ + str;
}
eğer (ua.indexOf (’Opera’)! == -1) {
dönüş '-o-' + str;
}
eğer (ua.indexOf (’Gecko’)! == -1) {
dönüş '-moz-' + str;
}
dönüş str;
}
function setPosition (düğüm, sol) {
// node.css ('sol', sol + 'piksel');
node.css (prefixify (’transform’), "translate3d (" + left + "px, 0, 0)");
}
function addTransitions (düğüm) {
node.css (prefixify (’transition’), prefixify (’transform’) + ’.25s easy-in-out’);
düğüm [0] .addEventListener ('webkitTransitionEnd', function (e) {
window.setTimeout (function () {
$ (e.target) .css (’- webkit-transition’, ’none’);
}, 0)
})
}
function cleanTransitions (düğüm) {
node.css (prefixify (’transition’), ‘none’);
}
Işık kutusu widget'ımız, işleri hızlandırmak için sayfa yüklenirken başlatılacak. Başlatma, bir veri modeli oluşturmak için sayfadaki tüm küçük resimleri bulma meselesidir. Lightbox'ın ışık kutusu için HTML oluşturması ve olay işleyicileri eklemesi gösterildiğinde bekleyeceğiz.
08. Başlatma
Işık kutusu nesnesi için, bir konteyner düğümü seçicisini tek parametresi olarak alan bir yapıcı kullanıyorum.
// ad alanını temizle
window.saw = (işlev ($) {
// ışık kutusu yapıcısı
function Işık Kutusu (seçici) {
var container_node = $ (seçici),
sarıcı
chromeBuilt,
currentSlide = 0,
slideData = [],
boundingBox = [0,0],
slideMap = {};
function init () {
// init işlevi
}
dönüş {
göster: göster,
hide: hide
};
}
dönüş {
Işık Kutusu: Işık Kutusu
};
}($));
İnit işlevi tüm li düğümlerini alır, küçük resimleri bulur ve bilgileri slideData dizisine kaydeder. Aynı zamanda, küçük resim bağlantısının href'ini dizideki slideData öğesine eşleyen slideMap adlı bir nesneyi tutuyorum. Bu, dizideki tüm veriler arasında dolaşmak veya DOM'u ek bilgilerle dekore etmek zorunda kalmadan tıklama bilgilerindeki verileri hızlı bir şekilde aramamı sağlıyor.
function init () {
var slides = container_node.find (’li’);
slides.each (function (i, el) {
var thisSlide = {}, thisImg = $ (el) .find (’img’);
thisSlide.url = thisImg.attr (’src’);
thisSlide.height = thisImg.attr (’data-full-height’);
thisSlide.width = thisImg.attr (’data-full-width’);
thisSlide.link = $ (el) .find (’a’). attr (’href’);
// dizi dizinini slideMap nesnesine kaydederken slayt bilgilerini slideData dizisine itin.
slideMap [thisSlide.link] = slideData.push (thisSlide) - 1;
});
}
Başlatma işleminin geri kalanı, göstermek yöntem.
// bu, satır içi komut dosyasından çağrılan işlevdir
function show (startSlide) {
eğer (! chromeBuilt) {
buildChrome ();
attachEvents ();
}
wrapper.show ();
// görüntü alanı boyutunu takip edin
boundingBox = [window.innerWidth, window.innerHeight];
goTo (slideMap [startSlide]);
}
09. Kromun oluşturulması
buildChrome işlevi, ışık kutusu için HTML sarmalayıcı oluşturur ve ardından kullanıcı ışık kutusunu her gizlediğinde veya gösterdiğinde kromun yeniden oluşturulmaması için bir semafor ayarlar. Basit olması adına, HTML'nin kendisi için ayrı bir şablon işlevi oluşturdum:
var wrapperTemplate = function () a href = "#"> sonraki / a> / div> ’+
’/ Div>’;
function buildChrome () {
wrapper = $ (wrapperTemplate ()). addClass ('slidewrap');
$ (’Body’). Append (sarmalayıcı);
chromeBuilt = true;
}
Chrome'u oluşturmanın son adımı, "sonraki" ve "önceki" bağlantıları için bir olay işleyicisi eklemektir:
function handleClicks (e) {
e.preventDefault ();
var targ = $ (e.target);
eğer (targ.hasClass ('sonraki')) {
goTo (currentSlide + 1);
} else if (targ.hasClass (’prev’)) {
goTo (currentSlide - 1);
} Başka {
saklamak();
}
}
function attachEvents () {
wrapper.on ('click', handleClicks, false);
}
Artık ışık kutusu kromu bazı gerçek slaytlar için hazır. Gösteri işlevimde, başlangıç slaydını yüklemek için goTo () 'yu çağırıyorum. Bu işlev, parametre tarafından tanımlanan slaydı gösterir, ancak aynı zamanda slaytları ihtiyaç duyduğumda tembelce oluşturacaktır. (Bir yana: deve harfsiz bir goto işlevini çağırmayın, goto JavaScript'te ayrılmış bir sözcüktür).
10. Slaytları oluşturma
Şimdi baktığım slayt görünüm alanında ve önceki ve sonraki slaytlar ekranın hemen dışında, solda ve sağda. Kullanıcı "ileri" yi tıkladığında (veya kaydırdığında), geçerli slayt sola taşınır ve sonraki slayt yerine taşınır.
// slaytlar için bir "slayt" nesnesi alır
function slideTemplate (slayt)
return ’div> span>’ + slide.id + ’/ span> div style =" background-image: url (’+ slide.url.replace (/ _ s
Ben bir img> yerine bir div> kullanıyorum çünkü (en azından şimdilik) mobil tarayıcılar bir img> çiziminde arka plan resmine sahip bir div> yerine çok daha yavaştır. Mobil cihazlarla uğraşırken, genellikle hızın düzeltilmesi tercih edilir. Erişilebilirlik sorunları, ARIA rolleriyle kolayca çözülebilir.
BuildSlide işlevinin kendisi daha karmaşıktır. Slayt verilerini slayt şablonundan iletmeye ek olarak, kodun ayrıca slaydın görüntü alanına sığdığından da emin olması gerekir. Bu, sığmazsa görüntünün ne kadar ölçeklendirileceğini bulmanın basit bir meselesidir. Tarayıcının yeniden boyutlandırma işlemine izin verebiliriz.
function buildSlide (slideNum) {
var thisSlide, s, img, scaleFactor = 1, w, h;
eğer (! slideData [slideNum] || slideData [slideNum] .node) {
yanlış dönüş;
}
var thisSlide = slideData [slideNum];
var s = $ (slideTemplate (thisSlide));
var img = s.children (’div’);
// görüntü çok büyük! ölçeklendirin!
if (thisSlide.width> boundingBox [0] || thisSlide.height> boundingBox [1]) {
eğer (thisSlide.width> thisSlide.height) {
scaleFactor = boundingBox [0] /thisSlide.width;
} Başka {
scaleFactor = boundingBox [1] /thisSlide.height;
}
w = Math.round (thisSlide.width * scaleFactor);
h = Math.round (thisSlide.height * scaleFactor);
img.css ('yükseklik', h + 'piksel');
img.css ('genişlik', w + 'piksel');
}Başka{
img.css (’yükseklik’, thisSlide.height + ’px’);
img.css (’width’, thisSlide.width + ’px’);
}
thisSlide.node = s;
wrapper.append (s);
// yeni slaydı başlangıç konumuna yerleştirin
setPosition (s, boundingBox [0]);
İadeler;
}
11. goTo
GoTo, istenen slaydı ve bitişik slaytları konumuna taşır.
function goTo (slideNum) {
var thisSlide;
// aradığımız slayt yoksa, gidelim
// geçerli slayta geri dönün. Bu, sağlamanın kullanışlı bir etkisine sahiptir.
// Hareket sırasında "geri bildirim" geri bildirimi, slayt sadece hareketlendirilecektir
// pozisyona geri dön
eğer (! slideData [slideNum]) {
dönüş;
}
thisSlide = slideData [slideNum];
// bitişik slaytlar oluştur
buildSlide (slideNum);
buildSlide (slideNum + 1);
buildSlide (slideNum - 1);
// süslü yap
addTransitions (thisSlide.node);
// mevcut slaydı yerine koy
setPosition (thisSlide.node, 0);
// bitişik slaytları kaydırın
eğer (slideData [slideNum - 1] && slideData [slideNum-1] .node) {
addTransitions (slideData [slideNum - 1] .node);
setPosition (slideData [slideNum - 1] .node, (0 - boundingBox [0]));
}
eğer (slideData [slideNum + 1] && slideData [slideNum + 1] .node) {
addTransitions (slideData [slideNum + 1] .node);
setPosition (slideData [slideNum + 1] .node, boundingBox [0]);
}
// durumu güncelle
currentSlide = slideNum;
}
Bu noktada ışık kutusu az ya da çok işlevseldir. Sonraki ve önceki slayta gidebiliriz, gizleyebilir ve gösterebiliriz. İlk ve son slayta ne zaman ulaştıklarını bilmek ideal olacaktır, belki kontrolleri grileştirerek. Bu, masaüstünde veya dokunmatik bir cihazda kullanılabilir bir ışık kutusudur.
12. Hareket desteği ekleme
Çoğu dokunmatik cihaz, yerel bir fotoğraf görüntüleyici içerir. Orijinal iPhone fotoğrafları uygulamasını izleyen bu çeşitli uygulamalar, bir kullanıcı arayüzü kuralı oluşturdu: sola kaydırmak slaydı ilerletir. Bu etkileşimin hiçbir geri bildirim sağlamayan birkaç uygulamasını gördüm; jest tamamlandığında slaytlar basitçe ilerler. En iyi yaklaşım, canlı geri bildirim vermektir. Kullanıcı kaydırdıkça, slayt kullanıcının parmağının altında hareket eder ve sonraki (veya önceki) slayt solda veya sağda görünür. Bu, kullanıcının bir fotoğraf şeridi boyunca çektiği yanılsamasını verir.
13. Dokunma olaylarını dinleme
Zepto dahil birçok kitaplık, dokunma etkinlikleri için destek içerir. Genel olarak bunları kullanmanızı önermem. Dokunma olaylarını işlerken, kullanıcı hareketleri gibi canlı bir öğeyi güncellersiniz. Bu nokta, gecikmenin bir kullanıcı için hemen anlaşılacağı yerdir: hissetmek yavaş. Bir yönlendirme katmanı eklemek, mutlaka performansı etkileyecektir. Dolaylılık asla özgür değildir. Etkinlikler için kitaplıkları kullanmamızın ana nedenlerinden biri, bir tarayıcı normalleştirme katmanı sağlamaktır. Dokunma olaylarını destekleyen tüm mobil tarayıcılar aynı API'ye sahiptir.
Bu örnek için dikkate alınması gereken üç dokunma olayı vardır: touchstart, Touchmove ve dokunuş. Ayrıca bir Touchcancel Hareket herhangi bir nedenle kesintiye uğradığında (push bildirimi gibi) olay. Üretimde bunu zarif bir şekilde halletmelisiniz.
function attachTouchEvents () {
var bd = document.querySelector (’html’);
bd.addEventListener ('touchmove', handleTouchEvents);
bd.addEventListener ('touchstart', handleTouchEvents);
bd.addEventListener ('touchend', handleTouchEvents);
}
Olay işleyici bir TouchEvent nesnesi alır. touchstart ve Touchmove olaylar bir dokunuşlar bir dizi olan özellik Dokunma nesneler. Hızlıca kaydırmalar için yalnızca bir özellik gereklidir: müşteriX. Bu değer, dokunmanın sayfanın sol üst köşesine göre konumudur.
iOS cihazları on bir dokunuşu destekler. Android (Dondurmalı Sandviç öncesi) yalnızca bir tane içerir. Çoğu etkileşim yalnızca tek dokunuş gerektirir. Daha karmaşık hareketler, birden çok dokunuş için endişelenmek anlamına gelir.
14. handleTouchEvents işlevi
Durumu korumak için önce bu işlevin dışında birkaç değişken tanımlayın:
var startPos, endPos, lastPos;
Sonraki dal, olay nesnesinin type özelliğine göre:
function handleTouchEvents (e) {
değişken yön = 0;
// bir switch deyimi de kullanabilirsiniz
if (e.type == ’touchstart’) {
} else if (e.type == ’touchmove’) {
} else if (e.type == ’touchend) {
}
touchstart olay, herhangi bir dokunma olayının başlangıcında tetiklenir, bu nedenle hareketin başladığı yeri kaydetmek için kullanın, bu daha sonra önemli olacaktır. Hala düğümlerde bulunabilecek tüm geçişleri temizleyin.
if (e.type == ’touchstart’) {
// başlangıç istemcisini kaydedinX
startPos = e.touches [0] .clientX;
// lastPos, başlangıçtaki startPos'tur
lastPos = startPos;
// yönü işaretli bir tamsayı olarak izleyeceğiz.
// -1 solda, 1 sağda ve 0 sabit kalıyor
yön = 0;
// şimdi geçişleri temizliyoruz
if (slideData [currentSlide] && slideData [currentSlide] .node) {
cleanTransitions (slideData [currentSlide] .node);
}
if (slideData [currentSlide + 1] && slideData [currentSlide + 1] .node) {
cleanTransitions (slideData [currentSlide + 1] .node);
}
if (slideData [currentSlide - 1] && slideData [currentSlide -1] .node) {
cleanTransitions (slideData [currentSlide -1] .node);
}
} else if (e.type == ’touchmove’) {
İçinde Touchmove dokunuşun ne kadar ilerlediğini öğrenin müşteriXve ardından geçerli slaydı aynı miktarda taşıyın. Slayt sola doğru hareket ediyorsa, sonraki slaydı da taşırsınız, sağa doğru hareket ediyorsa, bunun yerine önceki slaydı taşıyın. Bu şekilde sadece iki düğümü hareket ettirirsiniz, ancak bütün bir şeridin hareket ettiği yanılsamasını verirsiniz. Slayt bilgilerinin bir haritasına sahip olmak, tüm bunları daha fazla DOM okuması yapmadan, yalnızca yazarak yapmanıza olanak tanır.
} else if (e.type == ’touchmove’) {
e.preventDefault ();
// yönü bul
eğer (lastPos> startPos) {
yön = -1;
}Başka{
yön = 1;
}
// slaydın var olduğundan emin olun
eğer (slideData [currentSlide]) {
// mevcut slaydı yerine taşı
setPosition (slideData [currentSlide] .node, e.touches [0] .clientX - startPos);
// sonraki veya önceki slaydın çıktığından emin olun
if (yön! == 0 && slideData [currentSlide + direction]) {
// sonraki veya önceki slaytı taşı.
eğer (yön 0) {
// Sonraki slaydı doğru konuma taşımak istiyorum, bu da
// mevcut slayt, eksi görünüm alanının genişliği (her slayt, görünüm alanı kadar geniştir)
setPosition (slideData [currentSlide + yön] .node, (e.touches [0] .clientX - startPos) - boundingBox [0]);
} else if (yön> 0) {
setPosition (slideData [currentSlide + yön] .node, (e.touches [0] .clientX - startPos) + boundingBox [0]);
}
}
}
// son konumu kaydedin, dokunmatik uç için ona ihtiyacımız var
lastPos = e.touches [0] .clientX;
} else if (e.type == ’touchend’) {
Dokunma bittiğinde ilerlemeye, geri dönmeye veya hiçbir şey yapmamaya karar verin. Hiçbir şey yoksa slaytların yerine "geri dönmesi" gerekmiyorsa, kullanıcıya slaydın neden değişmediğine dair geri bildirim verin.
} else if (e.type == ’touchend’) {
// bir eşiğin ötesine sola mı yoksa sağa mı hareket ettiğimizi anla
// (bu durumda 50 piksel)
eğer (lastPos - startPos> 50) {
goTo (currentSlide-1);
} else if (lastPos - startPos -50) {
goTo (currentSlide + 1);
}Başka{
// ilerlemiyoruz, bu yüzden önceki konuma "geri dönmemiz" gerekiyor
addTransitions (slideData [currentSlide] .node);
setPosition (slideData [currentSlide] .node, 0);
if (slideData [currentSlide + 1] && slideData [currentSlide + 1] .node) {
addTransitions (slideData [currentSlide + 1]);
setPosition (slideData [currentSlide + 1] .node, boundingBox [0]);
}
if (slideData [currentSlide - 1] && slideData [currentSlide - 1] .node) {
addTransitions (slideData [currentSlide - 1]);
setPosition (slideData [currentSlide - 1] .node, 0 - boundingBox [0]);
}
}
}
Şimdi temel bilgiler yerinde. Basit bir dokunmatik ışık kutunuz var!
Stephen Woods, on yılın büyük bir bölümünde web uygulamaları geliştiriyor. Şu anda San Francisco'da yaşıyor ve Flickr'da kullanıcı arabirimi mühendisi olarak çalışıyor.
