2012-03-25 5 views
-1

私はこのjqueryフルスクリーンプラグインを持っています。私はすべての標準に従っているが、それは私に与えてjquery not definedエラー。私は何をすべきか分かりません。次の標準の後でもJqueryが競合します

以下は、私がHTMLでインライン化しているコードです。

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

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

    }); 


}(jQuery)); 

これは、HTML FYI私はDrupalのサイトでこれを使用しています

/** 
* @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); 

で参照されているプラ​​グインです。しかし、これはjavascriptの問題と思われる。

+0

(作業中の)jQueryファイルへのリンクをHTMLページに含める必要があります。最初に[ライブラリ](https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js)にリンクしてから、使用するjQueryプラグインにリンクします。あなたがこれを知っているとは思わないでしょうが、jQueryが定義していないエラーが出てくることが想像できる唯一の理由です。/ –

+0

あなたが持っているコードはまったく 'jquery'を参照していないので、他の場所に問題がある(またはエラーを誤って報告している)。 – Quentin

+0

あなたのページにjqueryがありますか? – Starx

答えて

0

答えは簡単です:

jQuery not defined error =>あなたは、jQueryオブジェクトを使用して前に、jQueryライブラリを参照していませんでした。あなたがより良いプラグインを作成する方法についてjQuery guide-linesを読ん

jQueryライブラリへの参照を追加してください...ところで

、。

関連する問題