ホームページ > ウェブフロントエンド > jsチュートリアル > テーブルのタイトル列を左右に伸縮可能にする jqueryプラグイン package_jquery

テーブルのタイトル列を左右に伸縮可能にする jqueryプラグイン package_jquery

WBOY
リリース: 2016-05-16 16:30:25
オリジナル
1859 人が閲覧しました

プラグイン名は jquery.tableresize.js で、コードは次のとおりです:

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

/*
mlccactus 著、2014 年 11 月 24 日
これは私がパッケージ化した jquery プラグインで、テーブルの各列を左右に拡張して、幅を小さくしたり大きくしたりできるようにします
使用法:
単一テーブル: $("#table_id").tableresize(); ページ上のすべてのテーブル: $("table").tableresize();
*/
(関数 ($) {
$.fn.tableresize = function () {
var _document = $("body");
$(this).each(function () {
If (!$.tableresize) {
$.tableresize = {};
}
var _table = $(this);
// ID を設定
var id = _table.attr("id") || "tableresize_" (Math.random() * 100000).toFixed(0).toString();
var tr = _table.find("tr").first(), ths = tr.children(), _firstth = ths.first();
//一時変数ストレージオブジェクトを設定します
var cobjs = $.tableresize[id] = {};
cobjs._currentObj = null、cobjs._currentLeft = null;
ths.mousemove(関数 (e) {
var _this = $(this);
var left = _this.offset().left、top = _this.offset().top、width = _this.width()、height = _this.height()、right = 左の幅、bottom = 上の高さ、clientX = e .clientX, clientY = e.clientY;
var leftside = !_firstth.is(_this) && Math.abs(left - clientX) If (cobjs._currentLeft || clientY > 上 && clientY _document.css("cursor", "e-resize");
If (!cobjs._currentLeft) {
if (左側) {
cobjs._currentObj = _this.prev();
} else {
cobjs._currentObj = _this;
} }
}
else {
cobjs._currentObj = null;
}
});
ths.mouseout(関数(e) {
                if (!cobjs._currentLeft) {
                    cobjs._currentObj = null;
                    _document.css("カーソル", "自動");
                }
            });
            _document.mousedown(関数 (e) {
                if (cobjs._currentObj) {
                    cobjs._currentLeft = e.clientX;
                }
                他 {
                    cobjs._currentLeft = null;
                }
            });
            _document.mouseup(関数 (e) {
                if (cobjs._currentLeft) {
                    cobjs._currentObj.width(cobjs._currentObj.width() (e.clientX - cobjs._currentLeft));
                }
                cobjs._currentObj = null;
                cobjs._currentLeft = null;
                _document.css("カーソル", "自動");
            });
        });
    };
})(jQuery);  

页面代码:

复制代码代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

    
    
    
    
    <スクリプトタイプ="text/javascript">
        $(document).ready(function () {
            //左右拉伸を同時にサポートする双张テーブルを使用します
            $("テーブル").tableresize();
        });
    


    表1

    
        
            
        
            
            
            
    
    
    
表格2

    
ID名前年纪地址电话
22名前:44年齢:23住所:47電話:15< /td>
        
28名前:42年齢:68住所:30電話:50< /td>
        
29名前:63年齢:48住所:90電話:76< /td>
        

        
            
        
            
            
    
ID名前年纪地址电话
22名前:44年齢:23住所:47電話:15< /td>
        
28名前:42年齢:68住所:30電話:50< /td>
        



関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート