Joomla 中的 jquery 自定义插件不起作用

jquery custom plugin in joomla is not working

本文关键字：插件 不起作用 自定义 jquery 中的 Joomla      更新时间：2023-09-26

我正在尝试添加一个自定义的jquery插件。但是我收到错误jQuery（...）。终止符不是一个函数。我很确定代码中没有错误

对于测试，我试图从 learn.jquery.com 复制代码

(function($) {
    $.fn.greenify = function() {
        this.css("color", "green");
        return this;
    };
}(jQuery));

然后

jQuery('..').greenify();

这给我返回错误 jQuery（'..'）。绿化不是一个函数

这是怎么回事？？？有谁知道其中的原因吗？

编辑

代码越多。这个绿色化的东西只是为了表明它不适用于标准示例......

实际的插件...它目前只放在同一个文件中，稍后在 ellements 上调用它，所以找不到文件的问题。

 (function($) {
  $.fn.termifier = function(options) {
   options = $.extend({
      lookupResource: 'getTerm',
     flyoutClass: 'lookerUpperFlyout'
  },options||{});
   this.attr('title','Click me for my definition!');
   return this.click(function(event){
    $.ajax({
       url: options.lookupResource,
       type: 'get',
       data: {term: this.innerHTML},
       dataType: 'html',
    success: function(data) {
      $('<div></div>')
        .css({
          position: 'absolute',
          left: event.pageX,
          top: event.pageY,
          cursor: 'pointer',
          display: 'none'
        })
        .html(data)
        .addClass(options.flyoutClass)
        .click(function(){
          $(this).fadeOut(1500,function(){$(this).remove();});
         })
        .appendTo('body')
        .fadeIn();
      }
    });
    return false;
  });
 };
  }(jQuery));

 jQuery(document).ready(function(){
 ...
 jQuery('abbr').termifier({
    lookupResource: 'some.php'
  });
 });

我很无知...

首先，确保使用Joomla的API导入jQuery，如下所示：

<?php
   JHtml::_('jquery.framework');
?>

这将确保只导入 1 个 jQuery 实例，并且也处于无冲突模式。

完成后，应使用 jQuery 全局作用域和$作为别名（可选）：

jQuery(document).ready(function($){
    $.fn.greenify = function() {
        this.css("color", "green");
        return this;
    };
});

希望这有帮助

它可以工作，但我认为您在添加功能之前使用了 greenify（）。

你能给我们看更多的代码吗？ 

(function ( $ ) {
   $.fn.greenify = function() {
      this.css( "color", "green" );
      return this;
  };
  }( jQuery ));
  
jQuery('#test').greenify();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="test">
  Black text?
</p>

我想你试着调用jQuery（'..'）。绿化（）;在加载插件之前。

如果文档准备就绪，则可以添加它 - 以相同的方式调用插件

(function($) {
    $.fn.greenify = function() {
        this.css("color", "green");
        return this;
    };
}(jQuery));
$(function() {
    jQuery('..').greenify();
});
相关文章：