質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2005閲覧

jTruncSubstr.jsを使用し、「more」を画像にしたい

tomodachi00

総合スコア11

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/01/16 02:20

編集2017/01/16 03:12

###前提・実現したいこと
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);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/01/16 02:31

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
tomodachi00

2017/01/16 02:41

ありがとうございます。これで大丈夫でしょうか?
tomodachi00

2017/01/16 03:07

ご指摘ありがとうございます!jTruncSubstrでお願いいたします!
guest

回答1

0

ベストアンサー

JavaScript

1(function($){ 2 $.fn.jTruncSubstr = function(options) { 3 var defaults = { 4 length: 300, 5 minTrail: 20, 6 moreText: "more", 7 moreImg: "https://placehold.jp/24/cc9999/993333/150x50.png", 8 lessText: "less", 9 lessImg: "https://placehold.jp/24/99cc99/339933/150x50.png", 10 ellipsisText: "...", 11 moreAni: 500, 12 lessAni: 500, 13 delimiters: "" 14 }; 15 var options = $.extend(defaults, options); 16 return this.each(function() { 17 obj = $(this); 18 var body = obj.html(); 19 if(body.length > options.length + options.minTrail) { 20 var splitLocation; 21 if(options.delimiters == ""){ 22 splitLocation = options.length; 23 }else{ 24 splitLocation = body.length; 25 $.each(options.delimiters, function(){ 26 var pos = body.indexOf(this, options.length); 27 if(pos > -1) 28 splitLocation = Math.min(splitLocation, pos); 29 }); 30 } 31 if(splitLocation != -1) { 32 // truncate tip 33 var str1 = body.substring(0, splitLocation+1); 34 var str2 = body.substring(splitLocation+1, body.length - 1); 35 obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText + 36 '</span>' + '<span class="truncate_more">' + str2 + '</span>'); 37 obj.find('.truncate_more').css("display", "none"); 38 // insert more link 39 obj.append( 40 '<div class="clearboth">' + 41 //'<a href="#" class="truncate_more_link">' + options.moreText + '</a>' + 42 '<a href="#" class="truncate_more_link"><img src="' + options.moreImg + '"></a>' + 43 '</div>' 44 ); 45 // set onclick event for more/less link 46 var moreLink = $('.truncate_more_link', obj); 47 var moreContent = $('.truncate_more', obj); 48 var ellipsis = $('.truncate_ellipsis', obj); 49 moreLink.click(function() { 50 //if(moreLink.text() == options.moreText) { 51 if(ellipsis.css("display") !== "none") { 52 if(options.moreAni){ 53 moreContent.slideDown(options.moreAni); 54 }else{ 55 moreContent.show(); 56 } 57 //moreLink.html(options.lessText); 58 moreLink.html('<img src="' + options.lessImg + '">'); 59 ellipsis.css("display", "none"); 60 } else { 61 if(options.lessAni){ 62 moreContent.slideUp(options.lessAni); 63 }else{ 64 moreContent.hide(); 65 } 66 //moreLink.text(options.moreText); 67 moreLink.html('<img src="' + options.moreImg + '">'); 68 ellipsis.css("display", "inline"); 69 } 70 return false; 71 }); 72 } 73 } // end if 74 75 }); 76 }; 77})(jQuery);

で、下記のように使う。

JavaScript

1$(function() { 2 $('#a').jTruncSubstr({ 3 length: 50, // 表示させる文字数 4 minTrail: 0, // 省略文字の最低文字数 5 //moreText: "もっと読む", // 非表示部分を表示するリンクの文字列 6 moreImg: "https://placehold.jp/24/cc9999/993333/150x50.png", 7 //lessText: "閉じる", // 表示した後、再び非表示にするリンクの文字列 8 lessImg: "https://placehold.jp/24/99cc99/339933/150x50.png", 9 ellipsisText: "...", // 続きがあることを表示するための文字列 10 moreAni: "fast", // 表示時のアニメーション速度 11 lessAni: "fast" // 非表示時のアニメーション速度 12 }); 13}); 14```**動くサンプル:**[https://jsfiddle.net/uv6x8796/](https://jsfiddle.net/uv6x8796/)

投稿2017/01/19 16:07

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomodachi00

2017/01/20 01:41

すばらしいです!カスタマイズされて感動です! これからはこれを使いまわしたいと思います!大変助かりました! 本当に感謝します!ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問