我想要实现的是在时代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年。
有人可以帮忙吗?
我到目前为止尝试的是: 我无法计算步骤是否在呼叫十年的情况下是动态的。
$('.timelineYearNavList').slider({
min:1,
max:years.length,
step:1,
slide: function( event, ui ) {
//triggering other events
}
});
请不要以为我只编写了这么多代码而没有尝试其他任何东西。 :)
答案 0 :(得分:2)
以下是我提出的一个片段:
$(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
});
});
&#13;
.slider label {
position: absolute;
width: 20px;
margin-left: -1.1em;
text-align: center;
margin-top: 20px;
}
.slider {
width: 80%;
margin: 0 auto 2em auto;
}
&#13;
<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>
&#13;
这是一个替代滑块:
$(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
});
&#13;
.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;
}
&#13;
<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>
&#13;
最终片段:
$(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
});
&#13;
.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;
}
&#13;
<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>
&#13;