初心者向けJqueryプラグイン制作：SageCRM_jqueryのクエリ画面の一部行を非表示にする機能-jsチュートリアル-php.cn

初心者向けJqueryプラグイン制作：SageCRM_jqueryのクエリ画面の一部行を非表示にする機能

WBOY

リリース： 2016-05-16 17:57:48

オリジナル

1120 人が閲覧しました

解決策:
1. ユーザーがクリックできるように、タイトルに [—][ ] 記号を追加します。
2. ユーザーの画面の縮小と拡大の動作は Cookie に保存されます。ページがリロードされたり、ユーザーがシステムに再度ログインしたりしても、ユーザーの行動は依然として記憶されています。

利点: 1. Jquery プラグインの形式で行われ、拡張が簡単です。実装が簡単。
2. Cookie に保存された動作は実装が容易で、作業負荷が軽減され、ユーザーに受け入れられます。データベースに保存するとページの読み込みが増加します。
欠点: ページごとに個別の動作を使用することはできません。つまり、すべてのユーザーの縮小と展開はシステム内でグローバルになります。また、別のコンピュータにログインしたり、キャッシュをクリアしたりすると、ユーザーの操作を記憶できなくなります。

まずはjs関数を使って実装します。次に、Jquery プラグインに変更します: コード

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

/*
* TableToggle 0.1
* Copyright (c) 2011 Novus_lee http://www.cnblogs.com/novas
* 日付: 2011-12-23
* 一部の行を非表示にする関数SageCRM クエリ画面
*/
(function($){
$.fn.TableToggle = function(options){
var defaults = {
plussrc : "/upload/201112/20111226224658296 .gif", //--[ ] 画像
minussrc : "/upload/201112/20111226224658809.gif",
line : 2
}
var options = $.extend(defaults, options );
var flip = 0, i = 0;
this.each(function(){
var $thisTable = $(this);
var claName = "btntoggle" i;
// -- テーブルの上に画像ボタンを追加します
var $Title = $thisTable.parent().parent().parent().find("td.PANEREPEAT");
$Title.prepend ("< ;a href='javascript:void(0);' class='" claName "' style='cursor:pointer;padding-right:10px;'>

");
var trlen = $thisTable.find("tr").length;
options.line = (options.line > trlen ? trlen : options.line);
$Title.find("a." claName).click(function () {
$thisTable.find("tr:gt(" options.line ")" ).toggle (flip );
if (flip % 2 == 0)
{
$Title.find("img[src*='smallplus']").attr("src", options.minussrc );
$.cookie(claName, "plus");
else
{
$Title.find("img[src*='smallminus']" ).attr ("src",options.plussrc);
$.cookie(claName, "smallminus")
}
}); "smallminus" || $.cookie(claName) == "" || $.cookie(claName) == null)
{
$("a." claName).click(); }
i ;
});
})(jQuery);

このプラグインは jquery Cookie プラグインも呼び出します。
呼び出されるメソッド:

コードをコピー

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

効果は以下の通りです:

縮小:

展開: