Question

我想在不使用任何第三方库或JQuery的情况下在我的Slider上添加刻度线（数字/字符）和工具提示。谁能给我一些想法？（我使用GWT）

谢谢，

注意：我已将此代码用于工具提示，但它并不能很好地工作。当我第一次移动鼠标时，但不是第二次或第三次......，我的意思是它不是一直都在刷新。但每次都是在控制台上打印出来的。顺便说一下，经过几次测试，setTitle正在开发IE，但它并不适用于FireFox（26）和Chrome（39）。

  @Override
  public void onMouseMove(
      MouseMoveEvent event) {
    if (dragging == true) {
      hSlider.setTitle(hSlider.getPropertyString("value") + " onMouseMove");
      sliderTextBox.setValue(hSlider.getPropertyString("value"));
      System.out.println(hSlider.getPropertyString("value") + " onMouseMove");
    }
  }

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:u="urn:import:com.ali.slider.client.utils.widget">

    <ui:with field="res"
        type="com.ali.slider.client.resources.AllResources" />
    <ui:with field="img" type="com.ali.slider.client.resources.AllImages" />

    <ui:style>
    .panel {
        margin: 5px;
    }

    .input[type='range'] {
        -webkit-appearance: none;
        border-radius: 10px;
        box-shadow: inset 0 0 5px #333;
        background-color: pink;
        height: 30px;
    }

    .input[type='range']::-moz-range-track {
        -moz-appearance: none;
        border-radius: 10px;
        background: blue;
        border: 3px solid green;
        box-shadow: inset 0 0 5px red;
        height: 10px;
        width: 150px;
    }

    .input[type='range']::-moz-range-thumb {
        -moz-appearance: none;
        border-radius: 20px;
        background: blue;
        /*box-shadow: inset 0 0 10px rgba(000, 000, 000, 0.5);*/
        border: 3px solid green;
        height: 50px;
        width: 10px;
    }

    .input[type='range']:active::-moz-range-thumb {
        background: orange;
        border: 3px solid red;
        /*box-shadow:0 0 0 2px pink;*/
    }

    .input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        border-radius: 20px;
        background: transparent;
        background-color: blue;
        box-shadow: inset 0 0 10px rgba(000, 000, 000, 0.5);
        border: 3px solid red;
        height: 50px;
        width: 20px;
    }

    .input[type='range']:active::-webkit-slider-thumb {
        background: orange;
        border: 1px solid #0940fd;
        box-shadow: 0 0 0 2px #6fb5f1;
    }

    .input4 {
        margin: 10px 10px 30px;
        padding: 20px;
        font-size: 30px;
        font-family: Junction;
        text-align: center;
        font-weight: bold;
        background: darkgrey;
    }

    </ui:style>

    <g:HTMLPanel styleName="{res.sliderBarStyle.sliderContainer}">
        <div>
            <input ui:field="hSlider" type="range" min="10" max="100"
                value="20" step="10" name="slider" class="{style.input}"></input>
            <g:TextBox ui:field="sliderTextBox" value="0" styleName="{style.input4}"></g:TextBox>
        </div>
    </g:HTMLPanel>

</ui:UiBinder>

如何为GWT的滑块（HTML5）添加刻度线和工具提示

0 个答案: