JQuery UI efektleri çerçevesi, widget çerçevesindeki gibi, paketin hangi kısımlarını kullanmak istediğinizi seçmenize ve kod gereksinimlerini azaltmanıza olanak veren modülerleştirilmiştir. Yapabilirsin kendiniz için özel bir indirme oluşturun, modüller arasındaki bağımlılıkları dikkate alır.
Yeni bir efektin nasıl oluşturulacağına bakmadan önce, jQuery UI efektleri çerçevesinde zaten sunulan diğer işlevlerden haberdar olmalısınız, böylece kendi efektlerinizi geliştirirken kullanabilirsiniz.
Tek tek jQuery UI efekt modüllerinin altında yatan, yaygın olarak kullanılan işlevselliklerin bir çekirdeğidir. Bu yetenekler burada uygulanmaktadır, böylece onları yeniden icat etmeniz gerekmez ve bunları hemen kendi etki alanlarınıza uygulayabilirsiniz. Renk animasyonu ile birlikte, bir sınıfın diğer özelliklerinden ve yeni efektler geliştirmede yararlı olabilecek birkaç düşük seviyeli işlevden animasyonlar bulacaksınız.
Efektler Çekirdek modülü, renk değerleri içeren ön plan ve arka plan renkleri ve kenarlık ve anahat renkleri için stil özellikleri için özel animasyon desteği ekler. jQuery'nin kendisi sadece, px, em veya% gibi isteğe bağlı bir birim tanımlayıcısına sahip basit sayısal değerler olan özniteliklerin animasyonuna izin verir. Renkler gibi daha karmaşık değerlerin nasıl yorumlanacağını veya ara geçiş mor rengi ile maviden kırmızıya geçiş gibi istenen geçişi elde etmek için bu değerlerin doğru bir şekilde nasıl artırılacağını bilmez.
Renk değerleri üç bileşenden oluşur: her biri 0 ile 255 arasında bir değere sahip olan kırmızı, yeşil ve mavi katkılar. Bunlar, HTML ve CSS'de, burada listelendiği gibi, farklı şekillerde belirtilebilir:
Kırmızı, yeşil ve mavi bileşenler ayrılmalı ve ara adımlar için yeni bileşik renkle birleştirilmeden önce başlangıç değerlerinden nihai değerlerine göre ayrı ayrı animasyonlanmalıdır. jQuery UI, geçerli ve istenen renkleri doğru şekilde çözmek ve animasyonun çalıştığı değeri değiştirmek için etkilenen her öznitelik için animasyon adımları ekler. Önceki listede açıklanan renk formatlarına ek olarak, animasyon çağrısı rengi belirtmek için üç sayısal değer dizisini de (her biri 0 ile 255 arasında) kabul edebilir. Bu işlevler tanımlandığında, renkleri diğer sayısal özellikler için yapacağınız şekilde canlandırabilirsiniz:
$('#myDiv').animate({backgroundColor: '#DDFFE8'});jQuery UI, temel kırmızı ve yeşilden daha ezoterik koyu renkli ve darksalmona kadar anladığı, adlandırılmış renklerin genişletilmiş bir listesini içerir. Şeffaf bir renk bile var.
Standart jQuery, seçilen elemanlara ders ekleyebilmenizi, çıkartabilmenizi veya değiştirebilmenizi sağlar. jQuery UI, önceki ve sonraki durumlar arasındaki geçişi canlandırabilmenizi sağlar. Bunu, başlangıç ve bitiş yapılandırmalarından canlandırılabilen (sayısal değerler ve renkler) tüm öznitelik değerlerini ayıklayarak ve sonra değiştirilecek özellikler olarak bunlarla birlikte standart bir animasyon çağrısı çağırarak yapar. Bu yeni animasyon, addClass, removeClass veya toggleClass işlevlerini çağırırken bir süre belirterek tetiklenir:
$('#myDiv').addClass('highlight', 1000);jQuery UI, yeni bir işlev ekler; switchClass, bir sınıfı kaldırır ve bir sınıf ekler; iki durum arasında isteğe bağlı geçiş (bir süre sağlarken):
$('#myDiv').switchClass('oldClass', 'newClass', 1000);JQuery UI'nin çeşitli etkilerini daha iyi desteklemek için Efektler Çekirdek modülü, bu efektler ve belki de sizin kendi kullanımınız için çeşitli işlevler sunar. Bu işlevlerden birkaçının nasıl kullanıldığını göstermek için, aşağıdaki liste slayt etkisinin ilgili bölümlerini gösterir.
$.effects.effect.slide = function( o, done ) {// Create elementvar el = $( this ),props = [ "position", "top", "bottom", "left", "right", "width", "height" ],mode = $.effects.setMode( el, o.mode || "show" ), ...; // Determine mode of operation// Adjust$.effects.save( el, props ); // Save current settingsel.show();distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true );$.effects.createWrapper( el ).css({overflow: "hidden"}); // Create wrapper for animation...// Animationanimation[ ref ] = ...;// Animateel.animate( animation, {queue: false,duration: o.duration,easing: o.easing,complete: function() {if ( mode === "hide" ) {el.hide();}$.effects.restore( el, props ); // Restore original settings$.effects.removeWrapper( el ); // Remove animation wrapperdone();}});};Bir geçiş modunu uygun gösterime dönüştürmek veya öğenin geçerli görünürlüğüne bağlı olarak değeri gizlemek için setMode işlevini kullanabilirsiniz. Sağlanan modun gösterilmesi veya gizlenmesi durumunda, bu değeri korur ve bu durumda, hiç verilmediğinde varsayılan değerleri gösterir.
Efekt için animasyonu başlatmadan önce, bittiğinde geri yüklenebilecekleri şekilde, öğenin üzerindeki çeşitli özniteliklerin (sahne içindeki isimlerden) orijinal değerlerini hatırlamak için kaydetme işlevini kullanmak isteyebilirsiniz. Değerler jQuery veri fonksiyonu kullanılarak öğeye kaydedilir.
Bir öğenin bir etki için hareketini kolaylaştırmak için, bu öğenin etrafında bir kapsayıcıyı, hareketin referans noktası olarak kullanmak için createWrapper işleviyle sarabilirsiniz. Konumsal bilgi, belirtilen elemandan ambalajın üzerine kopyalanır, böylece orijinal elemanın doğrudan üzerinde görünür. Öğe daha sonra yeni konteynerin içinde sol üst köşesinde konumlandırılır, böylece genel etki kullanıcı tarafından farkedilemez olur. İşlev, sarıcıya bir başvuru döndürür.
Orijinal elemanın sol / sağ / üst / alt ayarlarındaki herhangi bir değişiklik, şimdi çevreleyen öğeleri etkilemeden orijinal konumuna göre olacaktır. Belirli özellik değerlerini daha önce kaydettikten sonra, animasyonun tamamlanmasında geri yükleme işlevini orijinal ayarlarına döndürmek için kullanırdınız. Aynı zamanda, daha önce oluşturduğunuz Sarmalayıcı işleviyle oluşturduğunuz sarıcıları da çıkarmalısınız. Bu işlev, kaldırılmışsa sarıcıya veya sarıcı yoksa öğenin kendisine bir başvuru döndürür.
Kullanılabilecek jQuery UI Etkileri Çekirdek modülü tarafından sağlanan bazı diğer işlevler vardır:
getBaseline (orijin, orjinal) Bu fonksiyon , bir orjinal boyut (yükseklik ve genişlik özniteliklerine sahip bir nesne) verildiğinde, bir orijin spesifikasyonunu (iki elemanlı dikey ve yatay konumlar dizisi) fraksiyonel değerlere (0.0 - 1.0) normalleştirir. Adlandırılmış konumları (üst, sol, orta vb.) 0,0, 0,5 veya 1,0 değerlerine dönüştürür ve sayısal değerleri ilgili boyutun oranına dönüştürür. Döndürülen nesne, kesirli değerleri karşılık gelen yönlerde tutmak için x ve y özniteliklerine sahiptir. Örneğin,
var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}setTransition (öğe, liste, faktör, değer) Bir ölçekleme faktörünü birden fazla özellik değerine bir kerede uygulamak için bu işlevi kullanın. Listedeki her bir özellik adı için, eleman için geçerli değerini alın ve bunu faktörü ile çarparak güncelleyin. Sonucu, özniteliğin adı altındaki değer nesnesine ayarlayın ve bu nesneyi işlevden döndürün. Örneğin, belirli değerleri yarıya indirmek için şunu yapabilirsiniz:
el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);cssUnit (key) Adlandırılmış bir CSS özniteliğini (tuş) kendi miktarına ve birimlerine (em, pt, px veya%) ayırmak için, iki değer dizisi olarak döndürülür, bu işlevi kullanın. Üniteler bu bilinen tiplerden biri değilse, boş bir dizi döndürülür. Örneğin,
var value = el.cssUnit('width'); // e.g. value = [200, 'px']Bu bölümde sunulan işlevler jQuery UI tarafından sağlanan etkilerin çoğu tarafından kullanılır. Bu etkiler bir sonraki bölümde incelenir.
JQuery UI tarafından çok sayıda etki sağlanmaktadır. Bunların çoğu, bir öğenin nasıl göründüğünü veya kaybolduğunu (kör ve bırak gibi) geliştirmek için tasarlanırken, diğerleri dikkatinizi bir öğeye (vurgulama ve titreme gibi) getirmeye hizmet eder:
Bu efektler, jQuery UI show, hide ve toggle işlevleriyle birlikte, ilk parametre olarak istenen efektin ismini sağlayarak kullanılabilir. Ayrıca, efektin davranışını, animasyonun süresini ve tamamlandığında tetiklenen geri arama işlevini değiştiren ek seçenekler de sağlayabilirsiniz.
$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);JQuery UI modüllerinde bazı temel yardımcı fonksiyonlar, düşük seviyeli davranışlar (sürükle ve bırak gibi), yüksek seviyeli bileşenler veya widget'lar (Tabs ve Datepicker gibi) ve sayısız görsel efekt bulunur. Web sayfanızdaki öğelerin sunumunu geliştirmek veya belirli bir unsuru kullanıcının dikkatine sunmak için bu efektleri kullanabilirsiniz. Kendi efektlerinizi oluşturmanızda size yardımcı olmak için, yaygın olarak kullanılan işlevlerin bir çekirdeği var.
JQuery UI efekt çerçevesini kullandınız mı? Yerel CSS araları ile nasıl karşılaştırılır? Yorumlarınız ile düşüncelerinizi öğrenmemize izin verin.