Implement jQuery Slider auf unsicheren Timeline

Question

Was ich erreichen möchte, ist die Suche nach Timeline mit verschiedenen Steckplätzen von Daten years-li in einer Sammlung von Epochen decades - ul. Ich habe Daten in diesem Format:

<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> 

Jetzt jedes Mal, wenn ich das respektierte Jahrzehnt bin hervorheben, aber ich mag, dass Handler nicht in entsprechenden suchen. Jahre in dem Jahrzehnt. Wenn beispielsweise jemand 1813 auswählt, wird er ausgewählt und 1810 wird hervorgehoben. Gleichzeitig kann der Nutzer in diesem Jahrzehnt nur 3 Schritte navigieren, da er nur 3 Jahre umfasst. Das gleiche sollte in der Zeit von 1830 mit 5 Schritten funktionieren, da es 5 Jahre hat.

Kann mir bitte jemand helfen?

habe ich versucht, so weit ist: ich nicht in der Lage bin, den Schritt zu berechnen, ist es in Call Jahrzehnt Fällen dynamisch ist.

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

Bitte gehen Sie nicht davon aus, dass ich nur so viel Code geschrieben habe und nichts anderes versucht habe. :)

Answer 1

Hier ist ein Ausschnitt, der ich gekommen bin, oben mit:

$(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>

Und hier ist eine Alternative Slider-Schnipsel:

$(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>

Schluss Schnipsel:

$(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>