Слайдер Magento + jquery $ не определен

Question

Я интегрирую слайдер содержимого в тему magento, но у меня возникли проблемы с js. Я получаю сообщение об ошибке «$ не определено», а затем на веб-сайте я нашел решение о том, что мне следует добавить эту строку «jQuery.noConflict ();»; в мой файл jquery.

Затем в home.phtml: -

<script type="text/javascript">
var $s = jQuery.noConflict();
    $s(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
</script>

В моем page.xml вот как я включаю js

<action method="addJs"><script>jquery/jquery.js</script></action>
<action method="addJs"><script>jquery/jquery-ui.min.js</script></action>

<action method="addJs"><script>prototype/prototype.js</script></action> 

После того, как я сделал вышеупомянутые изменения, я получаю ошибку "jQuery не определен"

Ценю любые советы. Заранее спасибо!

отредактировано: Эта проблема решается путем вызова js со страницы CMS-> content: -

<script type="text/javascript">// <![CDATA[
   var $j = jQuery.noConflict();  jQuery(document).ready(function($) { jQuery("#featured  ul").tabs({fx:{opacity:"toggle"}}).tabs("rotate", 5000, true); }); //  &gt;
// ]]></script>

На странице CMS -> Design укажите необходимые js-файлы: -

<reference name="head">
  <action method="addItem"><type>skin_css</type><name>css/slider.css</name></action>
  <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/jquery-ui.min.js</name></action>
</reference>

Однако этот метод полезен, только если только определенная страница использует js, а не каждую страницу. :)

Answer 1

На самом деле, есть лучшая альтернатива тому, что предлагает Мэтью.

Используйте закрытие, чтобы ограничить область $, в вашем примере вам потребуется изменить следующий код:

$(document).ready(function(){
    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});

К чему-то такому:

jQuery.noConflict();
(function($) {
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
})(jQuery);

Кроме того, вам нужно поместить эти вызовы addJs в ссылку 'head', чтобы поместить их в нужное место в источнике HTML. Прямо сейчас они, вероятно, вместо этого находятся в корневом блоке.

Answer 2

Вставьте следующий код в конец / template / page / html / head.phtml

<script type="text/javascript">
    jQuery.noConflict();
</script>

Используйте jQuery вместо $ в ваших файлах скриптов. Ваш код выглядит как

<script type="text/javascript">    
 jQuery(document).ready(function(){
          jQuery("#featured > ul").tabs({fx:{opacity:"toggle"}}).tabs("rotate", 5000, 
 true);
      }); 
 </script>

jquery 1.5.2v хорошо работает с magento.

Надеюсь, это поможет вам.

Answer 3

Вы можете использовать var $j = jQuery.noConflict();.Этот код входит в ваш скрипт и использует $j вместо $.

Answer 4

Вы должны изменить все экземпляры $ в вашем скрипте, чтобы использовать jQuery ().Для получения дополнительной информации см. Документы:

http://api.jquery.com/jQuery.noConflict/

В качестве альтернативы вы можете использовать плагин mXperts для задания:

http://www.magentocommerce.com/magento-connect/mxperts/extension/1619/mxperts--jquery-base