마 젠토에서 Jquery를 추가하는 방법?

우리에 관한 현재 프로젝트에서 다른 섹션 사이를 전환하기 위해 탭을 추가해야합니다 .Jquery 탭으로 수행 할 수 있다는 것을 알고 있지만 magento와 통합 할 때이 작업을 수행하는 방법을 모르겠습니다.

CMS 페이지를 이미 작성했고 해당 페이지의 About Us이름이이 이름 인 경우if ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='your_page_name'):

이제이 코드를 app/design/frontend/your_package/your_theme/template/page/html/head.phtml

<?php $headBlock = $this->getLayout()->getBlock('head');
    if ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='About Us'): 
    ?>
    <link rel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">jQuery.noConflict();</script>
    <script type="text/javascript"> jQuery(function() { jQuery( "#tabs" ).tabs(); });</script>
    <?php endif; ?> 

그런 다음 CMS 페이지의 컨텐츠 섹션을여십시오.

<div style="float: right; width: 200px;">&nbsp;
<p>{{block type="tag/popular" template="tag/popular.phtml"}}</p>
</div>
<div id="tabs" style="width: 680px;">
<ul>
<li><a href="#tabs-1">You text here.</a></li>
<li><a href="#tabs-2">You text here.</a></li>
<li><a href="#tabs-3">You text here.</a></li>
</ul>
<div id="tabs-1">
<p>You text here.</p>
</div>
<div id="tabs-2">
<p>You text here.</p>
</div>
<div id="tabs-3">
<p>You text here.</p>
<p>You text here.</p>
</div>
</div>

이 코드를 붙여 넣으면 프론트 엔드에 jquery 탭이 생성됩니다.

의심 스러우면 여기 에 참조 링크가 있습니다.

이를 위해 head.phtml템플릿 을 편집하지 않는 것이 좋습니다 . 대부분의 경우 핵심 테마가 이미 작업을 수행하고 있기 때문에 자신의 테마에 사용자 정의 헤드 템플릿이 필요하지 않습니다.

또한 개인적으로 예외를 기반으로하는 코드를 작성하고 싶지 않습니다 (A의 경우이 작업을 수행하고 B의 경우이 작업을 수행하는 경우). 많은 다른 페이지에서 많은 다른 자바 스크립트가 필요 head.phtml하다면 많은 if 문으로 채워질 것입니다.

레이아웃 XML을 통해 jQuery를 추가하는 것이 좋습니다. CMS 페이지를 사용하면 페이지를 편집 할 때 관리자에게 추가 레이아웃 XML을 추가 할 수 있습니다. 여기 about us 페이지와 다른 템플릿을 설정하는 예제가 있습니다. 같은 방법으로 about us 페이지에 jQuery를 추가 할 수 있습니다. 이 레이아웃 XML을 추가하십시오.

<reference name="head">
    <action method="addItem">
        <type>skin_js</type>
        <script>js/jquery-1.x.x.js</script>
    </action>
    <block type="core/text" name="jquery.noconflict">
        <action method="setText">
            <text><![CDATA[<script type="text/javascript">var $j = jQuery.noConflict();</script>]]>
            </text>
        </action>
    </block>
</reference>

또는 테마 디렉토리에 간단한 사본을 복사하여 테마에 skin\frontend\[your theme]\default\js\추가하십시오 page.xml.

<action method="addItem">
    <type>skin_js</type>
    <script>js/jquery-1.9.1.min.js</script>
</action>

좋아, 프로토 타입, jQuery 및 부트 스트랩을 방해하지 않고을 사용하지 않고 작동시키는 방법을 찾았습니다 jQuery.noConflict(). 내 레이아웃 설정 ( page.xml)을 따르고 있습니다 (쉽게 읽기 위해 넘어졌습니다).

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
</block>

다음과 같은 오류가 발생했습니다.

TypeError : element.attachEvent는 함수가 아닙니다

element.attachEvent ( "on"+ actualEventName, 응답자);

TypeError : element.dispatchEvent는 함수가 아닙니다

element.dispatchEvent (이벤트);

나는 $모든 곳 에서 바꾸고 싶지 않았다 . 그래서 다음과 같이 세 개의 자바 스크립트 파일을 만들었습니다.

다음 코드가있는 proto_to_temp.js :

var $tempPrototypeDollar = $;

after_jquery.js 는 다음 코드를 가지고 있습니다 :

$ = jQuery;

after_all.js 는 다음 코드를 가지고 있습니다 :

$  = $tempPrototypeDollar;

이미 짐작할 수 있듯이 첫 번째 스크립트 $는 프로토 타입이 소유 한 현재 변수를이라는 임시 변수에 할당합니다 $tempPrototypeDollar. 두 번째 스크립트는 단순히에 할당 jQuery합니다 $. 셋째 스크립트의 내용을 할당 $tempPrototypeDollar가기 $.

이 세 스크립트를 다음 순서로 포함 시켰습니다.

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/proto_to_temp.js</script></action><!-- First Script goes just before jQuery include-->
    <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_jquery.js</script></action><!-- Second Script goes just after jQuery include-->
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_all.js</script></action><!-- Third Script goes after all jQuery related code has been included -->
</block>

이것은 나를 위해 모든 문제를 해결했으며 이제 jquery, 부트 스트랩 및 프로토 타입이 모두 정상적으로 작동하는 것 같습니다.

디자인 페이지 상단에 다음을 포함

<script>
var $j = jQuery.noConflict();
</script>

$j대신 jQuery를 사용하십시오.$(Eg:$j('.class').hide();)

추신 : jvar 대신 다른 변수를 사용할 수 있습니다$j