1. 首頁
  2. 問答
  3. 對齊JQuery UI滑塊值點aligment

對齊JQuery UI滑塊值點aligment

2016-02-12 56 views
1

我使用的jQuery UI滑塊有6個點，我也有一個6個滑塊上面的div，我想在上面每個div中間的滑塊中定位點。對齊JQuery UI滑塊值點aligment

那麼有沒有辦法如何在jQuery UI滑塊中指定值的位置？

這裏是和例子我在做jsfiddle

$('#slider').slider({ 
    value:1, 
    min: 1, 
    max: 6, 
    step: 1, 
    slide: function(event, ui) { 

    } 
}); 


<div id="assesment-filter"> 
    <div class="assesments-wrapper"> 
     <div id="1" class="assesment">1</div> 
     <div id="2" class="assesment">2</div> 
     <div id="3" class="assesment">3</div> 
     <div id="4" class="assesment">4</div> 
     <div id="5" class="assesment">5</div> 
     <div id="6" class="assesment">6</div> 
    </div> 
<div id="slider"></div> 
</div> 


.assesments-wrapper { 
    height: 33px; 
} 

.assesment { 
    width: 33px; 
    height: 33px; 
    background-color: rgb(219,219,219); 
    line-height: 33px; 
    float: left; 
    text-align: center; 
    vertical-align: middle; 
    color: white; 
    font-size: 18px; 
    border-right: 1px solid white; 
    border-bottom: 1px solid white; 
} 

.assesment:hover { 
     cursor: pointer; 
    } 

.ui-slider-handle{ 
    display: block; 
    position: relative; 
    top: -6px; 
    width: 15px; 
    height: 15px; 
    background-color: #2CBFD9; 
    border-radius: 50%; 
    border: 1px solid white; 
} 

.ui-slider-handle:hover { 
    cursor: pointer; 
} 

.ui-slider{ 
    background-color: rgb(219,219,219); 
    height: 3px; 
    width: 203px; 
    margin-bottom: 16px; 
}

來源

2016-02-12 Teamol

回答

1

什麼對你來說，我只是做數學。

錨的（藍色），寬度爲15px + (1px + 1px)(Border) = 17px;

如果檢查ui-slider錨開始在left:0%，然後爲基準遞增最大值，最小值和步長值。

在這裏，你的情況是：max=6，min=1，step=1
因此：增量百分比是100*step/(max-min)這是20%。

而且每個Assesment是33px+1px=34px因此使包裝的div是34*6=204px約

我們中心，我們需要的滑塊開始在left:8.5px也position:relative到包裝爲anchor's width = 17px, assesment's width = 34px滑塊錨點。（我無法解釋比這更好）

現在在第一步中，錨被放置在第一格的中心....完成一半的工作... D

現在作爲最後一步是在位置left:100%錨點放置在滑塊外部。這就是爲什麼我們需要UI滑塊的寬度是

UI滑塊寬度 = 包裝的寬度 - 2 *（寬度錨的）。

如果left=80%是最後步驟，它會一直

UI滑塊寬度 = 包裝的寬度 - 1 *（寬的 錨）。

因此UI滑塊寬度= 204-2*17 = 170px;

現在，作爲所述第一和最後一步被對準，其他一切內部也落入地方。（萬歲）。

包括小提琴的解決方案：Fiddle For Slider。

參考基本代碼：

.assesments-wrapper { 
     height: 33px; 
     width: fit-content; 
    } 

.ui-slider{ 
    position: relative; 
    background-color: rgb(219,219,219); 
    height: 3px; 
    width: 171px; 
    left:8.5px; 
    margin-bottom: 16px; 
}

PS：我相信，有更好的解決方案，然後這一點。我剛剛發現了這個問題，並想我是否可以在Google上搜索而不用這樣做。

發現有點奇怪的解決方案。不過我會分享這個:)。

來源

2016-02-12 12:20:32

相關問題

 相關問題