Adding JavaScript
Other languages:
 o ? o ?English o ? o ? o ? o ? o ? o ? o ?
Joomla! 
JavaScript (also known as ECMAScript) is a scripting language primarily used in client-side web site development to extend and enhance an end-user's experience. Joomla provides developers with easy-to-use mechanisms to include JavaScript in their extensions using existing API methods. There are a number of methods for including JavaScript in your J some of these are described below.
There are three methods for embedding JavaScript into your code using the Joomla API; ,
and . These methods should be called either in your component's View class &yourcomponent&/views/&yourview&/view.html.php or template script &yourcomponent&/views/&yourview&/tmpl/&yourtemplate&.php or in the case of a module, in its template script &yourmodule&/tmpl/&yourtemplate&.php.
Blocks of JavaScript code can be declared directly within a component or module's display template using the
$document = JFactory::getDocument();
$document-&addScriptDeclaration('
window.event("domready", function() {
alert("An inline JavaScript Declaration");
Alternatively, you may wish to separate your JavaScript into a separate file. Separating your JavaScript into an external file can make your template code easier to read especially if the JavaScript is lengthy or complex.
There are two ways to include a JavaScript file using the Joomla! API. The first involves using the
$document = JFactory::getDocument();
$document-&addScript('/media/system/js/sample.js');
The second uses the
// Add the path parameter if the path is different than 'media/system/js/'
JHTML::script('sample.js', 'templates/custom/js/');
API has changed in 3.x, so the second parameter cannot be a string. If you really need to use this method, you must include the absolute link to your JavaScript file:
JHtml::script(Juri::base() . 'templates/custom/js/sample.js');
The Joomla API's ,
methods embed JavaScript into Joomla's index.php via the jdoc head tag:
&jdoc:include type="head"/&
methods to embed JavaScript includes would result in the index.php rendering the following HTML:
&script type="text/javaScript" src="/media/system/js/sample.js"&&/script&
Calling the class method
would render the following HTML:
&script type="text/javaScript"&
window.addEvent("domready", function() {
alert("Embedded block of JS here");
Using these methods is highly recommended as it clearly differentiates another scripting language (JavaScript) from the main PHP code, ensures all JavaScript is correctly embedded between the &head&&/head& tags and, in the case of JDocument::addScript and JHTML::script ensures that a JavaScript file is included only once (I.e. there is no .js file duplication).
A Javascript framework provides developers with generic functionality for handling various coding tasks in a familiar, consistent and platform-independent way. A framework enables the developer to forget about the intricacies of implementing a certain function in different web browsers and focus on the requirements of the software.
are provided as part of Joomla 3.x; jQuery and Mootools. jQuery is a newly introduced framework which integrates with Joomla's new Bootstrap HTML Mootools is Joomla's legacy Javascript library which is now superseded by jQuery and is included for backwards compatibility with 3rd party extensions.
In nearly all cases you should use a framework when developing Javascript in your extensions or templates and including one is very simple with Joomla's API.
Please see the guide on
for information about including a framework in Joomla 3.x
Unless you are maintaining Javascript code which leverages Mootools or you are developing an extension for Joomla 2.5 or earlier it is recommended you use jQuery instead.
Firstly, you will need to include the Mootools code in your extension. To include the Mootools framework in your extension, you add the following code to your view.html.php or tmpl file:
FOR JOOMLA 1.5
JHTML::_('behavior.mootools');
FOR JOOMLA 2.5
JHtml::_('behavior.framework');
The above code results in the same outcome as the similar jQuery that is it ensures Mootools is included correctly and only once.
Then using Mootools is almost identical to jQuery:
JFactory::getDocument()-&addScriptDeclaration('
window.addEvent("domready", function() {
alert($("list").getElements("li").length);
More information about Mootools is available at . For API documentation, visit .
If you are creating a custom template override or extension that needs to add a custom JS file, make sure to add important dependencies such as Jquery or Mootools before your custom JS files. JS framework files must always be loaded before any other files to make sure they get executed first, otherwise other files that load before the frameworks they need are likely to end in JS exceptions.
Some templates like Protostar or Beez insert all the dependencies you need using functions like
JHtml::_('bootstrap.framework');
to load Jquery + Bootstrap, but you should not rely in this fact on your extensions or custom templates overrides. Always make sure your extension or custom override load the dependencies you need before the template does it, I will explain why later:
For example if you got a custom template override that needs to insert a JS file with some Jquery scripts that does fancy things on all the pages where that template override is being used. In that case you should declare this on the top section of that override file:
JHtml::_('jquery.framework');
$doc-&addScript('templates/'.$this-&template.'/js/fancy-script.js');
If you are developing a 3rd party extension that you plan to put on the Joomla! extension directory you should do something like this:
if($params-&get('add_extension_resources', false))
JHtml::_('jquery.framework');
$doc-&addScript('media/com_fancy/js/fancy-script.js');
The conditional clause to decide whether to add or not the extension resources is strongly encouraged and considered a good practice because it gives flexibility to 3rd party developers who don't want to use your extension resources and use custom/modified files without having to battle with Joomla! using workarounds and hacks to be able to remove your original extensions resources in order to avoid duplicates and conflicts.
If you check the source code of the index.php from the Protostar template, you can see that the statements
JHtml::_('bootstrap.framework');
is added way before the statement
&jdoc:include type="head" /&
this can make you think that the framework files and your 3rd party files using methods like
$doc-&addScript('templates/'.$this-&template.'/js/fancy-script.js');
$doc-&addScript('media/com_fancy/js/fancy-script.js');
will be added in the right order at the right spot, but that is not the case, because extension files and template override files are processed first and the index.php file of your current template is processed the last. This will cause that your custom JS files get inserted first and the framework files inserted from the template get inserted after.
This happens because the Joomla! API (such as $doc-&addScript) uses an array to store the JS files paths and they get rendered in the document in the same order they where inserted into that array (FIFO stack). Also, once a file path is inserted on the array and another API call tries to insert the same file this action is ignored to avoid duplicates. It also means that the order of the files is not altered when the same files is attempted to be inserted several times.
Having said that doing this
JHtml::_('jquery.framework');
$doc-&addScript('templates/'.$this-&template.'/js/fancy-script.js');
at your custom templates overrides and extension, is required and does not cause harm or conflict with the call
JHtml::_('bootstrap.framework');
at your template index.php file.Access denied | www.quweiji.com used Cloudflare to restrict access
Please enable cookies.
What happened?
The owner of this website (www.quweiji.com) has banned your access based on your browser's signature (3e44a-ua98).joomla 登入我把他放在脚页现在不知道怎么去掉或者隐藏_百度知道
joomla 登入我把他放在脚页现在不知道怎么去掉或者隐藏
我有更好的答案
在后台的模块管理中，把登录模块禁用（不发布）即可
采纳率：68%
为您推荐：
其他类似问题
joomla的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)描述性分类
Discuz! X1.5后台
X-Space系列
来自站长百科
用建站的大多数站长都需要在前台使用下拉菜单（dropdown menu），或者叫弹出菜单（slide menu），因为这样可以在有限的页面空间上发布更多的导航菜单，并且可以进行分组，方便访客迅速找到所需信息。因此，我们也注意到了，几乎每一款收费模板（commercial template）都提供了下拉菜单功能。如果你使用 Joomla! 1.5 核心自带的 rhuk_milkyway 模板，就会发现这个模板却没有提供下拉菜单功能。那么，能否用 Joomla 核心自带的资源，简单、快速地给 rhuk_milkyway 模板添加一个下拉菜单功能？
我们登录到 Joomla 1.5 后台之后发现，管理后台的顶部导航菜单是一个下拉菜单。既然在后台能实现下拉菜单，那么我们把这个功能移植到前台不就行了吗？事实证明这个猜想是正确的，而且操作非常简单，除了复制几个文件，修改的只是几行而已。下面我们详细介绍一下。
在 rhuk_milkyway 模板文件夹里面创建一个新目录，名叫 js，复制 /administrator/templates/khepri/js 文件夹中的那两个 JS 文件过来；或者，直接把 /administrator/templates/khepri/js 这个目录复制到前台 rhuk_milkyway 模板文件夹中。
总之，上面的操作使得前台 rhuk_milkyway 模板的文件夹中新增了两个文件：
/templates/rhuk_milkyway/js/index.js
/templates/rhuk_milkyway/js/menu.js
然后，打开 /templates/rhuk_milkyway/index.php 这个文件，在 &/head& 标记之前，插入下面的代码：
&script type=&text/javascript& src=&&?php echo $this-&baseurl ?&/templates/&?php echo $this-&template ?&/js/menu.js&&&/script&
&script type=&text/javascript& src=&&?php echo $this-&baseurl ?&/templates/&?php echo $this-&template ?&/js/index.js&&&/script
打开/templates/rhuk_milkyway/css/template.css 这个文件，在末尾添加下面的代码：
#menu, #menu ul, #menu li { margin: 0; padding: 0; border: 0 }
{ position: z-index: 100;}
position: list-style: display:}
#menu li a
{ display: white-space:
#menu li li { /*width: 100%;*/ clear:
/*FF 1.0.7 needs this */
#menu li ul { visibility: position: }
#menu li li ul {
top: 0; left: 0; }
#menu li.hover ul
visibility: }
#menu li.hover ul li ul
visibility:
#menu li.hover li.hover ul
visibility:
left: 100%; }
/* ---- Menu layout -------------------------- */
#menu li {
border-left: 1px solid #
border-right: 1px solid #d8d8d8;
#menu li li { border: 0;}
{ border: 0.1em solid # background: #f6f6f6 url(../images/bg-menu.gif) repeat-}
#menu ul li.node { background: transparent url(../images/j_arrow.png) no-repeat right 50%; }
#menu ul li.separator { background: #DDE1E6 url(../images/bg-menu.gif);
#menu a, #menu div {
padding: 0.35em 1em 0.35
margin: 0 1px 0 1
color: #333333;
line-height: 1.6 vertical-align:
font-size: 11 font-weight: text-decoration:
background-repeat: no- background-position: left 50%
#menu li.disabled a { color: }
#menu ul a {
font-size: 11
font-weight:
padding-left: 25
padding-right: 20
line-height: 1.2
/* 1 level - hover */
#menu li.hover a {
background-color: #E7EDDF; border-left: 1px solid #6D9D2E;
border-right:1px solid #6D9D2E; margin: 0; }
/* 2 level - normal */
#menu li.hover li a { background-color: border: 0
/* 2 level - hover */
#menu li.hover li.hover a { background-color: #E7EDDF; border: 1px solid #6D9D2E;
/* 3 level - normal */
#menu li.hover li.hover li a { background-color: border: 0
/* 3 level - hover */
#menu li.hover li.hover li a:hover { background-color: #E7EDDF; border: 1px solid #6D9D2E;
/* submenu styling */
#submenu {
list-style:
padding: 0;
margin: 0;
#submenu li {
padding: 0;
margin: 0;
#submenu li a,
#submenu span.nolink {
padding: 0px 15
border-right: 1px solid #
font-weight:
color: #0B55C4;
line-height: 12
height: 12
#submenu span.nolink {
color: #999;
#submenu a.active,
#submenu span.nolink.active {
color: #000;
text-decoration:
这些 CSS 定义仍然提取自 Joomla! 1.5 后台的 khepri 模板样式代码。因此，仍然是 Joomla! 1.5 自身的资源。
在 rhuk_milkyway 模板上，顶部导航菜单发布的模块位置是 user3。因此进入后台的“模块管理”，通过模块位置 user3 迅速筛选到“顶部菜单”（topmenu）这个模块。然后对这个模块的“模块参数”和“高级参数”分别进行如图所示的设置：
请注意上图中，“菜单标签ID”这一项必须手动填写“menu”，菜单类型要选择为“项目列表”（List）。至于菜单的“终止级别”（End Level），可以根据需要来填写，一般3到4级深度就够了。
打开 /templates/rhuk_milkyway/index.php 这个文件，搜索
，大概在第47行（Joomla! v1.5.20）左右，此标记附近的代码如下：
&div id=&tabarea&&
&div id=&tabarea_l&&
&div id=&tabarea_r&&
&div id=&tabmenu&&
&table cellpadding=&0& cellspacing=&0& class=&pill&&
&td class=&pill_l&& &/td&
&td class=&pill_m&&
&div id=&pillmenu&&
&jdoc:include type=&modules& name=&user3& /&
&td class=&pill_r&& &/td&
将上面这一段代码，提取出 &jdoc:include type="modules" name="user3" /& 这一行，其它都注释掉。也就是说，把上面这一大段代码，替换为下面三行
&div class=&topmenu&&
&jdoc:include type=&modules& name=&user3& /&
我们已经知道，Joomla! 1.5 支持
优先输出，因此我们借助这个技巧来对 mod_mainmenu 主菜单模块的输出结果进行改造。
1.在 /templates/rhuk_milkyway/ 目录下寻找有没有名为 html 的文件夹，如果没有，就创建一个。然后在新增的 html 目录中再创建子目录名为 mod_mainmenu（注意大小写）。然后，把
/modules/mod_mainmenu/tmpl/default.php 和 /modules/mod_mainmenu/tmpl/index.html 这两个文件复制到新创建的 /templates/rhuk_milkyway/html/mod_mainmenu 目录中来。
/templates/rhuk_milkyway/html/mod_mainmenu/tmpl/default.php
这个文件，将大约第36行左右，找到如下的代码：
if (($node-&name() == 'li') && isset($node-&ul)) {
$node-&addAttribute('class', 'parent');
修改一下，最终变成：
if (($node-&name() == 'li') && isset($node-&ul)) {
$node-&addAttribute('class', 'node parent');
可以看到，在第37行增加了“node”，这样就能调用前面移植的及CSS文件/代码了。
接下来，你就可以在后台”菜单管理“中，给”顶部菜单“增加多级菜单。在前台预览时，就会发现这些新增的多级菜单都以下拉菜单形式工作了。
Joomla安装：
Joomla!1.5自带资源给前台添加下拉菜单 |
其他Joomla教程：