Question

我一直在研究这个脚本，我正在使用我为工作中的博客编写的WordPress插件。我正在剥离它，使它成为一个纯粹的jQuery插件，但我已经看到了大多数问题，让插件像这样工作：

$('.some-target').cta();

我想写它，以便用户可以执行以下操作：

cta();

或

$.cta

我并没有真正得到明确的答案或看到很多指南，或者真的，如果可能的话。最后，我希望它像WP的原始迭代一样工作，但作为静态站点的独立jQuery插件：

cta({
  text: "Some Text",
  icon: "Some-icon.jpg",
  dist: 50
});

以下是原始代码：

    jQuery(document).ready(function($){

  cta = function(o) {
    o = o || {};
    var bgColor = o.bgColor;
    var url = o.url;
    var text = o.text;
    var icon = o.icon;
    var buttonText = o.buttonText;
    var target = o.target;
    var dist = o.dist;

    if((o.icon != null) || o.icon == "" ) {
      jQuery('body').append(
        '<div class="cta-popup-wrapper with-icon"><div class="cta-popup"><span class="close-trigger">X</span><img class="cta-icon" src="' + icon + '" alt="Call to Action Icon"><p>' + text + '</p><a class="cta-button" style="background-color:' + bgColor + ';" href="' + url + '">' + buttonText + '</a></div></div>'
      );
    } else {
      jQuery('body').append(
        '<div class="cta-popup-wrapper without-icon"><div class="cta-popup"><span class="close-trigger">X</span><p>' + text + '</p><a class="cta-button" style="background-color:' + bgColor + ';" href="' + url + '">' + buttonText + '</a></div></div>'
      );

    }

    if(target != null) {

      var t = $(target);

      if(t.length) {

        $(window).scroll(function() {

           var hT = t.offset().top,
               hH = t.outerHeight(),
               wH = $(window).height(),
               wS = $(this).scrollTop();

           if (wS > (hT+hH-wH)){
             $('.cta-popup-wrapper').addClass('shown');
           } else {
             $('.cta-popup-wrapper').removeClass('shown');
           }
        });
      }

    } else {
      if((dist != null) && (dist > 0)) {

        var b = $('body').innerHeight();
        dist = dist / 100;
        var trigger = b * dist;

        $(window).scroll(function() {

           var wS = $(this).scrollTop();

           if (wS > trigger){
             $('.cta-popup-wrapper').addClass('shown');
           } else {
             $('.cta-popup-wrapper').removeClass('shown');
           }
        });
      }

    }

  }

});

jQuery函数转换

0 个答案: