Jadikan lajur tajuk jadual boleh diregangkan kiri dan kanan jquery plug-in package_jquery

Nama pemalam ialah: jquery.tableresize.js, dan kodnya adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

/*
Ditulis oleh mlcactus, 2014-11-24
Ini ialah pemalam jquery yang saya bungkus, yang membolehkan setiap lajur jadual meregang ke kiri dan kanan, dengan itu menjadikan lebar lebih kecil atau lebih besar
Penggunaan:
Jadual tunggal: $("#table_id").tableresize(); Semua jadual pada halaman: $("table").tableresize();
*/
(fungsi ($) {
$.fn.tableresize = fungsi () {
        var _document = $("body");
          $(ini).setiap(fungsi () {
Jika (!$.tableresize) {
                        $.saiz jadual = {};
            }
              var _table = $(this);
                      // Tetapkan 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();
                           // Tetapkan objek storan berubah sementara
            var cobjs = $.tableresize[id] = {};
cobjs._currentObj = null, cobjs._currentLeft = null;
               ths.mousemove(fungsi (e) {
                var _ini = $(ini);
var left = _this.offset().kiri, atas = _this.offset().atas, lebar = _this.width(), tinggi = _this.height(), kanan = kiri lebar, bawah = atas tinggi, clientX = e .clientX, clientY = e.clientY;
              var leftside = !_firstth.is(_this) && Math.abs(kiri - clientX) <= 5, right side = Math.abs(kanan - clientX) <= 5;
Jika (cobjs._currentLeft || clientY > atas && clientY < bawah && (sebelah kiri || sebelah kanan)) {
                    _document.css("kursor", "e-saiz");
Jika (!cobjs._currentLeft) {
                          jika (sebelah kiri) {
cobjs._currentObj = _this.prev();
                                                     }                          lain {
cobjs._currentObj = _ini;
                                                     }                    }
                }
                    lain {
cobjs._currentObj = null;
                }
            });
               ths.mouseout(fungsi (e) {
                jika (!cobjs._currentLeft) {
                    cobjs._currentObj = null;
                    _document.css("kursor", "auto");
                }
            });
            _document.mousedown(fungsi (e) {
                jika (cobjs._currentObj) {
                    cobjs._currentLeft = e.clientX;
                }
                lain {
                    cobjs._currentLeft = null;
                }
            });
            _document.mouseup(fungsi (e) {
                jika (cobjs._currentLeft) {
                    cobjs._currentObj.width(cobjs._currentObj.width() (e.clientX - cobjs._currentLeft));
                }
                cobjs._currentObj = null;
                cobjs._currentLeft = null;
                _document.css("kursor", "auto");
            });
        });
    };
})(jQuery);  

页面代码为：

复制代码 代码如下:

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

    
    
    
    
    

• Analisis mendalam bagi komponen kumpulan senarai Bootstrap
• Penjelasan terperinci tentang fungsi JavaScript kari
• Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
• Angularjs menyepadukan UI WeChat (weui)
• Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional