Mam element listy zawierający liczbę 20-30 zdarzeń. Chcę tylko pokazać 5 z nich i mam link "Więcej", który mogę kliknąć, aby obejrzeć następną piątkę. Nie ma znaczenia, czy dołączono pięć kolejnych zdarzeń.Użycie jQuery do ograniczenia liczby elementów listy
Nie można znaleźć skryptu jQuery, który faktycznie to robi, czy jestem po prostu ślepy? Nie chcę używać wtyczek karuzelowych ani niczego w tym stylu.
Cóż, fortunat Ely dla nas programiści, którzy piszą kod dla żywności i sławy, nie każdy sobie wyobrazić kawałek funkcjonalności został jeszcze napisany jako plugin :)
Ale to jest całkiem proste:
var from = 0, step = 5;
function showNext(list) {
list
.find('li').hide().end()
.find('li:lt(' + (from + step) + '):not(li:lt(' + from + '))')
.show();
from += step;
}
function showPrevious(list) {
from -= step;
list
.find('li').hide().end()
.find('li:lt(' + from + '):not(li:lt(' + (from - step) + '))')
.show();
}
// show initial set
showNext($('ul'));
// clicking on the 'more' link:
$('#more').click(function(e) {
e.preventDefault();
showNext($('ul'));
});
Oczywiście to jest lepsze wyodrębnione do funkcji podobnej do pluginów, ale zostawię to jako ćwiczenie dla czytelnika;)
To działa, ale na pewno trzeba będzie dostosować go co jakiś :)
HTML:
<div style="width:200px;border:3px groove blue;">
<ul id="list">
<li>Thai</li>
<li>Turkish</li>
<li>Portuguese</li>
<li>American English</li>
<li>Arabic</li>
<li>Canadian French</li>
<li>Chinese Simplified</li>
<li>Chinese Traditional</li>
<li>Czech</li>
<li>Danish</li>
<li>Dutch</li>
<li>English</li>
<li>Finnish</li>
<li>French</li>
<li>German</li>
<li>Greek</li>
<li>Hebrew</li>
<li>Hungarian</li>
<li>Italian</li>
<li>Japanese</li>
<li>Norweigan</li>
<li>Polish</li>
<li>Russian</li>
<li>Spanish</li>
</ul>
<a href="#" id="lnkMore">More</a>
</div>
javascript:
<script type="text/javascript">
var len = 0;
var curStart = 0;
var count = 5;
var items=new Array();
function BackupList() {
var lst = $("ul#list");
len= $("ul#list li").length;
if (len <= count)
return;
$("ul#list li").each(function() {
items.push($(this));
$(this).remove();
});
var html="";
for (curStart; curStart < count && curStart < len; curStart++) {
html += "<li>" + $(items[curStart]).html() + "</li>";
}
$(html).appendTo($(lst));
}
function ShowMore() {
if (curStart >= len) {
curStart = 0;
}
$("ul#list li").each(function() {
$(this).remove();
});
var l = curStart;
var html = "";
for (curStart; curStart < (l + count) && curStart < len; curStart++) {
html += "<li>" + items[curStart].html() + "</li>";
}
$(html).appendTo($("ul#list"));
}
</script>
drutu jquery dla zdarzenia:
<script type="text/javascript">
$(document).ready(function() {
BackupList();
$("a#lnkMore").click(function() { ShowMore(); });
});
</script>
Chcesz rozpocząć z każdym elementem na liście ukrytym (CSS: display: none). Następnie dodaj link do swojego elementu listy.
$(document).ready(function()
{
$("a#myMoreLink").click(function()
{
var items = $("ul#myList > li:hidden");
if(items.length > 0)
items.slice(0, 5).show();
else
$(this).html("No more");
return false;
});
$("a#myMoreLink").click();
});
z HTML:
<ul id="myList">
<li style="display: none"></li>
<li style="display: none"></li>
</ul>
<a href="http://" id="myMoreLink">More</a>
coś takiego. $ ("a # myMoreLink"). click(); jest wywoływana, aby pokazać początkowe 5 elementów po załadowaniu strony.
Kod błędu: zawsze będzie przełączał się między pierwszymi 5 a 5 elementami. Elementy od 10 do 15 nigdy nie będą wyświetlane. –
Nie przetestowałem kodu, to jest pseudo-kod. OP powiedział, że nie ma znaczenia, czy zostały one dołączone (łatwo zmienne). To działa. Właśnie to przetestowałem. Jest tylko literówka mylist -> myList. Zarzuciłeś mi na to i uzupełniłeś błąd o 10-15 elementach? To nie jest konkurencja, jeez. Oto pełny kod: http://pastebin.com/m56bb8358 –
<html>
<head><title>Test</title></head>
<body>
<ul class="more">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
$("ul.more").each(function() {
$("li:gt(4)", this).hide(); /* :gt() is zero-indexed */
$("li:nth-child(5)", this).after("<li class='more'><a href='#'>More...</a></li>"); /* :nth-child() is one-indexed */
});
$("li.more a").live("click", function() {
var li = $(this).parents("li:first");
li.parent().children().show();
li.remove();
return false;
});
});
</script>
</script
</body>
</html>
Zasadniczo co to robi:
Edytuj: Naprawiono kilka małych błędów. Powyższe jest teraz w pełni działającym przykładem (wystarczy się upewnić, że link do jquery jest poprawny).
Napisałem wtyczkę hideMaxListItems, która może być tym, czego szukałeś. Możesz ustawić maksymalną liczbę elementów listy, szybkość animacji dla animacji slajdów i przycisk rozwijania/zwijania HTML. Animacja slajdów jest wykonywana sekwencyjnie na element listy, aby zapewnić płynną animację.
http://www.joshuawinn.com/maximum-list-items-jquery-hide-after-x-number-bullets/
to wygląda ładnie, ale jak początkowo ukryć każdy element listy z wyjątkiem pierwszej piątce? –
Początkowe wywołanie 'showNext (yourList)' ukryje wszystko oprócz pierwszych pięciu elementów. Chyba chcesz wywołać to na '$ (document) .ready()'. –
To nie działało dla mnie, ale tylko ja zapomniałem zawinąć wszystkie litery w ul;) Dzięki! –