ÖZelleştirilmiş bir CSS3 Kontrolü nasıl düzenlenir - mankenler

Tüm jQuery UI widget'ları kendilerini CSS3 özelleştirmesine borç verirler. Yaptığınız değişikliklerden çoğu dahili özellikleri doğru bir şekilde kullanarak ilgilidir. JQuery UI'nin özel efektler üretmek için widget'ları biçimlendirmek için kullandığı CSS ile de çalışabilirsiniz.

Tabii ki, başka bir şey yoksa, gerçek widget davranışını gerektiği gibi değiştirmek için her zaman JavaScript kullanabilirsiniz. Mesele, tekerleği yeniden icat etmek zorunda kalmadan spesifik ihtiyaçlarını karşılamak için aletleri (Spinner gibi) değiştirebilmenizdir. Değişiklikler genellikle kısa ve kolay, yani elle kodlamanız gereken bir fikirle sıfırdan başlamak zorunda değilsiniz.

Spinners popülerdir, çünkü kullanıcı girişlerini çeşitli şekillerde kontrol etmek için kullanabilirsiniz. Fikir normalde değişkendir veriler için kontrol sağlamaktır, bu yüzden bir açılır liste kutusu gibi bir şey kullanamazsınız. Eğrilerin en ilginç kullanımlarından biri Ben Knows Code sitesinde gösterilmektedir.

Bu durumda, yazar okların yerini değiştirme ve alfabetik bir eğirici yaratma gibi görevleri nasıl yerine getireceğini gösterir. Burada kullanılan örnek, bu sitedeki örneği çalar; ancak biraz daha anlaşılır ve anlamak daha kolaydır. Bu örneği anladıktan sonra, Ben Knows Code sitemize gidebilir ve bu örneği anında anlayabilirsiniz.

İplikçiler normalde sayısal girdileri ele alırlar. Bunun yerine, bunun yerine alfabetik girdiye gereksiniminiz olabilir. Alfabetik bir girdi oluşturmak için, harfleri kullanmadan harf görünümünü vermeniz gerekir; çünkü Spinner widgeti yalnızca sayılarla çalışır. Aşağıdaki örnek, standart bir jQuery UI Spinner widget'ını alır ve sayı yerine harfleri kullanacak şekilde dönüştürür. Spinner ({// Asgari olarak A // için koda ve maksimum için Z'ye ait koda ayarlayın. Min (9) $ (function () {var Geçerli Değer = 65; var ThisSpinner =: 65, max: 90, // kullanıcı spinner'ı döndürmeye başladığında // değeri bir sayıya çevirip // metni görünüşünden gizle start: function (ui, event) {BuSpinner. Spinner ("value ", CurrentValue); $ (" # Spinner "). Css (" color "," transparent ");}, // Kullanıcı eğiriciyi döndürmeyi bıraktığında // sayısal değeri kaydedip // harfe dönüştürün ("value", String. fromCharCode (CurrentValue)); $ ("# Spinner"); ekranda metni görüntüler stop (); function (ui, event) {CurrentValue = ThisSpinner. css ("renk", "yeşil");}});});

Kod, eğiricinin sayısal değerini izleyen bir değişken, CurrentValue yaratarak başlar.65 değeri,

harfinin sayısal karşılığıdır. Böylece döndürücü A değeri ile başlar, ancak bu değeri 65 sayısı olarak depolar.

Eğirici yaratmak, ThisSpinner, gelecek.

A ve Z sayısal değerlerini yansıtan minimum ve maksimum değerleri ayarlamanız gerekir. Bu aynı teknik, herhangi bir harf dizisi için de çalışabilir. İsterseniz küçük harfleri de kolayca kullanabilirsiniz. Bu bakımdan, özel karakterler de dahil olmak üzere herhangi bir dizi çalışacaktır. Bu yaklaşımı numaralandırılmış değerler için kullanmak bile mümkündür. En basit yaklaşım, başlatma ve durdurma olayları için işleyiciler sağlar. Kullanıcı iki oktan birini tıklattığında bir dönme olayı başlatır. Değişiklik meydana gelir ve sonra spin durur. Dönüşcünün doğru çalışabilmesi için, değer özniteliğinin sayısal bir değer içermesi gerekir.

Kod, geçerli seçili harfe eşit olan kod olan CurrentValue değerini ayarlar. Bununla birlikte, bu noktada sayısal değeri eğirme aygıtında rahatsız edici metin olarak görebilirsiniz. Bunun olmasını önlemek için, olay işleyicisi metin rengini şeffaf olarak ayarlar; böylece kullanıcı ekranda metni gerçekten göremez.

Gizli öğelerin renklerini nasıl ayarladığınızı düşünün. Bazı geliştiricilerin gizli öğenin rengini arka plan rengine ayarlama eğilimi vardır ancak arka plan rengi değişebilir. Birçok referans aslında bunu belirtmese de, tanınan renklerden biri şeffaftır, bu da hiç renk anlamına gelmez. Bir şeyi gizlemek istediğinizde daima saydam nesneler kullanın.

Dur olayı işleyicisi, yeni döndürücü değerini CurrentValue'da saklar. Sonra sayısal değeri 65 gibi bir sayıdan

A gibi bir harfe dönüştürür. Sonra kod, metin rengini yeşil renge dönüştürür, böylece kullanıcı ekranda harfi görebilir. Bu örnek, widget stillerinin bir kısmını da değiştirir. Bu stiller, jQuery UI CSS dosyasının parçası olarak listelenir. Bu durumda, kullanıcının birden fazla karakter yazmasını istemiyorsunuz, bu nedenle widgetin genişliği yalnızca bir harfi kabul edecek şekilde değiştirildi. Buna ek olarak, metin rengi şu şekilde gösterildiği gibi yeşil renge dönüşür:

. u-dönüşen {genişlik: 45 piksel;}. ui-spinner-input {color: green;}

Bir olaylar ve CSS birleşimini kullanarak, herhangi bir jQuery UI widget'ıyla her tür özel efekt oluşturabilirsiniz. Yapmanız gereken tek şey gerçekten ilginç bir çıktı oluşturmak için biraz deney yapmaktır.