如何正确地将jQuery & Bootstrap加载到Joomla？

Question

我正在构建一个在joomla后端使用jquery和引导的表单，但是我得到了一个错误。

这是joomla代码：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<?php
if (version_compare(PHP_VERSION, '5.3.10', '<'))
{
    die('Your host needs to use PHP 5.3.10 or higher to run this version of Joomla!');
}

define('_JEXEC', 1);

if (file_exists(__DIR__ . '/defines.php'))
{
    include_once __DIR__ . '/defines.php';
}


if (!defined('_JDEFINES'))
{
    define('JPATH_BASE', __DIR__);
    require_once JPATH_BASE . '/includes/defines.php';
}

require_once JPATH_BASE . '/includes/framework.php';


JDEBUG ? $_PROFILER->mark('afterLoad') : null;

$app = JFactory::getApplication('site');

$app->execute();
?>

下面是我想添加到joomla中的javascript代码：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./send_resume/pmc_resume_js.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(".carouselrow").html("");
    $(".messagerow").html("");
    $(".contentrow").html("<div class='row'><div class='col-lg-2'></div><div style='background-color:white' id='resume_forms' class='col-lg-9'></div><div class='col-lg-1'></div></div>");
    $("#resume_forms").load("./pmc_resume_forms.php","",""); 
    if($("#resume_forms").html()==""){
        $("#resume_forms").load(./pmc_resume_forms.php","",""); 
}
    $(".contentrow").css("background-color", "#F0F4F7"); 
    $(".breadcrumbs").html("<span class='showHere'>You are here: </span><span>Career</span></div>");
    $("title").html("Career");

});
</script>

当我没有在tmy代码开头添加jquery库时，引导下拉导航条就不能工作了。

当我将jquery文件添加到代码的开头，而不是在我的javascript代码的开头添加jquery文件时，下拉导航条正常工作，但我的javascript代码不能工作。

当我在两个地方添加jquery库文件时，我的javascript代码运行良好，但navbar菜单不工作。

我怎么才能解决这个问题？谢谢..。

Answer 1

来自Joomla Docs：

引导：

若要启用引导带框架，请调用JHtml::_('bootstrap.framework')。这将自动启用jQuery框架的noConflict模式(即通过jQuery访问)。而不是$)。包含的引导程序库为2.1.0版本，位于media/jui/bootstrap.js。它包括初始化引导词缀、警报、按钮、旋转木马、折叠、下拉、模态、工具提示、弹出、滚动间谍、标签和提前输入插件的方法。 注意:众所周知，引导按钮和jquery按钮之间存在不兼容性。在同一页上使用这两种方法都会导致冲突。可能的解决办法见1。

jQuery:

为了加载jQuery，使用JHtml::_('jquery.framework')； 这将在无冲突模式下加载jQuery版本1.11.1库。这意味着它是通过jQuery命名空间访问的，而不是通过$访问的。 要在正常模式下加载它，请调用JHtml::_('jquery.framework'，false)；

如何将JavaScript和CSS文件加载到Joomla:

加载Javascript和CSS文件的适当方法是JHtml::script('path-to-file');和JHtml::stylesheet('path-to-stylesheet');

文档页：页面

加载脚本：

JHtml::script以下是此函数的签名，您可以在api.joomla.org上的JHtml::script上看到更多信息： 脚本(字符串$file，布尔$framework = false，布尔$relative = false，布尔$path_only = false，布尔$detect_browser = true，布尔$detect_debug = true)：混合

示例脚本：

<?php
JHtml::script(JUri::base() . 'templates/custom/js/sample.js', true);
?>

使用插件

加载jQuery的一个很好的Joomla插件是jQuery Easy