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.
