Question

我正在尝试像进度条一样创建一个可拖动的栏。在页面加载时，条形图将以预定的百分比表示，比如42％，是否有办法使该条形图可拖动？这是html：

 <div class="reviewAttn_bar"><span id="resizable" style="width:42%"></span></div>

我正在使用的jquery是：

$(function() {
  $( "#resizable" ).resizable({ handles: 'e' });
});

但没有发生任何事情。 CSS处理跨度的大小。我正在考虑在顶部创建一个箭头图形，用户可以使用它将栏拖动到不同的百分比，但我无法使这部分工作。有什么建议吗？

这是我正在使用的CSS：

.reviewAttn_bar {
background-color: #1a1a1a;
-webkit-background-size: 100px 100px;
-moz-background-size: 100px 100px;
background-size: 100px 100px;         
background-image: -webkit-gradient(linear, left top, right bottom,
                    color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
                    color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
                    color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
                    to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                    transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                    transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                    transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                    transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                    transparent 75%, transparent);            
height: 65px;
width: 280px;
margin: 50px 0 50px -55px;         
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;

}

.reviewAttn_bar span {
background-color: #ccc;
-webkit-background-size: 100px 100px;
-moz-background-size: 100px 100px;
background-size: 100px 100px;         
background-image: -webkit-gradient(linear, left top, right bottom,
                    color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
                    color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
                    color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
                    to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                    transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                    transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                    transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                    transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                    transparent 75%, transparent);
height: 71%;   
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;

}

#resizable {
display:block;

}

Answer 1

编辑： updated the fiddle here with all of your source the handle EAST is also operating just fine

请注意，我包括jquery，jquery ui和jquery-ui CSS文件。

i checked the jquery .resizable() API documentation here和

不要击败死马，但我注意到添加了手柄E完全移除了右下方可拖动的“纹理”，虽然它仍然有效 - 你必须非常专门鼠标悬停状态栏跨度的右侧才能看到光标改变并知道它是可调整大小的。只想覆盖我的所有基础 - 虽然你可能不会“看到”差异，但实际上是在小提琴上工作

默认情况下在css all span elements are "inline" elements - 意味着他们的css显示属性默认为

display:inline;

要使jquery UI .resizable（）处理程序正常工作，必须在“块”元素（如div）上调用它。

ive taken your code and modified in a fiddle here工作来源如下：

HTML

<div class="reviewAttn_bar"><span id="resizable" style="width:42%"></span></div>

CSS

#resizable{
    display:block;        
    border:1px solid red; // can be ignored just to help visualize
    height:30px;          // can be ignored just to help visualize
}

JS

$(function() {
  $( "#resizable" ).resizable();
});

从可调整大小的处理程序中删除{handles：'e'}参数，并将css块样式添加到#resizable元素，所有内容现在都按预期工作。

可拖动的进度条

1 个答案: