2016-10-06 18 views
0

動作しません。私は私のヘッダーに含まれています:jQueryのダイアログボックスが

<head> 
    <script type="text/javascript" src="jquery/jquery-ui.js"></script> 
    <link rel="stylesheet" type="text/css" href="jquery/jquery-ui.css"> 
    <link rel="stylesheet" type="text/css" href="jquery/jquery-ui.structure.css"> 
    <link rel="stylesheet" type="text/css" href="jquery/jquery-ui.theme.css"></script> 
</head> 

をそして、これは私の体であり、私はこれをテストしたいが、私はエラーを取得しています:

ReferenceError: jQuery is not defined 
    factory(jQuery); 

<body> 
     <script> 
      $.extend({ alert: function (message, title) { 
         $("<div></div>").dialog({ 
         buttons: { "Ok": function() { $(this).dialog("close"); } }, 
         close: function (event, ui) { $(this).remove(); }, 
         resizable: false, 
         title: title, 
         modal: true 
         }).text(message); 
        } 
       }); 

      $.alert('message', 'fileName'); 
     </script> 
    </body> 

私のコードでダイアログボックスが動作しない理由がわかりません。私のスクリプトで何かが欠けているのでしょうか、それとも何か問題がありますか? jQueryのスクリプト後のjQuery UIスクリプトを含む

答えて

1

てみてください(jQueryのUIはjQueryのを使用していますので、jQueryの最初にロードする必要があるため)、あなたはこのようにそれらの両方を必要とする

<head> 
    <script type="text/javascript" src="jquery/jquery-3.1.1.js"></script> 
    <script type="text/javascript" src="jquery/jquery-ui.js"></script> 
    <link rel="stylesheet" type="text/css" href="jquery/jquery-ui.css"> 
    <link rel="stylesheet" type="text/css" href="jquery/jquery-ui.structure.css"> 
    <link rel="stylesheet" type="text/css" href="jquery/jquery-ui.theme.css"></script> 
</head> 

のバージョンを使用するように注意してくださいあなたが持っているスクリプト "jquery-3.1.1.js"は単なる例です。

私は、jQueryスクリプトの2つを必要としないというコメントをしました。通常のスクリプトと縮小スクリプトの両方を削除する必要はありません。だから、最高のものを合計する

  1. のjQuery = jQueryの-分jQueryの!= jQueryのUI-
  2. のjQuery-UIはjQueryのを必要とする
  3. が最初にロードされます。
+0

ここでUIスクリプトとバージョンをダウンロードできますか? –

+0

ここにはhttp://jqueryui.com/download/があり、最新バージョンの –

+0

を試してみてください。もう1つ、jQueryスクリプトの正規版と縮小版の両方を含めるのはなぜですか?削除します。 –

関連する問題