Question

我正在尝试将新方法注入到jquery中。基本上，我有一个从jQuery min文件加载的日期选择器。现在，无论何时加载此日期选择器，我都想注入一个新方法dateCompliance（）。

<html>
<head>
<!-- Load the polyfill. -->
<script src="/js/intersection-observer.js"></script>

<script src='https://unpkg.com/intersection-observer@0.5.0/intersection-observer.js'></script>

</head>
<body>
<style>
    .intro-imgs {
display: block;
margin: 0 auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;
position: fixed;
position: expression(fixed);
}

.hidden_img {
visibility: hidden;
  opacity: 0;
-ms-transform: scaleX(0); /* IE 9 */
-webkit-transform: scaleX(0); /* Safari 3-8 */
-o-transform: scaleX(0);
-moz-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: visibility 0s 0.5s, opacity 0.5s linear, -webkit-transform 0.5s;
-moz-transition: visibility 0s 0.5s, opacity 0.5s linear, -moz-transform 0.5s;
-o-transition: visibility 0s 0.5s, opacity 0.5s linear, -o-transform 0.5s;
transition: visibility 0s 0.5s, opacity 0.5s linear, transform 0.5s;
}

.visible_img {
  visibility: visible;
  opacity: 1;
-ms-transform: scaleX(1); /* IE 9 */
-webkit-transform: scaleX(1); /* Safari 3-8 */
-o-transform: scaleX(1);
-moz-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition: opacity 0.5s linear, -webkit-transform 0.5s;
-moz-transition: opacity 0.5s linear, -moz-transform 0.5s;
-o-transition: opacity 0.5s linear, -o-transform 0.5s;
transition: opacity 0.5s linear, transform 0.5s;
}

.stepper{
        max-width: 70rem;
    margin: 550px auto 600px auto;
    width: 90%;
    background-color: rgba(248, 248, 248, 0.95);
    font-family: "Helvetica";
    font-size: 17px;
    line-height: 26px;
    padding: 15px;
}
</style>

<!--HTML-->
  <div class="headline">
        <img id="hiddenImg" class="hidden_img intro-imgs" src="https://image.shutterstock.com/image-photo/funny-portrait-hero-260nw-410898763.jpg" >
  </div>
  <div id="I" class="stepper">
    <p>Lorem Ipsum</p>
  </div>
  <div id="II" class="stepper">
    <h1>THE HEADLINE</h1>
  </div>

<!-- SCRIPT-->
<script>
var stepI = false;
var stepII = false;

// list of options
    let options = {
      rootMargin: '0px 0px -50%' //WHEN reaching half of the viewport
    };

// instantiate a new Intersection Observer  
"use strict";

var intersectionObserver = new IntersectionObserver(function (entries, observer) {
  entries.forEach(function (change) {
      if (change.isIntersecting) {
          if (change.target.id == "I") {
            $("#hiddenImg").removeClass("hidden_img");
            $("#hiddenImg").addClass("visible_img");

            stepI = true;

            observer.unobserve(change.target);
          } 


          if (change.target.id == "II") {
              if (stepII == false) {
                  $("#hiddenImg").removeClass("visible_map");
                  $("#hiddenImg").addClass("hidden_map");

                  stepII = true

              } else {
                $("#hiddenImg").removeClass("hidden_map");
                $("#hiddenImg").addClass("visible_map");

                stepII = false;
              }
          }
      } 
    });
},options);

// list of paragraphs
let elements = document.querySelectorAll(".stepper");

for (let elm of elements) {
  intersectionObserver.observe(elm);
}
</script>
</body>

谢谢，获得提示！

Answer 1

创建一个基本的jQuery插件，并在其中进行datepicker初始化和自定义函数调用，无论何时要初始化datepicker都调用自定义插件。

$.fn.customDatepicker = function(option) {
  // within plugin code this refers to jQuery object of the element
  // initialize datepicker with the options
  this.datepicker(option);
  // call the function
  dateCompliance();
  // return jQuery object reference for chaining 
  return this;
};

，并使用以下代码初始化datepicker。

$("#ID").customDatepicker({
   onClose: removeAria,
   showOn: 'button',
   buttonImageOnly: false,
})

JQuery documentation for basic plugin creation.

向jQuery中的datepicker小部件注入新方法

1 个答案: