Question

我正在构建一个垂直范围滑块：

enter image description here

这将是非常棒的。

使用jQuery UI 1.8实现，但我只是走了这么远：

enter image description here

我已将滑块包裹在一个包含padding-top和padding-bottom的容器中，以保持滑块的范围元素。

如果没有容器，范围将与背景重叠：

enter image description here

有什么好的解决方案吗？

如有必要，以下是一些代码：

LESS代码：

    /*
     * Center the slider by wrapping it in a container
     */
    .slider-container {
        text-align: center;

        /*
         * Another container that holds the actual background of the slider,
         * with padding to make sure the handle doesn't go outside of the background.
         */
        .slider-bg {
            background: transparent url('/static/images/slider_bg.png') 0% 0%;
            height: 235px;
            width: 28px;
            padding-top: 20px;
            padding-bottom: 7px;
            margin: 0 auto;

            /*
             * The actual element holding the slide handler
             */
            .ui-slider {
                height: 234px;
                width: 28px;
                background: none;

                // Overrides
                .border-radius(0 0 0 0);
                border: 0;

                .ui-slider-handle {
                    width: 28px;
                    height: 29px;

                    background: transparent url('/static/images/slider_handle.png') 0% 0%;

                    // Overrides
                    left: 0;
                    .border-radius(0 0 0 0);
                    border: 0;
                }

                .ui-slider-range {
                    width: 28px;
                    background: transparent url('/static/images/slider_range.png') 0% 0%;
                    padding-bottom: 13px;
                }
            }
        }
    }

JS：

$('div.slider').slider({
    orientation: 'vertical',
    animate: 'true',
    range: 'min',
    slide: function (event, ui) {
    }
});

Answer 1

这样做：

/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 14px; -webkit-border-top-left-radius: 14px; -khtml-border-top-left-radius: 14px; border-top-left-radius: 14px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 14px; -webkit-border-top-right-radius: 14px; -khtml-border-top-right-radius: 14px; border-top-right-radius: 14px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 14px; -webkit-border-bottom-left-radius: 14px; -khtml-border-bottom-left-radius: 14px; border-bottom-left-radius: 14px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 14px; -webkit-border-bottom-right-radius: 14px; -khtml-border-bottom-right-radius: 14px; border-bottom-right-radius: 14px; }

UI小部件标题：

.ui-widget-header
{
    border: 1px solid #dddddd;
    background: #33CCFF url(images/ui-bg_highlight-soft_50_dddddd_1x100.png) repeat-x 50% 50%;
    color: #444444;
    font-weight: bold;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

小部件内容：

.ui-widget-content {background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #444444; }

这是demo给你的

Answer 2

NameError: .border-radius is undefined on line 27, column 17:

26                 
27                 .border-radius(0 0 0 0);
28                 border: 0;

希望有所帮助

jQuery UI滑块：覆盖范围图像

2 个答案: