2

我正在尝试创建一个类似于进度条的可拖动条。在页面加载时，该栏将按预先确定的百分比，例如 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;

}

4

1 回答 1

0

编辑： 在这里用你所有的源更新了小提琴，手柄东也运行得很好

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

我在这里检查了jquery .resizable() API 文档

不要打死马，但我注意到添加句柄 E 完全删除了右下角的可拖动“纹理”，虽然它仍然有效 - 你必须非常特别地将鼠标悬停在状态栏跨度的右侧才能看到光标变化并且知道它是可调整大小的。只是想覆盖我所有的基础——虽然你可能没有“看到”差异，但实际上它正在处理小提琴

默认情况下，在 css 中，所有span 元素都是“内联”元素- 这意味着它们的 css 显示属性默认为

display:inline;

要让 jquery UI .resizable() 处理程序正常工作，必须在诸如 div 的“块”元素上调用它。

我拿了你的代码并在这里修改了工作源代码如下：

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 元素，现在一切都按预期工作。

于 2013-05-23T03:38:12.643 回答