Question

我是Jquery的新手并且已经关注了一些教程，但这让我感到困惑。我找到了一个教程，使Jquery时钟工作得很好，但我正在尝试将其转换为插件。我遇到的问题是我已经看到如何调用基于单个div的插件，但这让我很难过。你能看看我的代码并告诉我如何调用插件吗？感谢

HTML：

    <head>
    <script src="jquery.min.js"></script>
    <script src="clock.js"></script>
    <script>
        // Need to call

    </script>

    <style> 
            #clock {
              position: relative;
              width:280px;
              height: 285px;
              margin: 20px auto 0 auto;
              background: url(images/clockface.png);
              list-style: none;
            }

            #sec, #min, #hour {
              position: absolute;
              width: 7px;
              height: 70px;
              top: 125px;
              left: 140px;
            }

            #sec {
              background: url(images/second.png);
              z-index: 3;
            }


            #min {
              background: url(images/min.png);
              z-index: 2;
            }

            #hour {
              background: url(images/hour.png);
              z-index: 1;
            }
    </style>
</head>
<body>
    <ul id="clock"> 
      <li id="sec"></li>
      <li id="hour"></li>
      <li id="min"></li>
    </ul>
</body>

... JS

 (function($){
$.fn.mclock = function(){
    var defaults = {
        var seconds = new Date().getSeconds();
        var sdegree = seconds * 6;
        var hdegree = hours * 30 + (mins / 2);
        },
        options = $.extend(defaults, args);
        console.log(options);

    this.each(function(){
      setInterval( function() {
  var seconds = new Date().getSeconds();
  var sdegree = seconds * 6;
  var srotate = "rotate(" + sdegree + "deg)";

  $("#sec").css({ "transform": srotate });

  }, 1000 );

  setInterval( function() {
  var hours = new Date().getHours();
  var mins = new Date().getMinutes();
  var hdegree = hours * 30 + (mins / 2);
  var hrotate = "rotate(" + hdegree + "deg)";

  $("#hour").css({ "transform": hrotate});

  }, 1000 );

  setInterval( function() {
  var mins = new Date().getMinutes();
  var mdegree = mins * 6;
  var mrotate = "rotate(" + mdegree + "deg)";

  $("#min").css({ "transform" : mrotate });

  }, 1000 );    })(jQuery);

Answer 1

更新：剥离回hello world显示缺少大括号}

注意：你不会返回这个可能会破坏插件的内容

Skeleton插件

/*
 * PLUGIN-NAME
 * PLUGIN-DESCRIPTION
 *
 * Copyright 2011 YOUR-NAME YOUR-WEBSITE-URL
 * Released under the MIT License
 */

(function($){

$.fn.PLUGIN_NAME = function(options) {

    var opts = $.extend({}, $.fn.PLUGIN_NAME.defaults, options);

    return this.each(function() {

    });

};

$.fn.PLUGIN_NAME.defaults = {
};

})(jQuery);

调用JQuery插件

1 个答案: