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 Gereksiz yere bırakmayın içinde İçin CSS Ben de tarz eylem düğmesi içinde JavaScript’e geçtikten sonra etkinlik işleyicileri ekle için Ayrıca araştırma yapabilirsiniz diğer seçim etkinlikleri gibi Ayrıca referans ekle -e İçinde Sırasında Seçili metin dizesini al arayarak 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 Aralığa sahip olduktan sonra, seçimin o yerden başladığını görün. makalenin içinde. Bazen (ne zaman paragraf içinde seçin), değeri sadece bir metin düğümü, bu durumda ana öğe olacak ve ebeveyni eleman olacak Diğer zamanlarda, seçtiğinizde birden fazla paragraf arasında, ve onun ana düğümü Bir kere Ekleyebilirsiniz 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 Ardından, güncelleyin Ş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 İçinde Bir kere düğme tıklandı, yapması gerekeni yapar, sonra kendini sayfadan kaldır. Aynı zamanda seçimi sil belgede. Aşağıdaki Codepen demosunda, Ölçek eylem menüsü nasıl çalışır. Ayrıca bulabilirsiniz tam kaynak kodu Github depomuzda. eleman. İçinde ne varsa etiketle oluşturulmayacak belgelere ekleninceye kadar tarayıcılar tarafından JavaScript kullanarak.
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
#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.#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
mousedown ve mouseup olayları başlangıcı ve sonu yakala Metin seçiminin.selectstart ve onları kullan fare olayları yerine (bu ideal olurdu ancak henüz tarayıcı desteği pek iyi değil). 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
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
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
toString () yöntemi seçim nesne. Seçilen metin boş değilse, devam edin ve ilk menzili al -den seçim nesne.getRangeAt (0).startContainer aralığın özelliği DOM düğümünü döndürür seçimin başladığı yer.startContainer olacak Eğer yukarıdaki kodun şartı. 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. #shareBox belge gövdesinin herhangi bir yerinde, Şablon öğesinden önce ekledim.7. Eylem menüsünü yerleştirin
getBoundingClientRect () Bir öğenin boyutunu ve konumunu döndüren yöntem.ü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
'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.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 () Kaynak kodu ve demo
