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

标签 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');}); */ 

有人可以帮忙吗?

最佳答案

它不起作用因为<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);
  }
});

关于javascript - 在菜单项单击时使用 Joomla 的完整 Ajax 刷新或加载背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15131175/

相关文章:

javascript - jquery 可拖动自定义包含

javascript - 使用javascript从一个函数获取值到另一个函数

javascript - 如何对动态呈现的表格进行排序?

javascript - 在不重新加载页面的情况下更新 URL 哈希

php - 在检查元素中获取无法修改 wp-admin 的错误

javascript - CSS/Javascript - 适用于较小屏幕的移动响应式菜单

javascript - Disqus 为动态页面加载相同的评论

javascript - jQuery 迁移插件不允许我使用 jQuery(htmlString)

html - 如何为 div 框做 css 位置代码?

javascript - 默认选择值不显示在 vue 中