jquery - 可拖动进度条

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和

不是为了打败一匹马，但我注意到添加 handle E 完全删除了右下角的可拖动“纹理”，但它仍然有效 - 您必须非常具体地将鼠标悬停在状态栏跨度的右侧才能看到光标发生变化并知道它可以调整大小。只是想涵盖我的所有基础 - 虽然你可能没有“看到”差异，但它实际上是在 fiddle 上工作

<小时/>

默认情况下CSS全部span elements are "inline" elements - 意味着他们的CSS显示属性默认为

display:inline;

为了使 jquery UI .ressized() 处理程序正常工作，必须在“ block ”元素(例如 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 block 样式添加到您的 #resizing 元素，现在一切都按预期工作。