Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Показать полный текст (подробнее/свернуть), нужно чтобы работало как bb код 
:(
    Опции темы
JEEN
Дата 14.1.2009, 22:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 88
Регистрация: 8.3.2008

Репутация: нет
Всего: 1
Хочу сделать как бб код скрытый текст.. например как это выглядит в админке

ВИД В АДМИНКЕ
Текст текст текст короткий текст и так далеее еще текст [ SPOILER ]остальной текст продолжение рас рас рас[ /SPOILER ]

ВИД СВЕРНУТЫЙ
Текст текст текст короткий текст и так далеее еще текст (подробнее...)

ВИД РАЗВЕРНУТЫЙ
Текст текст текст короткий текст и так далеее еще текст остальной текст продолжение рас рас рас (спрятать)

ну вот примерно как то так, с бб кодами проблем нет, это могу реализовать, если бы не... чтобы спрятать какой то элемент у него должен быть id... но ведь через бб коды не удобно ид назначать.... да и не правильно это будет (имхо).

вообще из всех вариантов ПОКАЗАТЬ/СКРЫТЬ мне больше всего понравился http://forum.vingrad.ru/forum/topic-89227/unread-1.html
Код

<style>span{font-style:italic;color:blue;cursor:hand;cursor:pointer;}</style>
<script>dID=function(I){return document.getElementById(I);};
showA=function(s1,s2){dID(s1).style.display='none';dID(s2).style.display='block';}
</script>

<div id=lay1st class=articl>Начало статьи, ля-ля-ля, и так далее,
    <span onclick=showA('lay1st','lay2st')>...подробнее</span>.</div>
<div id=lay2st class=articl style=display:none>Начало статьи, ля-ля-ля, и так далее,
    и далее, и далее, до конца статьи весь текст вместе с началом. (В конце статьи можно:
    <span onclick=showA('lay2st','lay1st')>(Свернуть)</span> )</div>


но через бб коды его никак по моему не реализовать..... и тут приходится несколлько раз писать одно и тоже начало..

какие мысли есть? или может где то такое уже используется или еще что... 

Это сообщение отредактировал(а) JEEN - 14.1.2009, 22:09
PM MAIL   Вверх
Aliance
Дата 15.1.2009, 10:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137
Как раз на прошлой недели переписывал написанный мною года 2-3 назад подобный скрипт. Теперь уже переписал с использованием jQuery. Пример работы можешь посмотреть на моем сайте (там в новостях некоторых есть ссылка "читать подробнее")

Как реализовать.

Сперва подключаем библиотеку jQuery и выполняем необходимые действия, если DOM готов к ним:
Код

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$( function()
    {
        var LIMIT = 20;
        $( 'div.expand_news_content' ).each( function( i, elem )
            {
                if ( $( this ).html().length > LIMIT  )
                {
                    var short_news = $( '<div class="expand_news_content">' );
                    short_news.html( $( this ).text().substring( 0, LIMIT ) + "...\n<br />\n" );
                    var read_more = $( '<div>' );
                    read_more.attr( 'class', 'read_more' );
                    read_more.text( 'Читать полностью' );
                    read_more.bind( 'click', function()
                        {
                            short_news.toggle( 'slow' );
                            $( elem ).toggle( 'slow' );
                        }
                    );
                    $( this ).hide();
                    short_news.appendTo( $( this ).parent() );
                    $( short_news ).prepend( read_more );
                }
                else
                {
                    return true;
                }
            }
        );
    }
);
</script>


Для работы этого кода нам не понадобятся Id у новостей, это и есть пример гибкости jQuery. Ну а о том что код короткий, кроссбраузерный и быстрый говорить и вовсе не придется.
Далее, твой bb-код должен заменяться на такую конструкцию:

Код

<div class="expand_news_content">{$content}</div>


Вот полностью рабочий код страницы:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
div.read_more {
    float: right;
    text-decoration: none;
    border-bottom: 1px dotted #847441;
    color: blue;
    color: #847441;
    font-size: 11px;
    font-family: Verdana, Tahoma, Helvetica, sans-serif;
    cursor: pointer;
}
div.read_more:hover {
    color: #982513;
    border-bottom: 1px dotted #982513;
}
div.expand_news_content {
    border: 1px solid black;
    margin: 10px 5px;
    padding: 5px;
}
</style>
<script type="text/javascript" src="http://localhost/becost/public/js/jquery-1.2.6.js"></script>
<script type="text/javascript">
$( function()
    {
        var LIMIT = 20;
        $( 'div.expand_news_content' ).each( function( i, elem )
            {
                if ( $( this ).html().length > LIMIT  )
                {
                    var short_news = $( '<div class="expand_news_content">' );
                    short_news.html( $( this ).text().substring( 0, LIMIT ) + "...\n<br />\n" );
                    var read_more = $( '<div>' );
                    read_more.attr( 'class', 'read_more' );
                    read_more.text( 'Читать полностью' );
                    read_more.bind( 'click', function()
                        {
                            short_news.toggle( 'slow' );
                            $( elem ).toggle( 'slow' );
                        }
                    );
                    $( this ).hide();
                    short_news.appendTo( $( this ).parent() );
                    $( short_news ).prepend( read_more );
                }
                else
                {
                    return true;
                }
            }
        );
    }
);
</script>
</head>
<body>

<div class="expand_news_content">
Здесь идет текст
</div>

<div class="expand_news_content">
А еще здесь идет текст
</div>

</body>
</html>


Это сообщение отредактировал(а) Aliance - 15.1.2009, 10:12


--------------------
• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript
PM MAIL WWW ICQ Skype   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0421 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.