Question

我有这个jquery全屏插件。虽然我遵守了所有标准但它给了我jquery not defined错误。我不知道该怎么做。

下面是我在html中内联的代码。

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

        $("#fsButton").click(function(e){
            // Use the plugin
            $("#content").fullScreen();
            e.preventDefault();
        });

    });


}(jQuery));

这是html

中引用的插件

/**
 * @name        jQuery FullScreen Plugin
 * @author      Martin Angelov
 * @version     1.0
 * @url         http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
 * @license     MIT License
 */

(function($){

    // Adding a new test to the jQuery support object
    $.support.fullscreen = supportFullScreen();

    // Creating the plugin
    $.fn.fullScreen = function(props){

        if(!$.support.fullscreen || this.length != 1){

            // The plugin can be called only
            // on one element at a time

            return this;
        }

        if(fullScreenStatus()){
            // if we are already in fullscreen, exit
            cancelFullScreen();
            return this;
        }

        // You can potentially pas two arguments a color
        // for the background and a callback function

        var options = $.extend({
            'background' : '#111',
            'callback'   : function(){}
        }, props);

        // This temporary div is the element that is
        // actually going to be enlarged in full screen

        var fs = $('<div>',{
            'css' : {
                'overflow-y' : 'auto',
                'background' : options.background,
                'width'      : '100%',
                'height'     : '100%'
            }
        });

        var elem = this;

        // You can use the .fullScreen class to
        // apply styling to your element
        elem.addClass('fullScreen');

        // Inserting our element in the temporary
        // div, after which we zoom it in fullscreen
        fs.insertBefore(elem);
        fs.append(elem);
        requestFullScreen(fs.get(0));

        fs.click(function(e){
            if(e.target == this){
                // If the black bar was clicked
                cancelFullScreen();
            }
        });

        elem.cancel = function(){
            cancelFullScreen();
            return elem;
        };

        onFullScreenEvent(function(fullScreen){

            if(!fullScreen){

                // We have exited full screen.
                // Remove the class and destroy
                // the temporary div

                elem.removeClass('fullScreen').insertBefore(fs);
                fs.remove();
            }

            // Calling the user supplied callback
            options.callback(fullScreen);
        });

        return elem;
    };


    // These helper functions available only to our plugin scope.


    function supportFullScreen(){
        var doc = document.documentElement;

        return  ('requestFullscreen' in doc) ||
                ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
                ('webkitRequestFullScreen' in doc);
    }

    function requestFullScreen(elem){

        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        }
        else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        }
        else if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen();
        }
    }

    function fullScreenStatus(){
        return  document.fullscreen ||
                document.mozFullScreen ||
                document.webkitIsFullScreen;
    }

    function cancelFullScreen(){
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }

    function onFullScreenEvent(callback){
        $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function(){
            // The full screen status is automatically
            // passed to our callback as an argument.
            callback(fullScreenStatus());
        });
    }

})(jQuery);

仅供参考我在drupal网站上使用它。然而，这似乎是一个JavaScript问题。

Answer 1

答案很简单：

jQuery not defined error =＆gt;您没有使用jQuery对象之前引用jQuery库。

请添加对jQuery库的引用...

顺便说一句，你最好阅读jQuery guide-lines关于如何编写插件的内容。

即使遵循标准，Jquery也会发生冲突

1 个答案: