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

Question

我正在建立一个在joomla后端使用jquery和bootstrap的表单，但是出现错误。

这是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库时，bootstrap下拉导航栏不起作用。

当我将jquery文件添加到我的代码的开头并且不将jquery文件添加到我的javascript代码的开头时，下拉导航栏可以正常工作，但是我的javascript代码不起作用。

当我在两个地方都添加了jQuery库文件时，我的javascript代码运行正常，但是导航栏菜单不起作用。

我该如何解决？ 谢谢...

Answer 1

从Joomla文档中：

引导：

要启用Bootstrap框架，请调用JHtml :: _（'bootstrap.framework'）。 这将自动在noConflict模式下启用jQuery框架（即通过jQuery而不是$访问）。 包含的Bootstrap库为2.1.0版，位于media / jui / bootstrap.js中。 它包括初始化Bootstrap词缀，警报，按钮，轮播，折叠，下拉，模态，工具提示，弹出框，scrollspy，Tab和typeahead插件的方法。

注意：引导程序按钮和jquery-ui-button之间存在已知的不兼容性。 在同一页面上同时使用它们可能会导致冲突。 有关可能的解决方法，请参见[1]。

jQuery的：

为了加载jQuery，请使用JHtml：__（'jquery.framework'）;

这将以无冲突模式加载jQuery 1.11.1版库。 这意味着它是通过jQuery命名空间而不是通过$访问的。

要以正常模式加载它，请调用JHtml：__（'jquery.framework'，false）;。

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

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

Docpage： http ://docs.joomla.org/Adding_JavaScript_and_CSS_to_the_page

加载脚本：

JHtml :: script以下是此函数的签名，您可以在api.joomla.org的JHtml :: script上查看更多信息：

脚本（string $ file，boolean $ framework = false，boolean $ relative = false，boolean $ path_only = false，boolean $ detect_browser = true，boolean $ detect_debug = true）：混合

示例脚本：

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

使用插件

jQuery Easy是加载jQuery的一个不错的Joomla插件