的时间轴

的时间轴

关注
发信
关注(28)粉丝(399)

javascript - 在不确定的时间轴上实现jQuery滑块

我要实现的是在一个时代years-li的集合中寻找具有不同时隙decades - ul的时间轴。
我有这种格式的数据：

<ul class='decade'>
    <p>1810</p>
    <li>1811</li>
    <li>1813</li>
    <li>1819</li>
</ul>
<ul class='decade'>
    <p>1820</p>
    <li>1822</li>
    <li>1824</li>
    <li>1828</li>
    <li>1829</li>
</ul>
<ul class='decade'>
    <p>1830</p>
    <li>1834</li>
    <li>1835</li>
    <li>1836</li>
    <li>1837</li>
    <li>1838</li>
</ul>
<ul class='decade'>
    <p>1840</p>
    <li>1844</li>
    <li>1849</li>
</ul>


现在，每次我强调要尊重的十年时，我都希望那位经理人寻求各自的机会。十年中的十年。例如，如果某人选择1813，则将其选中，并且1810将突出显示。同时，由于用户仅包含3年，因此在此十年中，用户只能浏览3个步骤。同样的事情应该在1830年的5年中分5步起作用。

有人可以帮忙吗？

javascript - 在不确定的时间轴上实现jQuery滑块-LMLPHP

到目前为止，我尝试过的是：
我无法计算出该步骤是否在通话十年情况下是动态的。

   $('.timelineYearNavList').slider({
            min:1,
            max:years.length,
            step:1,
            slide: function( event, ui ) {
                //triggering other events
            }
  });


请不要以为我只写了这么多代码，没有尝试其他任何东西。 :)

最佳答案

这是我想出的一个片段：



$(document).ready(function() {
  $("ul.decade").each(function() {
    $(this).hide();

    var valMap = $(this).find("li").map(function() {
      return $(this).text();
    }).get(); //converts li contents into array

    $(this).after('<p>Decade (' +
      $(this).find('p').text() +
      '): <input type="text" class="selected" readonly style="border:0; color:#f6931f; font-weight:bold;" value="' +
      valMap[0] +
      '"></p><div class="slider"></div>'); //adds a slider set to each decades

    $(this).nextAll(".slider")
      .data("valMap", valMap).slider({
        max: valMap.length - 1,
        min: 0,
        values: [0],
        slide: function(event, ui) {
          $(this).prev().find(".selected")
            .val(valMap[ui.values[0]]); //sets the value according to years selected
        }
      }).each(function() {
        var opt = $(this).data("ui-slider").options;
        var max = opt.max + 1;

        for (var i = 0; i < max; i++) {
          var el = $('<label>' +
              $(this).data("valMap")[i] +
              '</label>')
            .css('left', (i / (max - 1) * 100) + '%');
          $(this).append(el);
        }
      }); //adds legends to the slider
  });
});

.slider label {
  position: absolute;
  width: 20px;
  margin-left: -1.1em;
  text-align: center;
  margin-top: 20px;
}

.slider {
  width: 80%;
  margin: 0 auto 2em auto;
}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul class='decade'>
  <p>1810</p>
  <li>1811</li>
  <li>1813</li>
  <li>1819</li>
</ul>
<ul class='decade'>
  <p>1820</p>
  <li>1822</li>
  <li>1824</li>
  <li>1828</li>
  <li>1829</li>
</ul>
<ul class='decade'>
  <p>1830</p>
  <li>1834</li>
  <li>1835</li>
  <li>1836</li>
  <li>1837</li>
  <li>1838</li>
</ul>
<ul class='decade'>
  <p>1840</p>
  <li>1844</li>
  <li>1849</li>
</ul>





这是一个替代的滑块片段：



