jQuery UI的滑塊背景和邊框

我想實現的東西像下面使用CSS的圖像上，jQuery UI的滑塊背景和邊框

enter image description here

我利用這個滑塊和修改它。 http://jqueryui.com/slider/#steps

需要更改哪些css值才能獲得與上圖中相同的輸出？

這裏是我的代碼：

var valMap = [1, 2, 3, 4, 5, 6,7,8,9]; 
    value= 0; 
    var lastSlideValue = 0; 
    var internalSlideCalling = false; 

    var slider = $("#slider").slider({ 
    disabled : false, 
    animate : true, 
    min : 0, 
    max : valMap.length - 1, 
    slide : function(event, ui) { 
     slider.slider("option", "animate", "slow"); 
    }, 
    change: function(){ 

     var Slideval = $(this).slider('value'); 

     if (!internalSlideCalling) 
     { 
      if (Slideval>lastSlideValue && lastSlideValue < $(this).slider('option','max')) 
      { 
       Slideval = lastSlideValue+1; 
      } 
      else if (lastSlideValue > $(this).slider('option','min')) 
      { 
       Slideval = lastSlideValue-1;     
      } 
      lastSlideValue = Slideval; 
     } 

     console.log(Slideval, value) 

     if(value < Slideval) { 
      console.log("incremented") 
     } else if(value > Slideval){ 
      console.log("decremented") 
     } 
     value = Slideval; 

     if (!internalSlideCalling){ 
      internalSlideCalling = true; 
      $(this).slider('value',Slideval); 
     } 
     else 
      internalSlideCalling = false; 
    } 
}); 

$("#slider").slider('values',valMap);

這裏有一個的jsfiddle：http://jsfiddle.net/endl3ss/fVj78/

來源

2013-05-15 Defyleiti

你爲什麼不給它一個嘗試的例子嗎？ – Jace

Quote：「這個小部件需要一些功能性CSS，否則它將無法工作。如果您構建自定義主題，請使用該小部件的特定CSS文件作爲起點。」 - http://api.jqueryui.com/slider/所以檢查CSS文件並開始編輯 – Yeronimo

只是爲了使U明白從哪裏開始我已經打了一個比方你看看

http://jsfiddle.net/fVj78/1/

body{ 
background:#000; 
} 
.ui-slider-handle, .ui-state-hover, .ui-state-default{ 
height: 20px important; 
width: 20px; 
background: orange !important; 
border-radius: 0; 
top: 0 !important; 
border:0 !important; 
} 
.ui-slider{ 
border-radius: 0; 
height: 21px !important; 
background: #000; 
border-color :#fff !important; 
}

來源

2013-05-15 09:42:16

謝謝，現在我知道從哪裏開始。 – Defyleiti

你可以達到你的效果與背景圖像後：

CSS

div[id=slider] { 
    background:url(images) no-repeat center; 
    border-radius:4px; 
    height:11px; 
    margin:0; 
    padding:0; 
    width:390px 
}

這裏有jsFiddle

來源

2013-05-15 11:02:33 Ekin

感謝您的補充。 ;） – Ekin

jQuery UI的滑塊背景和邊框

回答

相關問題