Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Показать только часть содержимого страницы

Автор: black_dragon 21.1.2013, 16:51

Добрый день.

Подскажите как можно реализовать следующее.

Есть страница с большим количеством текста. Для удобства - показываем при выводе только часть, к примеру пару абзацев и ставим ссылку "подробнее" при клике по которой отображается полное содержимое страницы, но без перехода на другую страницу, а как бы показываем скрытую часть текста, которая выводится ниже, после ссылки "Подробнее".

Предполагал вариант, когда для div с контентом ставим высоту к примеру 250 px и запрещаем прокрутку, а при клике по ссылке "подробнее" делаем высоту по содержимому.
При этом есть 2 проблемы. Такая конструкция нужна не на всех страницах, а только там, где пользователь укажет эту ссылку "подробнее". А вторая - изначальная высота страницы со скрытым содержимым устанавливается пользователем - может это будет 3 предложения, может 3 абзаца, т.е. высота разная.

Надеюсь более менее понятно объяснил задумку.

Можно ли такое реализовать, или что-то на подобии.

Спасибо

Автор: Arantir 21.1.2013, 17:39

А что вам мешает делать это только там, где пользователь укажет ссылку?
Опять же, что мешает ставить установленную пользователем высоту при выводе страницы?

Автор: Gold Dragon 21.1.2013, 21:59

Код


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div id="top">Вводная часть</div>
<div id="desc">Часть после нажания на "Подробнее"</div>
<button id="more">Подробнее</button>
<script>
    $(function(){
        $("#desc").hide();

        $("#more").click(function(){
            $("#desc").show(600);
            $("#more").remove();
        });
    });

</script>
</body>
</html>

Автор: black_dragon 22.1.2013, 09:21

Gold Dragon, спасибо за пример, то что было нужно.
Только к содержимому страницы в панели управления добавлю еще поле типа "вводная часть". Если заполнено только оно - кнопку не рисуем, если поле с полным контентом заполнено - после "вводной части" рисуем кнопку.

Спасибо за помощь

Автор: Gold Dragon 22.1.2013, 12:37

Код


    $(function(){
        if($.trim($("#desc").html())== ''){
            $("#more").remove();
            $("#desc").remove();
        }else{
            $("#desc").hide();
            $("#more").click(function(){
                $("#desc").show(600);
                $("#more").remove();
            });
        }
    });

Добавлено через 2 минуты и 7 секунд
Если поле пустое или содержит только пробельные символы, то этот контейнер и кнопка удаляться.. если не пустое, то будет как было выше

Автор: nule 25.1.2013, 15:06

А как реализуют автоматическое выделение вводной части? Когда буквально в середине предложения ставится ... и ссылка "читать далее".

Автор: Arantir 25.1.2013, 15:32

Совсем воображение у людей отвалилось =)
Перед выводом текста просто проверяется его длина, если она больше указанной - обрезается все лишнее и ставятся три точки + ссылка.
Если через JS, то можно просто видимую часть завернуть в один span, а скрытую в другой с display: none, который при потребности можно легко сделать видимым. Три точки и ссылку тоже можно поместить в span, чтобы их можно скрыть при разворачивании текста.

Автор: Gold Dragon 25.1.2013, 19:22

Arantir, рискуешь попасть на большой глюк... а если там тэги??? и очистить нельзя так как очень хочется сохранить форматирование smile

Добавлено @ 19:26
вот когда-то разрабатывал (не без помощи форума конечно) обрезание строки с сохранением форматирования (хотя явно не тот раздел)....

Код


    /**
     * Обрезка текста с сохранением форматирования
     * @param        $html   - текст
     * @param        $length - длина
     * @param string $hellip - текст который добавляется в конце обрезка
     *
     * @return string
     */
    function htmlSubstr($html, $length, $hellip = '')
    {
        $out = '';
        $arr = preg_split('/(<.+?>|&#?\\w+;)/s', $html, -1, PREG_SPLIT_DELIM_CAPTURE);
        $tagStack = array();

        for ($i = 0, $l = 0; $i < count($arr); $i++) {
            if ($i & 1) {
                if (substr($arr[$i], 0, 2) == '</') {
                    array_pop($tagStack);
                } elseif ($arr[$i][0] == '&') {
                    $l++;
                } elseif (substr($arr[$i], -2) != '/>') {
                    array_push($tagStack, $arr[$i]);
                }

                $out .= $arr[$i];
            } else {
                if (($l += strlen($arr[$i])) >= $length) {
                    $out .= substr($arr[$i], 0, $length - $l + strlen($arr[$i]));
                    break;
                } else {
                    $out .= $arr[$i];
                }
            }
        }
        $out .= $hellip;
        while (($tag = array_pop($tagStack)) !== NULL) {
            $out .= '</' . strtok(substr($tag, 1), " \t>") . '>';
        }

        return $out;
    }

Автор: Arantir 25.1.2013, 21:26

Цитата(Gold Dragon @ 25.1.2013, 18:22

)

Arantir, рискуешь попасть на большой глюк... а если там тэги???

А если нет? =)
Далеко не везде возможно присутствие тегов. Например, это какое-то простое описание, где теги не разрешены, но таких описаний на странице много и их надо обрезать до 100 символов, чтобы больше влезло.
Вариантов можно придумать много, но цель оправдывает средства.

Лично я не стал бы тратить лишние ресурсы на одну только мнимую возможность наличия тега в месте обрезки. Да и вообще на такие косметические операции тоже бы не стал, если честно =)
Лучше поставить фиксированную высоту, а в конце строки картинку (абсолютно спозиционированную) с плавным уменьшением прозрачности, ну или на всю нижнюю строчку такую картинку (но уже с вертикальным градиентом). Распространенная практика. И выглядит красиво и не надо кучи лишних вычислений ни на php, ни на js.

Там, где я припоминаю наличие обрезки с вставкой трех точек и ссылки, обычно никаких тегов в тексте не предусматривалось, это были простые описания фильмов, товаров и подобное. Соответственно, там навряд ли использовалось что-то более мудреное, чем простая проверка длины и обрезка.

Никому свое мнение не навязываю, сейчас все всё больше ресурсов начинают тратить как раз визуальную часть интерфейса, просто я привык делать все как можно более эффективным с учетом требуемой универсальности, а не наоборот.