我如何正确地将 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 文件添加到我的代码的开头并且不在我的 javascript 代码的开头添加 jquery 文件时，下拉导航栏工作正常但是我的 javascript 代码不起作用。

当我在这两个地方添加 jquery 库文件时，我的 javascript 代码工作正常，但导航栏菜单不起作用。

我该如何解决这个问题？谢谢...

Answer 1

来自 Joomla 文档：

Bootstrap:

To enable the Bootstrap framework, call JHtml::_('bootstrap.framework'). This will automatically enable the jQuery framework in noConflict mode (i.e. accessed via jQuery. instead of $.). The Bootstrap library included is version 2.1.0 and is located at media/jui/bootstrap.js. It includes methods to initialize the Bootstrap affix, alert, button, carousel, collapse, dropdown, modal, tooltip, popover, scrollspy, tab and typeahead plugins.

NOTE: There is a known incompatibility between bootstrap-button and jquery-ui-button. Using both on the same page can result in conflicts. See [1] for a possible workaround.

jQuery:

In order to load jQuery, use JHtml::_('jquery.framework');

This will load the jQuery version 1.11.1 library in no conflict mode. This means it is accessed via the jQuery namespace, not through $.

To load it in normal mode, call JHtml::_('jquery.framework', false);

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

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

文档页：http://docs.joomla.org/Adding_JavaScript_and_CSS_to_the_page

加载脚本：

JHtml::script The following is the signature of this function, you can see more at JHtml::script on api.joomla.org:

script(string $file, boolean $framework = false, boolean $relative = false, boolean $path_only = false, boolean $detect_browser = true, boolean $detect_debug = true) : mixed

示例脚本：

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

使用插件

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

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

How do I properly load jQuery & Bootstrap into Joomla?

javascript

jquery

joomla

twitter-bootstrap