$(document).ready(function() {
  var decades = [],
    years = [];
  $("ul.decade").each(function() {
    var valMap = {};
    valMap.years = $(this).find("li").map(function() {
      return $(this).text();
    }).get(); //converts li contents into array
    valMap.decade = $(this).find('p').text();
    decades.push(valMap);
    years = $.merge(years, valMap.years);
  }).hide();

  $('body').append('<p>Decade (<span class="decade">' +
    decades[0].decade +
    '</span>): <input type="text" class="selected" readonly style="border:0; color:#f6931f; font-weight:bold;" value="' +
    years[0] +
    '"></p><div class="slider"></div>'); //appends a slider set to document

  $(".slider")
    .slider({
      max: years.length - 1,
      min: 0,
      values: [0],
      slide: function(event, ui) {
        var total = 0,
          decade;
        for (var i of decades) {
          total += i.years.length;
          if (ui.values[0] < total) {
            decade = i.decade;
            break;
          }
        }
        $(".decade")
          .text(decade); //sets the value according to decade selected*/
        $(".selected")
          .val(years[ui.values[0]]); //sets the value according to years selected*/
      }
    }).each(function() {
      var opt = $(this).data("ui-slider").options;
      var max = opt.max + 1;

      for (var i = 0; i < max; i++) {
        var el = $('<label>' +
            years[i] +
            '</label>')
          .css('left', (i / (max - 1) * 100) + '%');
        $(this).append(el);
      }
    }); //adds legends to the slider
});

.slider label {
  position: absolute;
  width: 20px;
  margin-left: -1.1em;
  text-align: center;
  margin-top: 20px;
  font-size: 0.75em;
}

.slider {
  width: 90%;
  margin: 0 auto 2em auto;
}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul class='decade'>
  <p>1810</p>
  <li>1811</li>
  <li>1813</li>
  <li>1819</li>
</ul>
<ul class='decade'>
  <p>1820</p>
  <li>1822</li>
  <li>1824</li>
  <li>1828</li>
  <li>1829</li>
</ul>
<ul class='decade'>
  <p>1830</p>
  <li>1834</li>
  <li>1835</li>
  <li>1836</li>
  <li>1837</li>
  <li>1838</li>
</ul>
<ul class='decade'>
  <p>1840</p>
  <li>1844</li>
  <li>1849</li>
</ul>





最终摘要：



$(document).ready(function() {
  var decades = [],
    years = [];
  $("ul.decade").each(function() {
    var valMap = {};
    valMap.years = $(this).find("li").map(function() {
      return $(this).text();
    }).get(); //converts li contents into array
    valMap.decade = $(this).find('p').text();
    decades.push(valMap);
    years = $.merge(years, valMap.years);
  }).hide();

  $('body').append('<p>Decade (<span class="decade">' +
    decades[0].decade +
    '</span>): <input type="text" class="selected" readonly style="border:0; color:#f6931f; font-weight:bold;" value="' +
    years[0] +
    '"></p><div class="slider"></div>'); //appends a slider set to document
  $(".slider")
    .slider({
      max: parseInt(years[years.length - 1]),
      min: parseInt(decades[0].decade),
      values: [years[0]],
      slide: function(event, ui) {
        if ($.inArray(ui.values[0].toString(), years) < 0) return false;
        var decade;
        for (var i of decades) {
          if ($.inArray(ui.values[0].toString(), i.years) >= 0) {
            decade = i.decade;
            break;
          }
        }
        $(".decade")
          .text(decade); //sets the value according to decade selected*/
        $(".selected")
          .val(ui.values[0]); //sets the value according to years selected
      }
    }).each(function() {
      var opt = $(this).data("ui-slider").options;
      var max = opt.max;
      var min = opt.min;

      for (var i = min; i < max; i += 10) {
        var el = $('<label>' + i + '</label>')
          .css('left', ((i - min) / (max - min) * 100) + '%');
        $(this).append(el);
      }
    }); //adds legends to the slider
});

.slider label {
  position: absolute;
  width: 20px;
  margin-left: -1.1em;
  text-align: center;
  margin-top: 20px;
  font-size: 0.75em;
}

.slider {
  width: 90%;
  margin: 0 auto 2em auto;
}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul class='decade'>
  <p>1810</p>
  <li>1811</li>
  <li>1813</li>
  <li>1819</li>
</ul>
<ul class='decade'>
  <p>1820</p>
  <li>1822</li>
  <li>1824</li>
  <li>1828</li>
  <li>1829</li>
</ul>
<ul class='decade'>
  <p>1830</p>
  <li>1834</li>
  <li>1835</li>
  <li>1836</li>
  <li>1837</li>
  <li>1838</li>
</ul>
<ul class='decade'>
  <p>1840</p>
  <li>1844</li>
  <li>1849</li>
</ul>

关于javascript - 在不确定的时间轴上实现jQuery滑块，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42113180/

10-11 05:55
Powered by LMLPHP ©2024 的时间轴 0.029099