[英]Transferring an html layout into a joomla template javascript doesn't work
[英]javascript doesn't work on Joomla 3
我總是直接將jquery腳本用於joomla的模塊。
最近,我從使用Joomla2切換到了Joomla3。 不知何故,腳本在模塊中不再起作用。 有人知道為什么嗎?
(盡管某些腳本仍然有效)
示例:這就是我正在研究的內容。
<a href="#intro">Intro</a> <a href="#about">About</a> <a href="#info">Info</a>
<h1 id="intro">Intro</h1>
<p>abcd</p>
<h1 id="about">About</h1>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jump=function(e)
{
//prevent the "normal" behaviour which would be a "hard" jump
e.preventDefault();
//Get the target
var target = $(this).attr("href");
//perform animated scrolling
$('html,body').animate(
{
//get top-position of target-element and set it as scroll target
scrollTop: $(target).offset().top
//scrolldelay: 2 seconds
},600,function()
{
//attach the hash (#jumptarget) to the pageurl
location.hash = target;
});
}
$(document).ready(function()
{
$('a[href*=#]').bind("click", jump);
return false;
});
</script>
該代碼可以使目標菜單ID平滑滾動。 如果我在Joomla2模塊中使用上述代碼,則效果很好,但在Joomla 3中不起作用。
任何想法?
默認情況下,Mootools已加載到Joomla中! 2.5.x 這是另一個像jQuery這樣的JS庫,它們也使用$符號。 因此我們需要使用jQuery.noConflict()方法解決此問題。
嘗試以這種方式使用jQuery並重新檢查。
var $jQ = jQuery.noConflict();
// $jQ is now an alias to the jQuery function
// creating the new alias is optional.
$jQ(document).ready(function() {
$jQ( "div" ).hide();
});
我在這里重寫了您的代碼:
<script type="text/javascript">
var jump=function(e)
{
//prevent the "normal" behaviour which would be a "hard" jump
e.preventDefault();
//Get the target
var target = $jQ(this).attr("href");
//perform animated scrolling
$jQ('html,body').animate(
{
//get top-position of target-element and set it as scroll target
scrollTop: $jQ(target).offset().top
//scrolldelay: 2 seconds
},600,function()
{
//attach the hash (#jumptarget) to the pageurl
location.hash = target;
});
}
var $jQ = jQuery.noConflict();
$jQ(document).ready(function()
{
$jQ('a[href*=#]').bind("click", jump);
return false;
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.