2010-09-14 21 views
7

Standart jQueryUI kaydırıcısını kullanıyorum ve tutamacın görünümünü değiştirmek istiyorum. Ben "kaydırıcı şeritli" oturan kolu olması,jQuery UI Kaydırıcı ve tanıtıcı değiştirme

.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 40px; height: 10px; cursor: default; border: 0; background-color: #c6c7c8; } 
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } 

.ui-slider-horizontal { height: 10px; border: 0; background-color: #eceded; } 
.ui-slider-horizontal .ui-slider-handle { top: 0; margin-left: 0; } 
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } 
.ui-slider-horizontal .ui-slider-range-min { left: 0; } 
.ui-slider-horizontal .ui-slider-range-max { right: 0; } 

Ben öyle yaptım CSS değiştirdi. Ancak tutamağın en sağdaki konuma taşınması durumunda, şeridin hemen dışında bulunur. Elbette .ui-slider-handle'un kenar boşluğu -20px'e ayarlanmış olabilir. Fakat her iki uçta da şeridi örtüyor.

ui-slider-range-max ile bir şeyler yapmak için mi? Ancak, kaydırıcıyı Firebug aracılığıyla denetlerken, bu CSS sınıfı hiçbir yerde kullanılmaz.

cevap

4

ui-slider-range-max sınıfı, bir sabit maksimum noktaya sahip bir sürgünün aralık kısmına verilir. Şunun gibi: http://jqueryui.com/demos/slider/#rangemax

sen belki

ne soruyorsun de tutamacın sol kenar durak olması nasıl olduğunu düşünüyorum kaydırıcı bu tür kullanmıyorsanız sonra Firebug bu sınıf görmüyorsanız "sürgü-şerit" in sol kenarı ve sapın sağ kenarı "sürgü-şeridin" sağ kenarını geçmez. Yani: kulp şeridinde oturan tutamaç Eğer böyle bir şey varsa, tutamacı ilk önce arka plan ve ui kaydırma çubuğundan görünen herhangi bir şeyi kaldırarak "kaydırıcı şerit" içinde kalıyormuş gibi görünebilir.

örnek:

.ui-slider-horizontal { height: 10px; border: 0; background: none } 

Sonra arka plana sahip bir konteyner div içinde kaydırma çubuğunu sarın. Kapsayıcı div "kaymak-şerit" olarak görülebilir ve istediğiniz dolguyu verebilmeniz için sapın kaymak-şeritte kaldığı görülecektir.

örnek: aksi takdirde sadece sağdaki dolgu kullanmak, sol ve sağ konteyner div üzerinde dolgu varsa

.ui-slider-container { background-color: #eceded; padding: 0 0.6em;} 

da geri ne olduğunu için kolu margin-left sıfırlayın.