可以将jQuery UI滑块做成这样吗?如果是这样的话,是怎么做的?
发布于 2012-04-03 17:20:31
编辑:使用range slider时是可能的
#slider {
margin: 10px;
height: 3px;
}
#slider a {
background-image: url("<!-- Your image -->") !important;
}
#slider .ui-slider-range { background-color: #58BEEA; background-image: none; }
可以像你所拥有的那样改变jQuery滑块,但是蓝色和灰色部分表示进度区域是不可能的,仅仅使用CSS作为常规滑块是不可能的。
您可以通过添加div将其发挥到极致。但对于一个简单的滑块来说,它的内容太多了。
#slider {
margin: 10px;
height: 3px;
}
#slider a {
background-image: url("<!-- Your image for sider-->") !important;
}
发布于 2012-04-03 17:21:21
是。通过使用图像。处理程序是一个a元素,因此在css中将其设置为处理程序图像的高度,并将图像设置为背景图像。
这基本上就是你要做的所有事情..其余部分由滑块插件支持。
发布于 2012-04-03 17:19:48
我想可以。唯一的问题是径向渐变和滑块的形状。而且,它永远不会在IE中工作。我会告诉你怎么做,但我需要做一些自定义滑块的研究。
编辑
我根本不知道JQuery UI是如何工作的,但如果它们只是div的话,我会使用下面的CSS,我相信它可以通过某种方式使用:
/*Bar*/
#barblue, #bargrey {
height:5px;
border-radius: 2px;
background-color: deepskyblue;
border: 1px solid darkcyan;
width: 50%;
box-shadow: inset 0px 0px 2px darkcyan;
}
#bargrey {
background-color: lightgrey;
border-color: grey;
box-shadow: inset 0px 0px 2px grey;
}
/*Slider*/
#slider {
border-radius: 50px 50px 90px 90px;
border: 1px solid grey;
height: 20px;
width: 15px;
background: grey;
box-shadow: 0px 0px 2px grey;
}
对于滑块,您必须使用图像来获得金属外观。
https://stackoverflow.com/questions/9998117
复制相似问题