###前提・実現したいこと
jTruncSubstr.jsを使用したところ、「more」を画像にしたいのですが
カスタマイズするにはどこを修正すればいいのかわかりません!
助けてください。
<script type="text/javascript"> $().ready(function() { $('#ID名').jTruncSubstr({ length: 200, // 表示させる文字数 minTrail: 0, // 省略文字の最低文字数 moreText: "もっと読む", // 非表示部分を表示するリンクの文字列 lessText: "閉じる", // 表示した後、再び非表示にするリンクの文字列 ellipsisText: "...", // 続きがあることを表示するための文字列 moreAni: "fast", // 表示時のアニメーション速度 lessAni: "fast" // 非表示時のアニメーション速度 }); }); </script>
(function($){ $.fn.jTruncSubstr = function(options) { var defaults = { length: 300, minTrail: 20, moreText: "more", lessText: "less", ellipsisText: "...", moreAni: 500, lessAni: 500, delimiters: "" }; var options = $.extend(defaults, options); return this.each(function() { obj = $(this); var body = obj.html(); if(body.length > options.length + options.minTrail) { var splitLocation; if(options.delimiters == ""){ splitLocation = options.length; }else{ splitLocation = body.length; $.each(options.delimiters, function(){ var pos = body.indexOf(this, options.length); if(pos > -1) splitLocation = Math.min(splitLocation, pos); }); } if(splitLocation != -1) { // truncate tip var str1 = body.substring(0, splitLocation+1); var str2 = body.substring(splitLocation+1, body.length - 1); obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText + '</span>' + '<span class="truncate_more">' + str2 + '</span>'); obj.find('.truncate_more').css("display", "none"); // insert more link obj.append( '<div class="clearboth">' + '<a href="#" class="truncate_more_link">' + options.moreText + '</a>' + '</div>' ); // set onclick event for more/less link var moreLink = $('.truncate_more_link', obj); var moreContent = $('.truncate_more', obj); var ellipsis = $('.truncate_ellipsis', obj); moreLink.click(function() { if(moreLink.text() == options.moreText) { if(options.moreAni){ moreContent.slideDown(options.moreAni); }else{ moreContent.show(); } moreLink.text(options.lessText); ellipsis.css("display", "none"); } else { if(options.lessAni){ moreContent.slideUp(options.lessAni); }else{ moreContent.hide(); } moreLink.text(options.moreText); ellipsis.css("display", "inline"); } return false; }); } } // end if }); }; })(jQuery);
質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
ありがとうございます。これで大丈夫でしょうか?
編集ありがとうございます。タイトルに「jtruncate.js」と書かれていますが、コードは「jTruncSubstr」( http://semooh.jp/jglycy/jquery-plugins/jtruncsubstr )のようなのですが、どちらでしょうか。
ご指摘ありがとうございます!jTruncSubstrでお願いいたします!
回答1件
あなたの回答
tips
プレビュー