在菜单项单击时使用Joaxla的完整Ajax刷新或加载背景图像

时间:2013-02-28 08:51:12

标签: javascript jquery css ajax joomla

我试图在点击Joomla菜单项后在后台生成浏览器刷新。

我的问题是我已经使用ajax处理页面上的内容组件和其他元素以在一个位置刷新但我需要以这种方式更新这些元素: - 用户点击菜单项,然后加载新背景和新内容

当我点击F5 /刷新页面时,背景通常会改变,并且它与活动的menuItemId相对应;只是要注意ajax基于menuItemID更改URL,但他没有改变需要从css中提取的背景 -

我正在使用基于菜单项ID的简单css背景状态:

html部分

<body id="background<?php echo JRequest::getInt( 'Itemid' ); ?>">

css(101,102,103 ... 114是菜单项ID)

 #background101{ background:transparent url(../images/1.jpg) no-repeat 100% 100%; }
    #background102 { background:transparent url(../images/2.jpg) no-repeat 100% 100%;}
    #background103 { background:transparent url(../images/3.jpg) no-repeat 100% 100%; }

Joomla中安装的插件是FullAjax plugin

我阅读了有关配置的手册,但没有解释如何根据menuItemID刷新页面/网站背景

JavaScript代码,FullAjax的参数

    FLAX.Filter.add({url:'/', id:fullAjaxId});
 FLAX.Filter.add({query:['task=weblink','task=profile','task=user.login','task=user.logout','task=article.edit'],  type:'nowrap'});
 FLAX.Filter.on('beforewrap', function(o) {
  var id = o.el.getAttribute('id'), regExt = /.+\.(jpg|jpeg|gif|png|mp3|mp4|ogg|ogv|webm|pdf|txt|odf|ods)$/i;
  if(id == ('login-form') || id == ('form-login') || (o.el.href && (regExt.test(o.el.href) || o.el.href.indexOf('#') != -1))){return false;}
 });
 FLAX.directLink();FLAX.Default.sprt_url = '!';
 FLAX.linkEqual['!ax!'+fullAjaxId+'!'] = 'ajx';FLAX.linkEqual['[~q~]'] = '?';
 /* fix for mootools 'domready', uncomment if need */
 /* FLAX.Html.onall('load', function(o){window.fireEvent('domready');}); */ 

有人可以帮忙吗?

1 个答案:

答案 0 :(得分:0)

它不起作用,因为<body>没有改变,你需要一些编码来在每次ajax调用之后改变它。

如果您启用了选项Check the active menu item,则可以执行下一步操作:

FLAX.Html.onall('load', function(){
    if(fullAjaxMItems.length){
       //set id using MooTools
       document.id(document.body).set('id', 'background' + fullAjaxMItems[0]);
    }
  });

如果未启用此选项,则只需在模板<head>中添加该变量,该变量将保留当前菜单项ID,如:

<script>
  var currentItemId = <?php echo JRequest::getInt( 'Itemid' ); ?>;
</script>

然后在插件配置中:

FLAX.Html.onall('load', function(){
  if(window.currentItemId){
     //set id using MooTools
     document.id(document.body).set('id', 'background' + currentItemId);
  }
});