26.05.2016, 12:11
|
|
Интересующийся
|
|
Регистрация: 07.03.2013
Сообщений: 16
|
|
|
Много информации, спасибо.
Буду думать
|
|
26.05.2016, 12:17
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
laimas,
вариант как я понял вас
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</script>
<script>
$(function() {
$("a[data-cls]").each(function(indx, el) {
var cls = "." + $(el).data("cls");
$(el).on({
click: function(event) {
event.preventDefault();
$("div").slideUp().filter(cls).slideDown()
}
})
}).eq(0).click()
});
</script>
</head>
<body>
<a href="" data-cls="А" class="А">А</a>
<a href="" data-cls="С" class="С">С</a>
<a href="" data-cls="Я" class="Я">Я</a>
<div class="А">Арбуз</div>
<div class="А">Алыча</div>
<div class="С">Слива</div>
<div class="Я">Яблоко</div>
</body>
</html>
вариант того что предлагаю я
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</script>
<script>
$(function() {
var obj = [".А",".С",".Я"];
$.each(obj,function(indx, el) {
$("a"+el).on({
click: function(event) {
event.preventDefault();
$("div").slideUp().filter(el).slideDown()
}
})
})
$("a"+obj[0]).click()
});
</script>
</head>
<body>
<a href="" class="А">А</a>
<a href="" class="С">С</a>
<a href="" class="Я">Я</a>
<div class="А">Арбуз</div>
<div class="А">Алыча</div>
<div class="С">Слива</div>
<div class="Я">Яблоко</div>
</body>
</html>
оба варианта в минимальном исполнении
|
|
26.05.2016, 13:02
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от рони
|
|
вариант как я понял вас
|
Нет, я это иначе представляю 
Я исхожу из того, что сервер отдает списки, которые уже отсортированы по алфавиту, иначе смысла нет. Родителю этих списков можно давать ID связанные по литере рубрикатора при формировании этих списков, собственно это не сложно даже и для UTF:
<ul id="list<?=current(unpack('N', mb_convert_encoding($letter, 'UCS-4BE', 'UTF-8')))?>">
<li>...</li>
</ul>
Обработка щелчка по литере рубрикатора, это получение ее текста, и кода литеры по ней, с показом списка с ID равным list + charCode литеры. Или в data-code держать уже готовой ее код, серверу ведь все равно и список литер формировать.
А если объект, то это если клиент списками занимается, да если они еще и разбросаны, да еще по классам их собирать, разве это выгоднее? |
|
26.05.2016, 13:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
laimas,
спасибо, но я вас не понимаю  от слова совсем ... особенно это
|
Сообщение от laimas
|
Обработка щелчка по литере рубрикатора, это получение ее текста, и кода литеры по ней, с показом списка с ID равным list + charCode литеры. Или в data-code держать уже готовой ее код, серверу ведь все равно и список литер формировать.
А если объект, то это если клиент списками занимается, да если они еще и разбросаны, да еще по классам их собирать, разве это выгоднее?
|
|
|
26.05.2016, 13:50
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от рони
|
|
я вас не понимаю
|
Тогда зайдем с огорода.
Пусть изначально на странице есть только список литер рубрикатора, запрос по которым, это асинхронный запрос и возврат клиенту запрошенного. Понятное дело, что сервер вернет список только тех данных, что отвечают нажатой литеры.
Тут ситуация практически та же, с разницей в том, что все уже на клиенте, нужно только показывать скрытое. Зная это, разве выгодно разбросать эти данные на странице так, чтобы потом требовалось их выискивать для показа?
Мне представляется, что и в этом случае выгодно отдавать уже отсортированные по литерам списки, связав их со списком литер по по их коду. То есть на клиенте будет так:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.list ul {
display: none;
}
#choice li {
display: inline;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function() {
$('#choice').on('click', 'li', function() {
$('#list'+$(this).data('code')).show()
})
});
</script>
</head>
<body>
<ul id="choice"><li data-code="1040">А</li><li data-code="1041">Б</li></ul>
<div class="list">
<ul id="list1040">
<li>А</li>
</ul>
<ul id="list1041">
<li>Б</li>
</ul>
</div>
</body>
</html>
|
|
26.05.2016, 13:56
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
laimas,
хорошо но это же
|
Сообщение от рони
|
|
вариант как я понял вас
|
1 в 1
|
|
26.05.2016, 14:31
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
По сути да, но я не хочу "собирать детей", у меня "за всех отвечает родитель". Да и класс "Я" для меня, это нечто неудобоваримое. |
|
27.05.2016, 05:20
|
|
Интересующийся
|
|
Регистрация: 07.03.2013
Сообщений: 16
|
|
Спасибо за помощь. Первый вариант из этого поста мне больше всего понравился.
Я его немного доработал - теперь он разворачивает весь список при первом открытии и разворачивает его же при нажатии пункта "Все". Посмотреть можно здесь. Если есть предложения по улучшению - буду рад.
И да. Список в моём случае, это не ul-li, а просто набор div. Т.е. всё как в примере.
Последний раз редактировалось MAzZYBiG, 27.05.2016 в 05:23.
|
|
27.05.2016, 07:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
MAzZYBiG,
одинаковые id это неправильно, и выбирать все дивы тоже, на странице наверняка есть много других ...ограничте нужные одним классом ...
|
|
27.05.2016, 17:47
|
|
Интересующийся
|
|
Регистрация: 07.03.2013
Сообщений: 16
|
|
Да, согласен.
Так даже лучше |
|
|
|
