Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Помогите пожайлуста (https://javascript.ru/forum/dom-window/39136-pomogite-pozhajjlusta.html)

antonio22 17.06.2013 16:54

Помогите пожайлуста
 
По умолчанию выводиться первые 70 символов. Если описание длиннее, в конце добавлять троеточие и ссылку "ещё" (пунктирное подчеркивание). При клике показывать полное описание (без перезагрузки страницы) со ссылкой в конце "скрыть" - при клике описания опять схлопывается до 60 символов.
Я видел готовый скрипт спрятоть/раскрыть текст, но там нету сиволов.
Помогите пожайлуста!

animhotep 17.06.2013 17:17

http://api.jquery.com/fadeToggle/

рони 17.06.2013 19:42

antonio22,
скрипт, обрезающий строки :write: можно по строкам или символам
скрипт ниже работает с тегами любой вложености типа <p><span><b><b><b><b><b>ТУТ ТЕКСТ</b></b></b></b></b></span></p> достаточно указать любого из родителей
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
a.more {
   cursor: pointer;
   color: #FF0033;
}

div.more {
display: none;
position: absolute;
background-color: #FFFFCC;
border: #3366FF dashed 2px;
padding: 5px;
margin:  6px;
margin-right: 10px;

}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
    $.fn.correctLines = function (options) {
        var o = jQuery.extend({
            maxLine: 5, //Видимое кол-во строк
            afterLength: ' ... ', //Текст после видимого содержания
            fullText: false, //Добавить ссылку для отображения скрытого текста
            moreText: '\u00BB\u00BB', //Текст ссылки до показа скрытого содержания
            lessText: '\u00AB\u00AB', //Текст ссылки после показа скрытого содержания
            classNew: 'more', // Класс для ссылки и скрытого текста
            symbol: 0 //Количество символов  -- отменяет maxLine
                   }, options);
        return this.each(function (index, self) {
            $(self).find('*:last').length && (self=$(self).find('*:last'));
            var txt = $(self).html().split(o.symbol ?'':' ');
             $(self).html(txt[0]).css({
                "height": "auto"
            });
            var lastHeight = $(self).outerHeight();
            var k = 1,i;
            for (i = 1; i < txt.length; i++) {
                $(self).html(txt.slice(0, i).join(o.symbol ?'':' ') + o.afterLength + o.moreText);
                if (lastHeight < $(self).outerHeight()||(o.symbol && o.symbol-2 < i)) {
                    lastHeight = $(self).outerHeight();
                    k++;
                    if (k > o.maxLine) {
                        i--;
                        $(self).html(txt.slice(0, i).join(o.symbol ?'':' ') + o.afterLength);
                        if (o.fullText) {
                            $("<a/>", {
                                "text": o.moreText,
                                "class": o.classNew
                            })
                                .click(function (event) {
                                var text = $(this).text() == o.moreText ? o.lessText : o.moreText;
                                $(this).text(text).nextAll("."+o.classNew).slideToggle()
                                event.preventDefault()
                            }).appendTo($(self));
                            $("<br/>").appendTo($(self))
                            $("<div/>", {
                                "text": txt.slice(i).join(o.symbol ?'':' '),
                                "class": o.classNew
                            })
                                .appendTo($(self))
                        };
                        break
                    }
                };
            };
            if (k <= o.maxLine) $(self).html(txt.join(o.symbol ?'':' '));
        });
    }
})(jQuery);
</script>
  <title></title>
</head>
<body >


	<div class="bottom">
		<div class="text">
			<p><span><b><b><b><b><b>По умолчанию выводиться первые 70 символов. Если описание длиннее, в конце добавлять троеточие и ссылку "ещё" (пунктирное подчеркивание). При клике показывать полное описание (без перезагрузки страницы) со ссылкой в конце "скрыть" - при клике описания опять схлопывается до 60 символов.
Я видел готовый скрипт спрятоть/раскрыть текст, но там нету сиволов.
Помогите пожайлуста!</b></b></b></b></b></span></p>
		</div>
	</div><div class="bottom">
		<div class="text2">
			<p><span><b><b><b><b><b>По умолчанию выводиться первые 70 символов. Если описание длиннее, в конце добавлять троеточие и ссылку "ещё" (пунктирное подчеркивание). При клике показывать полное описание (без перезагрузки страницы) со ссылкой в конце "скрыть" - при клике описания опять схлопывается до 60 символов.
Я видел готовый скрипт спрятоть/раскрыть текст, но там нету сиволов.
Помогите пожайлуста!</b></b></b></b></b></span></p>
		</div>
	</div>
<script language="JavaScript" type="text/javascript">
$(".text p").correctLines({fullText: true,symbol: 70,moreText: " ещё", lessText : "скрыть" })
$(".text2 span").correctLines({fullText: true,maxLine: 2  })
</script>
</body>
</html>

Kvark 17.06.2013 19:50

круто, чтоб совсем был ничтяк наверно нужно еще сдвигать вторую строчку чтоб ее не закрывал раскрытый текст?

рони 17.06.2013 20:04

Цитата:

Сообщение от Kvark
сдвигать вторую строчку чтоб ее не закрывал раскрытый текст?

строка 13 position: relative; -- на вкус на цвет .

antonio22 18.06.2013 01:22

рони,
Спасибо уважаемый.
Но пожайлуста еще кое что
http://market.yandex.ru/compare.xml?...333579,6273742
прокрутите вниз первый товар.
Там есть кокраз раскрыть/закрыть текст
мне вот это нужно
Помогите пожайлуста очень прошу!

рони 18.06.2013 06:12

antonio22,
помочь или сделать для вас?

antonio22 18.06.2013 07:01

помочь)

рони 18.06.2013 13:47

antonio22,если вы самостоятельно разделите строку, это будет поводом вам помогать, хотите быстрее - вам в раздел работа.

var a = "1234567890",
    b = "123 4568 9",
    c = "1234 56",
    n = 7;
    function foo(str, n)
    {
       //return .....
    }
    alert(foo(a));  //return 1234567,890
    alert(foo(b));  //return 123 ,4568 9
    alert(foo(c));  //return 1234 56,


Часовой пояс GMT +3, время: 14:42.