Jqueryベースのテキスト自動切り取り(ソースコード提供)

プラグイン要件(機能要件)
1つのプラグインは、特定の機能を完了することです.プラグインを作成するときに、プラグインの開発が完了した後にどのような機能を備えて使用すべきかを判断する必要があります.
ある朝、モードで電源を入れ、データベースに接続し、VS開発環境、デバッグプログラムをオンにします.プログラムは走り出したが、ページの一部の内容はページが許容する範囲を超えている.これは容易ではありませんよ、SubStringでしょう.
はい、これは確かに良い方法で、このような問題を解決することができますが、ページが処理されたコンテンツをインタラクティブにする必要がある場合、この方法は少し適応しないのは避けられません.では、Jqueryを使ってそのニーズを満たすプラグインを開発しましょう.
開発上の注意事項
Jqueryを使用してプラグインを開発するプロセスにあまり接続されていない場合は、この記事を参照してください:Jqueryプラグインを開発する(一)(最終効果図を含む)
一歩一歩Jqueryプラグインを開発---文字自動スケーリング
まず、後でプラグインを拡張するために、条件をプログラムに書くべきではないことを考えなければならない.このプラグインは、Length(制限長さ)、Replace(置き換えられた文字)、ShowMore(すべてのボタンを表示)、HideMore(隠しすぎた文字)、
1、Jqueryがプラグインを開発する時、それはプラグインにパラメータを伝達し、デフォルトで定義したパラメータを使用することを提供し、一般的な書き方は以下のように適用する.

 
  
$.fn.MyFunction= function(options) {//options          ； 
  
var defaults = { 
  
arg1: ..., 
  
arg2: "...", 
  
argN: "", 
  
replace: "..." 
  
}; 
  
var options = $.extend(defaults, options); 
  
 
 

では、今日開発したこのプラグインについて、対応するプラグインパラメータは以下の通りです.

 
  
$.fn.HideMore= function(options) { 
  
var defaults = { 
  
length: 10, 
  
showmore: "  ", 
  
hidemore: "  ", 
  
replace: "..." 
  
}; 
  
var options = $.extend(defaults, options); 
  
 
 

2、次の仕事の流れは次の通りです.
i、Divのコンテンツ長を取得する;
ii、プラグインに渡されたlengthの値と比較する.
iii、長さがlengthを超えると切り取って置き換える.
iiii、showmoreとhidemoreに対してイベントを定義する.
プラグインのソース:

 
  
(function($) { 
  
$.fn.HideMore = function(options) { 
  
var defaults = { 
  
length: 10, 
  
showmore: "  ", 
  
hidemore: "  ", 
  
replace: "..." 
  
}; 
  
var options = $.extend(defaults, options); 
  
var objhtml = $(this).html(); 
  
if (objhtml.length > options.length) { 
  
var precontent = objhtml.substring(0, options.length); 
  
var lastcontent = "" + objhtml.substring(options.length, objhtml.length) + ""; 
  
var morelink = "" + options.showmore + ""; 
  
var newcontent = precontent + lastcontent + 
  
options.replace + morelink; 
  
$(this).html(newcontent); 
  
$(".more").css("display", "none"); 
  
$(".morelink").click(function() { 
  
if ($(".morelink").html() == options.showmore) { 
  
$(".more").show(1000); 
  
$(".morelink").html(options.hidemore); 
  
return false; 
  
} 
  
else { 
  
$(".more").hide(900); 
  
$(".morelink").html(options.showmore); 
  
return false; 
  
} 
  
}); 
  
} 
  
return false; 
  
}; 
  
})(jQuery); 
  
 
 

Htmlテストコード:

 
  
$("elements").HideMore( 
  
{ 
  
length:50, 
  
showmore" ", 
  
hidemore" ", 
  
replace:"......" 
  
}); 
  
 
 

さて、読者はここを見てコードCOPYを実行してみましょう.あなたの2番目のプラグインが誕生しました.