Jquery に基づく自動テキスト インターセプト (ソース コードが提供されます)_jquery

プラグインの要件 (機能要件)
プラグインは特定の機能を完成させるものです。プラグインを作成する際には、開発後にそのプラグインがどのような機能を備えている必要があるかを決定する必要があります。
ある朝、私はブート、データベースへの接続、VS 開発環境のオープン、そしてパターンに従ってプログラムのデバッグを完了しました。プログラムは開始されましたが、ページ上の一部のコンテンツがページの許容範囲を超えていました。これは簡単ではありません、SubString、
はい、これは確かにこの種の問題を解決する良い方法ですが、ページが処理されたコンテンツと対話する必要がある場合、この方法は必然的に少し不快になります。この要件を満たすプラグインを開発するには、Jquery を使用します。
開発手順
Jquery を使用してプラグインを開発するプロセスに詳しくない場合は、次の記事を参照してください: Jquery プラグインの開発 (1) ) (最終レンダリングを含む)
JQuery プラグインを段階的に開発 - 自動テキスト スケーリング
まず第一に、将来プラグインを拡張するには、条件が難しくないことを考慮する必要がありますプログラム内でコーディングされている場合、プラグインには次のパラメータが必要です: Length (制限)、Replace (置換されたテキスト)、ShowMore (すべてのボタンを表示)、H​​ideMore (多すぎるテキストを非表示)。 Jquery を使用してプラグインを開発する場合、プラグインにパラメータを渡してデフォルトの定義を使用する機能が提供されます。適切なパラメータは通常、次のように記述されます。

コードをコピー コードは次のとおりです。

$.fn .MyFunction= function(options) {//options は渡すパラメータ配列です。
var のデフォルト。 = {
arg1: ...,
arg2: "...",
argN: "",
replace: "..."
}; = $.extend(defaults, options);


今日開発したプラグインの対応するプラグイン パラメータは次のとおりです:

コードをコピーします コードは次のとおりです:

$.fn.HideMore = function(options) {

var defaults = {
length: 10,
showmore: "more",
hidemore: "hide",
replace: "..."
}; var options = $.extend(defaults,


2. 次の作業の一般的なプロセスは次のとおりです:
i. Div に渡された長さの値と比較します。プラグイン;

iii. 長さが長さを超えた場合は、それをインターセプトして置き換えます。
プラグインのソース コード:




コードをコピー

コードは次のとおりです: (function($) { $.fn. HideMore = function(options) ) { var デフォルト = {

長さ: 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 = "" オプション。 >var newcontent = precontent lastcontent
options.replace morelink;
$(".more").css("display", "none"); 🎜>$(".morelink").click(function() {
if ($(".morelink").html() == options.showmore) {
$( ".more"). show(1000);
$(".more").html(options.hidemore);
return false;
}
else {
$(" .more") (900);
$(".morelink").html(options.showmore);
return false; >};
})(jQuery);


コードをコピーします


コードは次のとおりです:


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

読者は、これを見たときにコードをコピーして実行したいと思うかもしれません。 2 番目のプラグインが誕生しました。