Orta Gibi Yüzen Eylem Menüsü Nasıl Oluşturulur
Popülaritesi yüzen eylem menüleri özellikle Medium.com'un özelliği modaya sokmasından bu yana yükselişe geçti. Kısacası, hareketli eylem menüsü açılır sen ne zaman biraz metin seç bir web sayfasında. Menü seçimin yanında görünür., farklı eylemler gösteriliyor seçilen metni hızlı bir şekilde biçimlendirmenize, vurgulamanıza veya paylaşmanıza olanak sağlayan.
Bu derste, size nasıl gösterileceğini göstereceğim Seçili bir metin parçacığı için işlem menüsü bir web sayfasında. Eylem menümüz, kullanıcıların seçilen metni tweetle takipçilerine.
1. HTML'yi oluşturun
başlangıç HTML basittir, sadece ihtiyacımız var Bazı metin kullanıcı seçebilir. Demo için kullanacağım “Hart ve Avcı” yatmadan önce okunan hikaye örnek metin olarak.
Hart ve Avcı
Hart bir zamanlar…
...
2. Eylem menüsü şablonunu oluşturun
Ben HTML kodunu ekleme eylem menüsüne ait içinde eleman. İçinde ne varsa
etiketle oluşturulmayacak belgelere ekleninceye kadar tarayıcılar tarafından JavaScript kullanarak.
Gereksiz yere bırakmayın içinde etiketi, belgeye eklendikten sonra eylem menüsü düzenini bozabilir. Eğer istersen, daha fazla düğme ekle içeride
#shareBox
daha fazla seçenek için.
3. CSS'yi oluşturun
İçin CSS #shareBox
satır içi konteyner böyle gider:
#shareBox width: 30px; yükseklik: 30px; pozisyon: mutlak;
konum: mutlak;
kural bize izin verecek menüyü istediğimiz yere yerleştirin sayfada.
Ben de tarz eylem düğmesi içinde #shareBox
arkaplan rengi ve görüntüsü ile ::sonra
sözde eleman I aşağı ok için bir üçgen ekledi.
#shareBox> button width: 100%; yükseklik:% 100; arkaplan rengi: # 292A2B; sınır: yok; sınır yarıçapı: 2 piksel; taslak: yok; imleç: işaretçi; background-image: url ('paylaşım.png'); arka plan tekrarı: no-tekrarı; arkaplan konumu: merkez; arkaplan büyüklüğü:% 70; #shareBox> button :: after position: absolute; içerik: "; sınır-üst: 10px katı # 292A2B; kenar-sol: 10px katı saydam; kenar-sağ: 10px katı saydam; sol: 5px; üst: 30px;
4. JS ile olay işleyicileri ekleyin
JavaScript’e geçtikten sonra etkinlik işleyicileri ekle için mousedown
ve mouseup
olayları başlangıcı ve sonu yakala Metin seçiminin.
Ayrıca araştırma yapabilirsiniz diğer seçim etkinlikleri gibi selectstart
ve onları kullan fare olayları yerine (bu ideal olurdu ancak henüz tarayıcı desteği pek iyi değil).
Ayrıca referans ekle -e kullanarak eleman
querySelector ()
yöntem.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); işlev onMouseDown () işlev onMouseUp ()
5. Önceki seçimleri temizle
İçinde mousedown
olay yapacağız biraz temizlik yapmak, yani herhangi bir önceki seçimi ve ilgili işlem menüsünü temizleyin..
işlevi onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove ();
getSelection ()
yöntem bir döner seçim
nesne metin aralıklarını temsil eden kullanıcı tarafından seçili olan removeAllRange ()
yöntemtüm aralıkları kaldırır aynı seçim
Böylece nesne önceki seçimin silinmesi.
6. Eylem menüsünü görüntüleyin
Sırasında mouseup
olay, ne zaman yapacağız bir metin seçimi yapılıp yapılmadığını onaylayın ve daha fazla işlem yapmak.
işlevi onMouseUp () var sel = document.getSelection (), txt = sel.toString (); if (txt! == "") var range = sel.getRangeAt (0); if (range.startContainer.parentElement.parentElement.localName === "makale" || range.startContainer.parentElement.localName === "makale") // makaledeki bazı metinler seçildi
Seçili metin dizesini al arayarak toString ()
yöntemi seçim
nesne. Seçilen metin boş değilse, devam edin ve ilk menzili al -den seçim
nesne.
menzil o seçilen bölüm Belgenin Tipik olarak, kullanıcılar bir tek seçim yalnızca, birden fazla değil (ctrl / cmd tuşuna basarak), bu nedenle yalnızca şunu kullanarak seçimden ilk aralık nesnesini (dizin 0'da) alın getRangeAt (0)
.
Aralığa sahip olduktan sonra, seçimin o yerden başladığını görün. makalenin içinde. startContainer
aralığın özelliği DOM düğümünü döndürür seçimin başladığı yer.
Bazen (ne zaman paragraf içinde seçin), değeri sadece bir metin düğümü, bu durumda ana öğe olacak ve ebeveyni
eleman olacak
(bu yazıdaki örnek kodda).
Diğer zamanlarda, seçtiğinizde birden fazla paragraf arasında, startContainer
olacak ve onun ana düğümü
. Dolayısıyla iki karşılaştırma saniyede
Eğer
yukarıdaki kodun şartı.
Bir kere Eğer
durum geçer, şimdi zamanı eylem menüsünü al şablondan ekleyin ve belgeye ekleyin. Kodu aşağıya yerleştir ikinci içinde Eğer
Beyan.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
ImportNode ()
yöntem dış belgelerdeki düğümleri döndürür (bizim durumumuzda ). İkinci parametre ile çağrıldığında (
doğru
), ithal eleman / düğüm olacak onun alt unsurları ile gel.
Ekleyebilirsiniz #shareBox
belge gövdesinin herhangi bir yerinde, Şablon öğesinden önce ekledim.
7. Eylem menüsünü yerleştirin
Eylem menüsünü yerleştirmek istiyoruz sağ yukarı & seçilen alanın ortasında. Böyle yaparak, dikdörtgen değerleri al Seçilen alanın getBoundingClientRect ()
Bir öğenin boyutunu ve konumunu döndüren yöntem.
Ardından, güncelleyin üst
ve ayrıldı
değerleri #shareBox
dikdörtgen değerlerine göre. Yeni hesaplamalarda üst
ve ayrıldı
değerleri, faydalandım ES6 şablon değişmezleri.
var rect = range.getBoundingClientRect (); var shareBox = document.querySelector ('# shareBox'); shareBox.style.top = 'calc ($ rect.top px - 38px)'; shareBox.style.left = 'calc ($ rect.left px + calc ($ rect.width px / 2) - 30px)';
8. İşlevsellik ekleyin
Şimdi seçilen metnin yanına eylem menüsünü eklediğimize göre, seçilen metni oluşturma zamanı menü seçenekleri için kullanılabilir Böylece bazı eylemler gerçekleştirebiliriz..
Seçili metni a paylaşım düğmesinin özel özelliği denilen 'ShareTxt'
ve bir mousedown
düğmeye olay dinleyicisi.
var shareBtn = shareBox.querySelector ('düğmesi'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('bozuldu', onShareClick, doğru);
doğru
parametresi addEventListener ()
önler mousedown
köpüren olay.
İçinde onShareClick ()
olay işleyicisi, biz seçilen metni bir tweet’e ekle erişerek shareTxt
düğmenin özelliği.
onShareClick () işlevi window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges ()
Bir kere düğme tıklandı, yapması gerekeni yapar, sonra kendini sayfadan kaldır. Aynı zamanda seçimi sil belgede.
Kaynak kodu ve demo
Aşağıdaki Codepen demosunda, Ölçek eylem menüsü nasıl çalışır. Ayrıca bulabilirsiniz tam kaynak kodu Github depomuzda.