Перейти к содержимому



Кнопка "Далее" для продолжения статьи

#1 r0mZet
r0mZet
  • Модератор
  • 1 384 сообщений
    • Репутация: 262
0

Отправлено 07 Январь 2014 - 23:47

Как технически реализовывается такой момент: Имеется статья на странице, но она очень длинная и хочется сделать из нее превью в виде первого абзаца, а последующее разворачивается нажатием кнопки ДАЛЕЕ. ???
P/S: не допуская переход на новую страницу. Сайт на PHP

 

 

  • 0

Оптимизация сайтов дорого. Но это того стоит :)


#2 GVA
GVA
  • Пользователь PRO
  • 999 сообщений
    • Репутация: 205

Отправлено 07 Январь 2014 - 23:58 

<p class="myClass">
	Текст который будет обрезаться при достижении заданного максимального количества символов в нем.
</p>

В <head> подгружаем сначала jQuery, а потом сам плагин:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.truncatable.js"></script>

И инициализируем плагин, указав класс для которого будем его использовать:
$(function {
	$(".myClass").truncatable();
});

Опционально можно указать количество символов при превышении которого, текст будет скрыт. По умолчанию это количество символов равно 100.
$('.myClass').truncatable({ limit: 200, more: '.....', less: true, hideText: '[скрыть]' });

вот сам скрипт jquery.truncatable.js


(function($){$.fn.truncatable=function(options){var defaults={limit:100,more:'...',less:false,hideText:'[read less]'};var options=$.extend(defaults,options);return this.each(function(num){var stringLength=$(this).html().length;if(stringLength>defaults.limit){var splitText=$(this).html().substr(defaults.limit);var splitPoint=splitText.substr(0,1);var whiteSpace=new RegExp(/^\s+$/);for(var newLimit=defaults.limit;newLimit<stringLength;newLimit++){var newSplitText=$(this).html().substr(0,newLimit);var newHiddenText=$(this).html().substr(newLimit);var newSplitPoint=newSplitText.slice(-1);if(whiteSpace.test(newSplitPoint)){var hiddenText='<span class="hiddenText_'+num+'" style="display:none">'+newHiddenText+'</span>';var setNewLimit=(newLimit-1);var trunkLink=$('<a>').attr('class','more_'+num+'');$(this).html($(this).html().substr(0,setNewLimit)).append('<a class="more_'+num+'" href="#">'+defaults.more+'<a/> '+hiddenText);$('a.more_'+num).bind('click',function(){$('span.hiddenText_'+num).show();$('a.more_'+num).hide();if(defaults.less==true){$('span.hiddenText_'+num).append('<a class="hide_'+num+'" href="" title="'+defaults.hideText+'">'+defaults.hideText+'</a>');$('a.hide_'+num).bind('click',function(){$('.hiddenText_'+num).hide();$('.more_'+num).show();$('.hide_'+num).empty();return false})}});newLimit=stringLength}}}})}})(jQuery);

  • 1
#3 Светозар
Светозар
  • Неактивные
  • 63 сообщений
    • Репутация: 3

Отправлено 08 Январь 2014 - 21:55

Как технически реализовывать такой момент: Имеется статья на странице, но она очень длинная и хочется сделать из нее превью в виде первого абзаца, а последующее разворачивается нажатием кнопки ДАЛЕЕ. ???
P/S: не допуская переход на новую страницу. Сайт на PHP


Чисто из любопытства, почему не допускается переход на новую страницу? И как это связанно с тем что сайт на PHP?
Представьте, что у вас 1000 новостей. На каждом будет загружаться этот скрипт, который в совокупности создаст не малую нагрузку. Куда большую чем если вы сделаете полную новость на другой странице!

НУ, а если у вас статья в одной "строке(бд)" то можно разделить скажем тегом [next] сделав метод, проверяющий на наличии данного сочетания символов будет выводить

<a href="url_next">title_next_url</a>


  • 0
#4 r0mZet
r0mZet
    Topic Starter
  • Модератор
  • 1 384 сообщений
    • Репутация: 262

Отправлено 08 Январь 2014 - 22:23

Потому что переход на новую страницу не желателен.
Как это связано с тем что сайт на РНР ? - не умничайте понапрасну, если Вы знаете больше меня то предложите пути решения я был бы Вам очень признателен и Ваш авторитет вырос бы в моих глазах.
  • 0

Оптимизация сайтов дорого. Но это того стоит :)


#5 GVA
GVA
  • Пользователь PRO
  • 999 сообщений
    • Репутация: 205

Отправлено 09 Январь 2014 - 01:16

r0mZet, надеюсь мой вариант вам помог )
Однако недостаток в виде обреза слова ровно по достижении 200 (или сколько вы укажете символов) можно заменить троеточием. ..[..]

Сообщение отредактировал GVA: 09 Январь 2014 - 01:17

  • 0
#6 r0mZet
r0mZet
    Topic Starter
  • Модератор
  • 1 384 сообщений
    • Репутация: 262

Отправлено 09 Январь 2014 - 14:45

r0mZet, надеюсь мой вариант вам помог )
Однако недостаток в виде обреза слова ровно по достижении 200 (или сколько вы укажете символов) можно заменить троеточием. ..[..]

Да, спасибо!
  • 0

Оптимизация сайтов дорого. Но это того стоит :)


#7 fedornabilkin
fedornabilkin
  • Модератор
  • 1 181 сообщений
    • Репутация: 203

Отправлено 10 Январь 2014 - 10:48

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

Простите, нагрузку на что? На браузер каждого пользователя?
Даже, если и 10000 новостей, они ведь не будут запрошены все одновременно :)
  • 1

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.


Обратно в Разное

Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
BLIK BLIK 1-й за Ноябрь
Очков активности: 672 0 тем, 32 сообщения, 14 баллов репутации
ТОП самых активных за этот месяц
  • Фотография BLIK
    #1

    BLIK
    Очков активности: 63 Вне конкурса за определение пользователя месяца

  • Фотография Rodiola
    #2

    Rodiola (rukodelkovo.ru)
    Очков активности: 15 Вне конкурса за определение пользователя месяца

  • Фотография kolver
    #3

    kolver
    Очков активности: 15 1 тема, 7 сообщений, 1 балл репутации

  • Фотография Victim
    #4

    Victim
    Очков активности: 15 0 тем, 5 сообщений, 2 балла репутации

  • Фотография MattCutts
    #5

    MattCutts (dmitrylee.ru)
    Очков активности: 9 Вне конкурса за определение пользователя месяца

  • Фотография HITMAN84
    #6

    HITMAN84
    Очков активности: 7.5 1 тема, 2 сообщения, 1 балл репутации

  • Фотография iiccarus
    #7

    iiccarus
    Очков активности: 6 1 тема, 1 сообщение, 1 балл репутации

  • Фотография Vmir
    #8

    Vmir
    Очков активности: 6 0 тем, 2 сообщения, 2 балла репутации

  • Фотография TimurR
    #9

    TimurR
    Очков активности: 6 1 тема, 1 сообщение, 1 балл репутации

  • Фотография morvad24
    #10

    morvad24
    Очков активности: 6 1 тема, 1 сообщение, 1 балл репутации

  • Показать весь ТОП 10
Предложения пользователей
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 29.11.2019
  • Яндекс выдача: 04.12.2019
Последние темы

Топ 5 участников по репутации

  1. Fozzy – официальный хостинг форума Masterwebs.ru
  2. Политика Конфиденциальности и Пользовательское Соглашение
Оформление форума – IPBSkins.ru