jQuery를 noConflict 모드로 이식하는 데 도움이 필요합니다.

Question

jQuery noConflict 모드에 대해 약간의 내용을 읽었으며 여전히 조금 어려움을 겪고 있습니다. 나는 noConflict 모드에서 제대로 작동하려면 몇 가지 코드를 가지고 있지만, 소송 수행하려면 다음을 얻을 수 없었습니다 :

$.fn.infiniteCarousel = function() { 

    function repeat(str, num) { 
     return new Array(num + 1).join(str); 
    } 

    return this.each(function() { 
     var $wrapper = $('> div', this).css('overflow', 'hidden'), 
      $slider = $wrapper.find('> ul'), 
      $items = $slider.find('> li'), 
      $single = $items.filter(':first'), 

      singleWidth = $single.outerWidth(), 
      visible = Math.ceil($wrapper.innerWidth()/singleWidth), // note: doesn't include padding or border 
      currentPage = 1, 
      pages = Math.ceil($items.length/visible);    


     // 1. Pad so that 'visible' number will always be seen, otherwise create empty items 
     if (($items.length % visible) != 0) { 
      $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible))); 
      $items = $slider.find('> li'); 
     } 

     // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first 
     $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned')); 
     $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned')); 
     $items = $slider.find('> li'); // reselect 

     // 3. Set the left position to the first 'real' item 
     $wrapper.scrollLeft(singleWidth * visible); 

     // 4. paging function 
     function gotoPage(page) { 
      var dir = page < currentPage ? -1 : 1, 
       n = Math.abs(currentPage - page), 
       left = singleWidth * dir * visible * n; 

      $wrapper.filter(':not(:animated)').animate({ 
       scrollLeft : '+=' + left 
      }, 500, function() { 
       if (page == 0) { 
        $wrapper.scrollLeft(singleWidth * visible * pages); 
        page = pages; 
       } else if (page > pages) { 
        $wrapper.scrollLeft(singleWidth * visible); 
        // reset back to start position 
        page = 1; 
       } 

       currentPage = page; 
      });     

      return false; 
     } 

     $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>'); 

     // 5. Bind to the forward and back buttons 
     $('a.back', this).click(function() { 
      return gotoPage(currentPage - 1);     
     }); 

     $('a.forward', this).click(function() { 
      return gotoPage(currentPage + 1); 
     }); 

     // create a public interface to move to a specific page 
     $(this).bind('goto', function (event, page) { 
      gotoPage(page); 
     }); 
    }); 
}; 

$(document).ready(function() { 
    $('.infiniteCarousel').infiniteCarousel(); 
}) 

난 그냥 'jQuery를'과 모든 '$'를 대체 함을? 반환에도 this.each (function() {..., etc?) 나는 그것을 가능하게하기 위해 jQuery 라이브러리의 끝에 noConflict 행을 추가했다. (Magento를 실행하고 있으므로 충돌이있다. 프로토 타입 등) 사전에

감사합니다!

트레

Answer 1

이보다 쉽게 ​​솔루션 즉시 호출 익명 함수에 모든 것을 포장,이 같은 달러 (A $) 인수에 jQuery 오브젝트를 전달할 수 있습니다 :

jQuery.noConflict() 
(function($) { 
    //now I can use $ locally 
})(jQuery) 

Answer 2

와 함께 당신은 그렇게 할 수 있지만 지저분한 될 것입니다. 당신은 jQuery와 셀렉터의 앞에 $를 교체해야

. $으로 시작하는 변수가 있기 때문에 꽤 복잡한 변수가있을 것입니다. 전자 이름, 같은 jQuerywrapper - 나는이 코드를 통해 가서 선택기를 jQuery로 변경하고 모두 $ 변수 이름을 가져 가라.

예를 들어

:

var wrapper = jQuery('> div', this).css('overflow', 'hidden'), 

Answer 3

이

(function($){ 
$.fn.infiniteCarousel = function() { 

    function repeat(str, num) { 
     return new Array(num + 1).join(str); 
    } 

    return this.each(function() { 
     var $wrapper = $('> div', this).css('overflow', 'hidden'), 
      $slider = $wrapper.find('> ul'), 
      $items = $slider.find('> li'), 
      $single = $items.filter(':first'), 

      singleWidth = $single.outerWidth(), 
      visible = Math.ceil($wrapper.innerWidth()/singleWidth), // note: doesn't include padding or border 
      currentPage = 1, 
      pages = Math.ceil($items.length/visible);    


     // 1. Pad so that 'visible' number will always be seen, otherwise create empty items 
     if (($items.length % visible) != 0) { 
      $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible))); 
      $items = $slider.find('> li'); 
     } 

     // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first 
     $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned')); 
     $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned')); 
     $items = $slider.find('> li'); // reselect 

     // 3. Set the left position to the first 'real' item 
     $wrapper.scrollLeft(singleWidth * visible); 

     // 4. paging function 
     function gotoPage(page) { 
      var dir = page < currentPage ? -1 : 1, 
       n = Math.abs(currentPage - page), 
       left = singleWidth * dir * visible * n; 

      $wrapper.filter(':not(:animated)').animate({ 
       scrollLeft : '+=' + left 
      }, 500, function() { 
       if (page == 0) { 
        $wrapper.scrollLeft(singleWidth * visible * pages); 
        page = pages; 
       } else if (page > pages) { 
        $wrapper.scrollLeft(singleWidth * visible); 
        // reset back to start position 
        page = 1; 
       } 

       currentPage = page; 
      });     

      return false; 
     } 

     $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>'); 

     // 5. Bind to the forward and back buttons 
     $('a.back', this).click(function() { 
      return gotoPage(currentPage - 1);     
     }); 

     $('a.forward', this).click(function() { 
      return gotoPage(currentPage + 1); 
     }); 

     // create a public interface to move to a specific page 
     $(this).bind('goto', function (event, page) { 
      gotoPage(page); 
     }); 
    }); 
}; 
})(jQuery); 

$(document).ready(function() { 
    $('.infiniteCarousel').infiniteCarousel(); 
}) 

설명을 시도 :

(function($){ 
// your code here 
$(document).ready(function(){ 

}); 
})(jQuery); 

은 jQuery.noConflict()의 대안입니다.