크기 조정 가능 탭 영역

Question

Jquery UI 크기 조정 가능 구성 요소를 사용할 수 있도록 페이지의 내 탭에 크기 조정 가능 선택기를 원했습니다. 하지만 선택한 탭의 수를 찾는 등의 문제에 직면하고 있습니다.

참고 : div는 양쪽 끝에서 크기를 조정할 수 있습니다. http://jsfiddle.net/svXTa/10/

기능의 종류 나 제공 할 수있는 jQuery 플러그인이 있나요 :

여기 내 바이올린입니까?

Answer 1

var enw = parseInt(Math.abs(newWidth/gridSize)); 

편집 :

나는 다시 새로운 업데이트와 함께 해요. 이 번호를 확인하십시오. jsfiddle

var tabs = []; 

$(document).ready(function(){ 

    $('.dateTab ul li').each(function(){ 
     var tabNo = parseInt($(this).html(),10); 
     tabs.push({'no':tabNo, 'right':tabNo * ($(this).width() + 2)}); 
    }); 

    $('#dDragHandler').resizable({ 
     handles: 'e,w' , 
     grid: [32,32], 
     distance: 28, 
     maxWidth: 940, 
     minWidth: 0,  
     resize: function(event, ui) { 
        }, 
     stop : function(event, ui) { 

     var pos = $('.dateDragHandler').offset(); 
     var width = $('.dateDragHandler').width()+1; 
     var right = pos.right + width; 

      var html = "Number of tabs selected: " + parseInt(width/32, 10); 


     for(var i = 0; i < tabs.length; i++) { 
      if(tabs[i].right == pos.left) { 
       html += "<br />First tab selected is: " + tabs[i + 1].no; 
      } 
      if(tabs[i].right == right) { 
       html += "<br />Latest tab selected is: " + tabs[i].no; 
      } 
     } 
     $('.dateInfoTab').html(html); 

    } 
    }); 
});