A: JQuery UI 플러그인을 사용하여 테이블을 DIV, Overflow-y:hidden으로 교체하여 스크롤을 구현하고 광고를 절대 위치로 만들어 고정된 목적을 달성하는 방법은 다음과 같습니다.
(function($){
$.chromatable = {
기본값: {
너비: "900px",
높이: "300px",
스크롤: "예"
}
}
$.fn.chromatable = function(options ){
var options = $.extend({ }, $.chromatable.defaults, options)
return this.each(function(){
var $this = $(this);
var $uniqueID = $(this).attr(" ID") ("wrapper")
$(this).css('width', options.width).addClass("_scrolling")
$(this).wrap('
');
$(".scrolling_outer").css( {'position':'relative'})
$("#" $uniqueID).css(
{'border':'1px solid # CCCCCC',
'overflow-x':'hidden',
'overflow-y':'auto',
'padding-right':'17px'
}); $("#" $uniqueID).css('height', options.height)
$("#" $uniqueID).css('width', options.width)
$(this) .before($(this).clone().attr ("id", "").addClass("_thead").css(
{'width' : 'auto',
'display' : 'block',
'position':'absolute',
'border':'none',
'border-bottom':'1px solid #CCC',
'top':' 1px'
}));
$ ('._thead').children('tbody').remove()
$(this).each(function( $this ){
if (options.width == "100%" || options.width == "auto") {
$("#" $uniqueID).css({'padding-right':'0px'});
}
if (options.scrolling = = "no") {
$("#" $uniqueID).before('
테이블 확장$("#" $uniqueID).css({'padding-right':'0px'});
$(" .expander").each(
function(int ){
$(this).attr("ID", int);
$( this ).bind ("click",function(){
$("#" $uniqueID).css ({'height':'auto'})
$("#" $uniqueID " ._thead")
$( this).remove();
});
$("#" $uniqueID).ressible({ 핸들: 's' }).css("overflow-y", "숨겨짐");
}
} );
$curr = $this.prev()
$("thead:eq(0)>tr th",this).each ( 함수 (i) {
$("thead :eq(0)>tr th:eq(" i ")", $curr).width( $(this).width());
});
if (options.width == "100%" || "auto"){
$(window).resize(function(){
resizer($this);
});
}
});
}; (0)>tr th", $this).each( function (i) {
$("thead:eq(0)>tr th:eq(" i ")", $curr).width ( $(this).width());
});
})(jQuery)
페이지는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.
