Question

我正在使用Filament Group的Slider组件。您可以在此处查看该组件http://filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

我们修改了样式表以删除我们不需要的标签和下拉菜单。然后我试图用一些自定义图像更改滑块手柄。我们得到了一些奇怪的结果。 Slider没有显示Handles本身。

有没有人有一些样品来改变Slider手柄？我不确定，我做错了什么。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title>Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider</title>

        <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="js/selectToUISlider.jQuery.js"></script>

        <link rel="stylesheet" href="css/redmond/jquery-ui-1.8.16.custom.css" type="text/css" /> 
        <script type="text/javascript">
            $(function(){
                $('select#valueA, select#valueb').selectToUISlider(); 
            }); 
        </script>   
    </head> 
    <body>  
        <div style="margin-top:65px;">
            <fieldset> 
                <select name="valueA" id="valueA" style="display:none">
                    <option value="6am">6:00</option>
                    <option value="7am">7:00</option>
                    <option value="8am">8:00</option>
                    <option value="9am" selected="selected">9:00</option>
                    <option value="10am">10:00</option>
                    <option value="11am">11:00</option>
                    <option value="Noon">Noon</option>
                    <option value="1pm">1:00</option>
                    <option value="2pm">2:00</option>
                    <option value="3pm">3:00</option>
                    <option value="4pm">4:00</option>
                    <option value="5pm">5:00</option>
                    <option value="6pm">6:00</option>
                    <option value="7pm">7:00</option>
                    <option value="8pm">8:00</option>
                    <option value="9pm">9:00</option>
                    <option value="10pm">10:00</option>
                    <option value="11pm">11:00</option>
                    <option value="12pm">12:00</option>
                </select>
                <select name="valueB" id="valueB" style="display:none">
                    <option value="6am">6:00</option>
                    <option value="7am">7:00</option>
                    <option value="8am">8:00</option>
                    <option value="9am">9:00</option>
                    <option value="10am">10:00</option>
                    <option value="11am">11:00</option>
                    <option value="Noon">Noon</option>
                    <option value="1pm">1:00</option>
                    <option value="2pm">2:00</option>
                    <option value="3pm">3:00</option>
                    <option value="4pm">4:00</option>
                    <option value="5pm">5:00</option>
                    <option value="6pm">6:00</option>
                    <option value="7pm">7:00</option>
                    <option value="8pm">8:00</option>
                    <option value="9pm" selected="selected">9:00</option>
                    <option value="10pm">10:00</option>
                    <option value="11pm">11:00</option>
                    <option value="12pm">12:00</option>
                </select>
            </fieldset> 
        </div>  
    </body>
</html>

