滑塊處理出的內容

我動態地創建我的JQuery滑塊是這樣的：滑塊處理出的內容

var slider = document.createElement("div"); 
     $(slider).slider({ 
      orientation: "vertical", 
      range: "min", 
     });

，並指定他的一類：$(slider).slider().addClass("dhSliderDesktop"); 我也覆蓋滑塊處理一些設置，但不能讓它來適應它的軌道。我在做什麼worng？你能幫請...

CSS：

.dhSliderDesktop { 
    position: absolute !important; 
    right:9px !important; 
    visibility:hidden; 
    height: 100% !important; 

    width:10px !important; 
    color:green !important; 
    background-color:red !important; 
    background: blue !important;} 



.ui-slider .ui-slider-handle { 

    width:40px !important; 
    height:30px !important; 

    left: -10.5px !important; 
    border-style:none !important; 
    background-color: yellow !important;}

正如你可以在滑塊手柄失控，我不想要的內容窗口看到下面的圖片。如何解決這個問題？

enter image description here

來源

2013-03-05 Jacob

所有你需要做的就是玩：如果你改變自己會改變滑塊的尺寸和位置值

ui-slider .ui-slider-handle { 
    width: 40px !important; 
    height: 30px !important; 
    left: -10.5px !important; 
    ..

。

來源

2013-03-05 12:02:31

是的，我知道。我使用top：someValue來移動手柄，但它剛剛停止工作 – Jacob 2013-03-05 12:04:19

是的，您不允許爲滑塊的方向設置任何值。你的滑塊是垂直的，所以你不能設置頂部或底部。（實際上，您可以將底部設置爲默認值，滑塊將在移動滑塊時更改底部值，但不要設置頂部值，這會使滑塊返回到指定位置。） – 2013-03-05 12:17:05

因此，如何才能我欺騙這個？ – Jacob 2013-03-05 12:18:15

下面是一個解決方案，它使用圍繞滑塊小部件的包裝div作爲助手來顯示完整的藍色滑塊。實際的滑塊包裝內居中，和我以前用過，企圖百分比值，使功能獨立的外部包裝物大小的（但仍需要一些CSS細化和微調）：

.slider-wrapper { 
    height: 100%; 
    width: 10px; 
    margin: 0; 
    right: 10px; 
    background: blue; 
    border-radius: 3px; 
    position:absolute; 
} 
.slider-wrapper-range-min { 
    height: 10%; 
    width: 100%; 
    margin: 0; 
    right: 0; 
    bottom: 0; 
    background: red; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
    position:absolute; 
} 
.dhSliderDesktop { 
    height: 80% !important; 
    width: 100% !important; 
    right: 0 !important; 
    top: 10%; 
    bottom: auto; 
    border: none; 
    background: blue !important; 
    position: absolute; 
} 

.ui-slider .ui-slider-handle { 

    width:30px !important; 
    height:24.5% !important; 
    margin-bottom:-200%; 
    margin-top: auto; 

    left: -12px !important; 
    background-color: yellow !important; 
}

有以下激活jQuery代碼：

var $sliderWrapper = $('<div class="slider-wrapper"><div class="dhSliderDesktop"></div></div>'); 

$sliderWrapper 
    .appendTo($(".wrapper")) 
    .find(".dhSliderDesktop") 
     .slider({ 
      orientation: "vertical", 
      range: "min", 
      change: function(event,ui) { 
       console.log(ui.value); 
      } 
     }) 
     .end() 
    .append($('<div class="slider-wrapper-range-min"></div>')) 
;

編輯：這裏有一個更新的link to jsfiddle

來源

2013-03-05 14:08:21 marty

是否有可能直接修改Jwuery CSS的方法 – Jacob 2013-03-07 12:26:25

更簡單的解決辦法是截獲滑塊變化事件，調整H的位置andler根據需要實施例的代碼：

$("#Slider1").slider({ 
      change: function (event, ui) { 
      var TempID = $(this).attr('id'); 
      var LeftVal = $("#" + TempID).find("a").css("left"); 
      if (LeftVal == "500px") $("#" + TempID).find("a").css("left", "485px"); 
     } 
    });

上面的代碼假定您的滑塊寬度爲500像素和處理程序的圖像是30像素。我們從hanlder左CSS樣式中減去15px。

來源

2013-08-22 18:10:18 Eyad

滑塊處理出的內容

回答

相關問題