滑块处理出的内容

我动态地创建我的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

滑块处理出的内容

回答

相关问题