jQuery UI的滑塊：疊加範圍圖像

我建立一個垂直範圍滑塊：jQuery UI的滑塊：疊加範圍圖像

enter image description here

這將是真棒。

與jQuery UI 1.8實現的，不過，我只走到這一步：

enter image description here

我裹在其中具有padding-top和padding-bottom保持滑塊的範圍元素在一個容器中的滑塊地點。

沒有容器，該範圍將重疊的背景：

enter image description here

什麼好的解決辦法？

下面是一些代碼，如果必要的話：

LESS代碼：

/* 
    * Center the slider by wrapping it in a container 
    */ 
    .slider-container { 
     text-align: center; 

     /* 
     * Another container that holds the actual background of the slider, 
     * with padding to make sure the handle doesn't go outside of the background. 
     */ 
     .slider-bg { 
      background: transparent url('/static/images/slider_bg.png') 0% 0%; 
      height: 235px; 
      width: 28px; 
      padding-top: 20px; 
      padding-bottom: 7px; 
      margin: 0 auto; 

      /* 
      * The actual element holding the slide handler 
      */ 
      .ui-slider { 
       height: 234px; 
       width: 28px; 
       background: none; 

       // Overrides 
       .border-radius(0 0 0 0); 
       border: 0; 

       .ui-slider-handle { 
        width: 28px; 
        height: 29px; 

        background: transparent url('/static/images/slider_handle.png') 0% 0%; 

        // Overrides 
        left: 0; 
        .border-radius(0 0 0 0); 
        border: 0; 
       } 

       .ui-slider-range { 
        width: 28px; 
        background: transparent url('/static/images/slider_range.png') 0% 0%; 
        padding-bottom: 13px; 
       } 
      } 
     } 
    }

JS：

$('div.slider').slider({ 
    orientation: 'vertical', 
    animate: 'true', 
    range: 'min', 
    slide: function (event, ui) { 
    } 
});

來源

2012-04-05 Jonatan Littke

你不想向我們展示您的代碼demo？ – Alex 2012-04-05 11:28:40

不確定是否有必要。更新。 – 2012-04-05 11:31:43

啊廢話，我鏈接到的圖像有錯誤的網址。我現在已經上傳了他們。 – 2012-04-05 15:42:05

讓它這樣：

/* Corner radius */ 
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 14px; -webkit-border-top-left-radius: 14px; -khtml-border-top-left-radius: 14px; border-top-left-radius: 14px; } 
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 14px; -webkit-border-top-right-radius: 14px; -khtml-border-top-right-radius: 14px; border-top-right-radius: 14px; } 
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 14px; -webkit-border-bottom-left-radius: 14px; -khtml-border-bottom-left-radius: 14px; border-bottom-left-radius: 14px; } 
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 14px; -webkit-border-bottom-right-radius: 14px; -khtml-border-bottom-right-radius: 14px; border-bottom-right-radius: 14px; }

和UI控件標題：

.ui-widget-header 
{ 
    border: 1px solid #dddddd; 
    background: #33CCFF url(images/ui-bg_highlight-soft_50_dddddd_1x100.png) repeat-x 50% 50%; 
    color: #444444; 
    font-weight: bold; 
    -moz-border-radius: 14px; 
    border-radius: 14px; 
}

Widget內容：

.ui-widget-content {background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #444444; }

這裏是你

來源

2012-04-05 15:47:58 coder

感謝您的徹底解答！不幸的是，依靠border-radius在IE中不起作用。我總是可以使用CSS3 PIE，但我不認爲最終會得到與使用圖像相同的結果。我會考慮的，謝謝。這裏希望有一個跨瀏覽器的解決方案！ – 2012-04-05 17:24:57

另外，你確實知道你不必像在演示中那樣重複左上半徑和右上半徑等等。 'border-radius：14px'就足夠了（加上所有的供應商前綴）。 – 2012-04-05 17:25:46

NameError: .border-radius is undefined on line 27, column 17: 

26     
27     .border-radius(0 0 0 0); 
28     border: 0;

希望它可以幫助

來源

2016-08-09 13:34:22

jQuery UI的滑塊：疊加範圍圖像

回答

相關問題