jquery - 長い段落を短くするためのjQueryプラグイン

Question

長い段落のウェブサイトを持っていて、最初のプレゼンテーションを短くする方法を探しているので、テキストを拡大/縮小するオプションを提供するプラグインが欲しいです。

http://jtsnake.github.com/jquery-readmore/のように、私はすでに似たようなものを見つけましたが、ロールバック機能は実行しません。

私が使用できる同様のものはありますか？皆さんありがとう。

Answer 1

同じプラグインを使用してこれを行うことができます。ダウンロードしたプラグインのzipファイルからjquery.readmore.jsを開きます。リンケージ関数から次のコード行を削除します。

$(this).hide();

これで、関数は次のようになります。

function linkage(elem) {
      elem.append(opts.more_link);
      elem.find('.' + opts.more_clzz).click( function () {
       elem.find('.' + opts.ellipse_clzz).hide();
        elem.find('.' + opts.hidden_clzz).animate({'opacity' : 'toggle'},1000);
      });
    }

最初にクリックすると、制限された文字が表示され、次に再び短くなります。あなたができるもう一つのことは、もっと読むテキストで短くすることです：

more_link: '<a class="readm-more">Read&nbsp;More/Shorten</a>

PS：必要に応じて、テキストを「続きを読む」から「クリックで短く」に、またはその逆に変更しようとします。

Answer 2

私は実際にこの種のアクション用のプラグインを作成したことがなかったので、それを試してみることにしました。これが私が思いついたものです->

function($){
  $.fn.clipped = function(options){ 
    var settings = $.extend({
      'text' : this.text(),
      'start' : 0,
      'end' : 255,
      'showFrom': 255,
      'readMoreText': 'Read More',
      'readLessText': 'Read Less'     
    }, options);

  return this.each(function(){
    var $this = $(this);
        var origTxt = settings.text;
    var clippedTxt = origTxt.slice(settings.start, settings.end) + "<div class='read-hidden' style='display:none;opacity:0;'>" + $this.text().slice(settings.showFrom) +"</div><span class='read-clipped'>....<a href='#' class='read-click'>"+settings.readMoreText+"</a></span>";
    $this.html(clippedTxt);

    $('body').on('click', 'a.read-click', function(){
      if($('.read-hidden').css('display') == 'none'){
            //true returned, make changes as necessary.
        $('.read-clipped a').text(settings.readLessText).appendTo($(this).parent('p'));

        //display the rest of the text        
        $('.read-hidden').css('display', 'inline');
        $('.read-hidden').animate({
          opacity:1
        }, 500); 
          //element is shown already, replace the text on next click.  
      }else if($('.read-hidden').css('display') == 'inline'){
        $('.read-hidden').animate({
          opacity:0  
        }, 500, function(){
          $('.read-hidden').css('display', 'none');
          $this.html(clippedText);      
        });
       }
     });
   });
  }
})(jQuery);

プラグインの呼び出しはかなり簡単です->

$('#element').clipped({ 
  // clip text at
  'start': 0, 
  //end clipped text at
  'end': 255, 
  //display the rest of the text starting from
  'showFrom': 255, 
  //Read More Text
  'readMoreText' : 'Read More Stuff',
  //Read Less Text 
  'readLessText' : 'Read Less Stuff'
 });