CSS’de JQuery ile Yama Delikleri: Pratik Örnekler
Bugün CSS tarafından kolayca çözülemeyen gerçek dünya sorunları görüyoruz ve jQuery iyileştirmelerini kontrol ediyoruz. Ön uç geliştirme çalışmamda, genellikle Javascript ile Jquery kullanıyorum, kütüphane “JavaScript’i kolaylaştırıyor”-son seçenek aracı olarak: CSS göreve uygun olmadığında siteye nasıl bir stil dayatılır veya başvurmak için çok karmaşık olacak. JQuery’ye ne zaman geçileceğini bilmenin önemli kısmı, CSS tarafından çözülemeyen sorun türlerini anlamaktır. Bugün size WPSOT’un kendisinin bir örneğini vereceğim, CSS’nin neden sorunları çözmediğini ve jQuery’nin iyileştirilmesini ayrıntılı olarak keşfedeceğim.
JQuery’nin kendisine nazik bir giriş istiyorsanız, işte kısa bir kavramsal resim ve iyi bir yeni başlayan öğretici. Gerçek hayat örnekleri öğreticiden çok karmaşık değildir, bu yüzden yakında döner! Sorun: NAV yayılma menüsü, WPSOT düzeninin daha benzersiz kısımlarından biridir. Yan gezinme menüsüdür. Gerçekten seviyoruz, ama aynı zamanda bugünün örneğinin arkasında bir karmaşıklık kaynağı. NAV menümüz gerçekten konumlandırılmıştır, bu da genel olarak komik şekline ek olarak bolluğa neden olabilir, NAV menümüz aslında makale metninin olduğu ana içerik kapsayıcısının üzerindedir: burada:
Bunu ve başka bir düzen karmaşıklığını yönetmek için navigasyon menümüz gerçekten konumlandırılmalıdır. Bu CSS özniteliği, konum: mutlak; , öğeyi HTML sayfasının ana düzeninden çıkarın. Bu unsurlar yine de kendilerini diğer DOM öğeleriyle ilişkilere sokabilir, ancak diğer öğeler onları kendi düzen kararlarında tamamen görmezden gelir. Elementler birbirinizi görmezden geldiğinden, çok sorunlu sonuçlar alabilirsiniz. Özellikle, navigasyon menümüzün yanındaki makaleden daha yüksekse ne olur? Çirkin hale gelir, üst üste binen bir unsur ile yanlış bir şekilde, yani “bolluk” diyorum: büyütmek için tıklayın Yüksekliğe ihtiyacımız var, ama hangisi hangisi seçilmeli? İstediğimiz, çok kısa bir makale için bile, altbilginin yalnızca gezinme menüsünde görünmesidir:
Büyütmek için tıklayın Bununla birlikte, CSS’de “sadece bu gerçekten konumlandırılmış unsur altında görünür” demenin bir yolu yoktur, çünkü mutlak konumlandırmanın bir kısmı, diğer öğelerin kendi düzen kararlarında gerçekten konumlandırılmış unsurları görmezden gelmesidir. Yani yapmamız gereken, bu durumda ana-içerik sınıfının divi olan ana makale konteyneri için minimum yüksekliği ayarlamaktır:
Büyütmek için tıklayın Menünün yüksekliği hakkında sürdürülebilir bir araştırmaya ihtiyacımız var ve ana konteynerimizin minimum yüksekliğini bununla aynı şekilde düzenlemek için. CSS bunu yapamaz, ama JQuery yapabilir. Min yüksekliğinin neye ihtiyacı var? Bilmediğimiz “NAV menüsünün gerçek yüksekliği ne olursa olsun” olmalı. NAV menüsüne bir şey ekleyebilir veya silebiliriz ve elbette farklı bir tarayıcı, tarayıcının genişliği ve cihaz menü yüksekliğini önemli ölçüde farklı hale getirecektir. Sadece bu değil, tarayıcının genişliği düzen ayrıntılarını değiştirdiğinden, tarayıcının boyutunu değiştiren kullanıcı, aynı sayfayı yüklerken bazı farklı gezinme menüsü yüksekliklerini görebilir! İhtiyacımız olan menünün yüksekliği hakkında sürdürülebilir bir ankettir. ve ayarlamak için. CSS bunu yapamaz, ama JQuery yapabilir. Geliştirme: Page-min-height.js Bu sorunun üstesinden gelmek için, wpsout temasına bir jQuery betiği yazıyorum. Function.php temasından sıraya girdim; Süreci burada göstermeyeceğim, bu yüzden enqueuee’nin senaryosu ve stili hakkında bilgi sahibi olmanız gerekiyorsa, konuyla ilgili makalemize bakın.
Bu page-min-height.js kendisi: (işlev ($) {// 1. var navmenu = ‘. Primary-navigation’; var pageContent = ‘.main-content’; var gap = parseInt ($ ($ ( $ ($ ($ ($ ($ ($ ($ ($ ($ (‘html’) .css (‘yazı tipi boyutu’), 10) * 2; // 2. Min vermek için işlevi tanımla -Height işlev setPagemin () {var height = $ (navmenu) .height (); $ (pageContent) .css (‘min-yükseklik’, yükseklik + boşluk);} $ (pencere) .load (function () {/ / 3. İlk pencere yükü yükü yükü yükü yük setPagemin (); // 4. Pencere yeniden boyutlandırdığında her 120 ms işlevi çalıştırın. );});});}) (jQuery); Yukarıdaki dört bölüme göre bu kodu dört kısımda açıklayacağım. Bu bölümdeki değişkenleri tanımlayarak, değeri komut dosyası boyunca kullanılacak birkaç değişken tanımlıyoruz:
Navmenu, burada navigasyon menü sınıfının adıdır. Birincil navigasyon.
PageConcent, burada ana içerik kapsayıcısının sınıf adıdır.
Gap kafa karıştırıcı görünüyor, ancak “HTML belgesinden pikselde ana yazı tipinin iki katı büyüklüğünde” ile aynı. Bu numarayı, navigasyon menüsü altında iki -takma “boşluğu” yapmak için kullanıyorum, böylece altbilgiye asla dokunamam.
Kayıt için, (işlev ($)}) (jQuery); İlk ve son satırda dosya, WordPress’te gerekli olan jQuery Bolarplate’dir, böylece dosya boyunca “JQuery” anlamına gelen “$” ı kullanabiliriz. Daha fazla bilgi için buraya bakın.
2. SetSAGEMIN () tanımlayın Bu bölüm, iki şey yapan bir işlevi tanımlar, setPagemin ():
Navmenu tarafından belirlenen nesneden mevcut yüksekliği pikselde bulun. Birincil-navigasyon, NAV menüsünün kendisi. Settel PageConcent-Element. Ana. Ana-content, min-yüksekliğinin Navity Plus’ın yüksekliği ile aynı olması için Daha önce belirlediğimiz boşluk.
3. () setlerini çalıştırma penceresinde $ (pencere) .load (function () {}); Tüm DOM nesnelerini anında çalıştıracak işlevlerin hazırlanması tarayıcıda tam olarak görüntülenmiştir. Bu, NAV menüsünün güvenilir bir şekilde ölçebileceğimiz bir yüksekliğe sahip olduğu nokta, bu yüzden şu anda yaptığımız ilk şey setPagemin () çalıştırmaktır.
4. Yeniden boyutlandırma penceremizdeki setPagemin () çalıştırmak tamamlanmadı. Kullanıcı tarayıcı penceresinin boyutunu değiştirirse ne olur? Bu, NAV menüsünü kolayca daha yüksek veya daha kısa hale getirebilir, bu da SetPagemin () için ilk çağrımızla yaptığımız sınırların üst üste gelmesine veya uzaklaşmasına neden olabilir. Bu nedenle, pencerenin boyutunu değiştirmek için kullanıcıyı dinlememiz ve işlevi yaptığında gerçekleştirmemiz gerekir. Bu $ (pencere). Secize (function () {}); Yapmak. Bu işlevde ne var? En kolay olanı aşağıdaki gibi setipagemin () çağırmaktır:. $ (pencere). Secize (function () {setPagemin ();}); Ancak, JavaScript çok huzursuz. Yukarıdaki kod setigemin (); Kullanıcı tarayıcının boyutunu değiştirdiğinde her milisaniye. Aşırıdır ve sayfanın davranmasını sağlayacaktır.
Bunun yerine, sadece setigemin () çalıştıracağız; Her 120 milisaniyede bir. Saniyede yaklaşık sekiz kez – insanlar için çok hızlı ve çok daha durgun. Aşağıdaki kodun yapıldığı şey budur: setTimeout (function () {setPagemin ();}, 120); SetTimeout hakkında daha fazla bilgi istiyorsanız, okumanızı öneririm! Bu, olağanüstü bir kullanıma sahip olağanüstü bir işlevdir. Birkaç tanesi, bu bölüm setsagemin (); Kullanıcı tarayıcı penceresinin boyutunu her değiştirdiğinde saniyede yaklaşık sekiz kez-ana içeriğimiz için ayarladığımız, NAV menüsünün gerçek ölçülebilir yüksekliği ile senkronize edilmediğimiz anlamına gelir. Soğuk! Teşekkürler, JQuery! Bu hafta, gerçek dünyadaki CSS sınırları ve pratik bir JQuery çözümü hakkında ayrıntılı olarak tartıştım. Umarım artık JQuery ile daha rahatsınız ve umarım kendi projenizde yamalı bir şekilde JQuery kullanma konusunda bazı yeni fikirleriniz vardır. Okuduğunuz için teşekkürler! Kredi görüntüsü: rmkoske