风格:(我无法发布完整的风格）

fieldset { border:0; padding:4px 10px; margin-top:10px;}/*
        label {font-weight: normal; margin-right: .5em; font-size: 1.1em;} 
        select {margin-right: 1em;} */
        .ui-slider {clear: both; }

.ui-slider { text-decoration: none !important; position: relative; text-align: left; height:4px; border: 1px solid #fcfdfd; background: #FFFFFF url(images/jslider.plastic.png) 0 0px repeat-x;}
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: 10px; display: block; border: 0; }
.ui-slider .ui-slider-handle  
{
    position: absolute; 
    z-index: 2; 
    width: 1.2em;
    /*height: 1.4em;*/ 
    cursor: default;
    overflow: visible !important;
    background: #FFFFFF url(images/jslider.plastic.png) 0 -40px repeat-x; 
}

.ui-slider-horizontal { height: 20px; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em;background: #FFFFFF url(images/jslider.plastic.png) 0 -40px repeat-x; }
.ui-slider-horizontal .ui-slider-range { top: 0; height:4px; border: 1px solid #5F5F5F; background: #5c9ccc url(images/jslider.plastic.png) 0 -20px;}
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; } 


.ui-slider .ui-slider-handle .ui-state-hover, .ui-slider .ui-slider-handle .ui-state-focus { 
    background: #f5f8f9 url(images/jslider.plastic.png) 0 -40px repeat-x; 
    font-weight: bold; color: #1d5987; outline: none; }

.ui-slider .ui-slider-handle .ui-state-active { /*border: 1px solid #79b7e7; */background: #f5f8f9 url(images/jslider.plastic.png) 0 -40px repeat-x; font-weight: bold; color: #e17009; outline: none; }

.ui-slider .ui-slider-tooltip {
    display: none;
}
.ui-slider .screenReaderContext {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    left: -999999999px;
}
.ui-slider .ui-state-active .ui-slider-tooltip, .ui-slider .ui-state-focus .ui-slider-tooltip, .ui-slider .ui-state-hover .ui-slider-tooltip {
    display: block;
    position: absolute;
    bottom: 2.5em;
    text-align: center;
    /*padding: .3em .2em .4em;*/
    font-size: 10px;
    width: 8em;
    margin-left: -3.7em;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down, .ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down-inner {
    position: absolute; 
    display: block;
    width:0; 
    height:0; 
    border-bottom-width: 0;
    background: none;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down {    
    border-left: 7px dashed transparent; 
    border-right: 7px dashed transparent;
    border-top-width: 8px;
    bottom: -8px;
    right: auto;
    left: 50%;
    margin-left: -7px;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down-inner {
    border-left: 6px dashed transparent; 
    border-right: 6px dashed transparent;
    border-top: 7px solid #fff;
    bottom: auto;
    top: -9px;
    left: -6px;
}
.ui-slider a {
    text-decoration: none;
}
.ui-slider ol, .ui-slider li, .ui-slider dl, .ui-slider dd, .ui-slider dt {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ui-slider ol, .ui-slider dl {
    position: relative;
    top: 1.3em;
    width: 100%;
}
.ui-slider dt {
    top: 1.5em;
    position: absolute;
    padding-top: .2em;
    text-align: center;
    border-bottom: 1px dotted #ddd;
    height: .7em;
    color: #999;
}
.ui-slider dt span {
    background: #fff;
    padding: 0 .5em;
}
.ui-slider li, .ui-slider dd {
    position: absolute;
    overflow: visible;
    color: #666;
}
.ui-slider span.ui-slider-label {
    position: absolute;
}
.ui-slider li span.ui-slider-label, .ui-slider dd span.ui-slider-label {
    display: none;
}
.ui-slider li span.ui-slider-label-show, .ui-slider dd span.ui-slider-label-show 
{
    display: block;
    font-family:Arial, Helvetica, sans-serif;
    color:#5f5f5f;
    font-weight:bold;
    font-size:11px;
}
.ui-slider span.ui-slider-tic {
    position: absolute;
    left: 0;
    height: 5px;
    top: -1.3em;
}
.ui-slider li span.ui-widget-content, .ui-slider dd span.ui-widget-content {
    border-right: 0;
    border-left-width: 1px;
    border-left-style: solid;
    border-top: 0;
    border-bottom: 0;
}
.ui-slider .first .ui-slider-tic, .ui-slider .last .ui-slider-tic {
    display: none;
}

Answer 1

我想通了自己。这是CSS的变化。这是我的css代码。

.ui-slider 
{ 
    position: relative; 
    text-align: left;  
    background: #FFFFFF url(jslider.plastic.png) 0 0px repeat-x; 
}
.ui-slider .ui-slider-handle 
{ 
    position: absolute; 
    z-index: 3; 
    width: 1.2em; height: 1.2em; 
    cursor: default; 
}
.ui-slider .ui-slider-range 
{ 
    position: absolute; 
    z-index: 2; 
    font-size: .7em; 
    display: block; 
    border: 0; }

.ui-slider-horizontal { height: .3em; }
.ui-slider-horizontal .ui-slider-handle { margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range 
{ 
    top: 0; 
    height: 100%; 
    border: 1px solid #5F5F5F; 
    background: #5c9ccc url(jslider.plastic.png) no-repeat 0 -20px; 
}
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; } 

/*NEW SLIDER STYLES FOR SCALE, ETC*/
/* slider widget */
.ui-slider  {
    text-decoration: none !important;
}
.ui-slider .ui-slider-handle  {
    overflow: visible !important;
    background: url(jslider.plastic.png) no-repeat 0 0;
    width: 13px; height: 20px; background-position: 0 -40px; position: absolute; 
    left: 20%; top: -5px; 
    border: none;
    margin-left: -6px; cursor: pointer; cursor: hand;
} 

.ui-slider .ui-slider-handle .ui-state-hover, .ui-slider .ui-slider-handle .ui-state-focus { 
    background: #f5f8f9 url(jslider.plastic.png) 0 -40px repeat-x; 
    font-weight: bold; color: #1d5987; outline: none; }

.ui-slider .ui-slider-handle .ui-state-active { background: #f5f8f9 url(ijslider.plastic.png) 0 -40px repeat-x; font-weight: bold; color: #e17009; outline: none; }


.ui-slider .ui-slider-tooltip {
    display: none;
}
.ui-slider .screenReaderContext {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    left: -999999999px;
}
.ui-slider .ui-state-active .ui-slider-tooltip, .ui-slider .ui-state-focus .ui-slider-tooltip, .ui-slider .ui-state-hover .ui-slider-tooltip {
    display: block;
    position: absolute;
    bottom: 2.5em;
    text-align: center;
    padding: .3em .2em .4em; 
    font-size: .9em;
    width: 8em;
    margin-left: -3.7em;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down, .ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down-inner {
    position: absolute; 
    display: block;
    width:0; 
    height:0; 
    border-bottom-width: 0;
    background: none;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down {    
    border-left: 7px dashed transparent; 
    border-right: 7px dashed transparent;
    border-top-width: 8px;
    bottom: -8px;
    right: auto;
    left: 50%;
    margin-left: -7px;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down-inner {
    border-left: 6px dashed transparent; 
    border-right: 6px dashed transparent;
    border-top: 7px solid #fff;
    bottom: auto;
    top: -9px;
    left: -6px;
}
.ui-slider a {
    text-decoration: none;
}
.ui-slider ol, .ui-slider li, .ui-slider dl, .ui-slider dd, .ui-slider dt {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ui-slider ol, .ui-slider dl {
    position: relative;
    top: 1.3em;
    width: 100%;
}
.ui-slider dt {
    top: 1.5em;
    position: absolute;
    padding-top: .2em;
    text-align: center;
    border-bottom: 1px dotted #ddd;
    height: .7em;
    color: #999;
}
.ui-slider dt span {
    background: #fff;
    padding: 0 .5em;
}
.ui-slider li, .ui-slider dd {
    position: absolute;
    overflow: visible;
    color: #666;
}
.ui-slider span.ui-slider-label {
    position: absolute;
}
.ui-slider li span.ui-slider-label, .ui-slider dd span.ui-slider-label {
    display: none;
}
.ui-slider li span.ui-slider-label-show, .ui-slider dd span.ui-slider-label-show {
    display: block;
    font-family:Arial, Helvetica, sans-serif;
    color:#5f5f5f;
    font-weight:bold;
    font-size:11px;
}
.ui-slider span.ui-slider-tic {
    position: absolute;
    left: 0;
    height: .3em;
    top: -1.3em;  
    background-color:#5f5f5f; 
    /*z-index:1;*/
}
.ui-slider li span.ui-widget-content, .ui-slider dd span.ui-widget-content {
    border-right: 0;
    border-left-width: 1px;
    border-left-style: solid;
    border-top: 0;
    border-bottom: 0;
}
.ui-slider .first .ui-slider-tic, .ui-slider .last .ui-slider-tic {
    display: none;
}

.slider-fieldset { border:0; margin: 0.3em; height: 3.8em;}  
.slider-select {margin-right: 1em; float: left;}
.ui-slider {clear: both; top:0.8em; margin-left:1.2em; width:80%;
            font-size: 70%; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; }

如何更改Select UI Slider JQuery插件的句柄？

1 个答案: