Создайте ползунки jQuery с кнопками плюс / минус, чтобы добавить / вычесть значение из ползунка - PullRequest
Новая
       27

Создайте ползунки jQuery с кнопками плюс / минус, чтобы добавить / вычесть значение из ползунка

6 голосов
/ 13 июня 2011

Я пытаюсь воспроизвести то, что вы видите на изображении здесь, в jquery, чтобы сделать сенсорную версию существующего приложения: jquery slider plus - minus

Я использую ползунки jquery-ui, и я хотел бы продолжать использовать их, потому что с ними связана большая бизнес-логика, на самом деле они выглядят так:

enter image description here

Мне нужна помощь в части CSS и HTML, я не знаю, как добиться эффекта, когда «ползунок» заполняется, когда пользователь нажимает кнопку «плюс», и как мне организовать свой HTML для достижения этот взгляд.

Моя разметка выглядит следующим образом: 

  <table>
    <tr>
      <td>
        <div id="timeName">
          Tempo a disposizione
        </div>

        <div id="travelTime">
          <div class="selectedHandler"></div>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <div class='paramName'>
          Architecture and Heritage
        </div>

        <div id="Architecture_and_Heritage" class="param" data-id="3">
          <div class="selectedHandler"></div>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <div class='paramName'>
          Culture
        </div>

        <div id="Culture" class="param" data-id="5">
          <div class="selectedHandler"></div>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <div class='paramName'>
          Fairs Performances and Special Events
        </div>

        <div id="Fairs_Performances_and_Special_Events" class="param" data-id="6">
          <div class="selectedHandler"></div>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <div class='paramName'>
          Food and Drink
        </div>

        <div id="Food_and_Drink" class="param" data-id="1">
          <div class="selectedHandler"></div>
        </div>
      </td>
    </tr>
  </table>

1 Ответ

5 голосов
/ 13 июня 2011

Это какая-то помощь?Это не совсем стиль, но вроде как дает идею: http://jsfiddle.net/TU95t/

<html>

<head>
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
    <script>
        $(function() {
            var select = $( "#demo" );
            var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
                min: 1,
                max: 6,
                value: 1,
                range: "min",
                change: function(event, ui) { 
                    var sliderValue = $( "#slider" ).slider( "option", "value" );
                    $('#sliderPosition').html(sliderValue);
                }        
            });
    
        $('#increase').click(function() {
        var sliderCurrentValue = $( "#slider" ).slider( "option", "value" );
            slider.slider( "value", sliderCurrentValue + 1 );
        });
    
        $('#decrease').click(function() {
        var sliderCurrentValue = $( "#slider" ).slider( "option", "value" );
            slider.slider( "value", sliderCurrentValue - 1 );
        });
    });
    </script>  
    
    <div id="demo">
        <div id="sliderPosition">1</div>
    </div><!-- End demo -->
    
    <div id="increase" style="width:200px; height:30px; border: 1px solid #ccc;">
      + Increase Slider Value
    </div>
    <div id="decrease" style="width:200px; height:30px; border: 1px solid #ccc;">
       - Decrease Slider Value
    </div>
</body>
</html>
<!-- End demo -->
...