2

Web ページに日付ピッカーが表示されませんが、フィドルでは表示されます。何が欠けていますか?

http://jsfiddle.net/cBwEK/

フィドルでは問題なく動作していますが、Web ページには何も表示されません。以下のスクリプトを書きました

ソースコード全体はこちら: http://www.monkeyphysics.com/mootools/script/2/datepicker

<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>     
    <script type="text/javascript" src="datepicker.js"></script>      
    <script type="text/javascript" src="mootools-yui-compressed.js"></script>
    <script type="text/css" src="datepicker.css"></script>        
    <script type="text/javascript">           
        new DatePicker('.picker', {
            pickerClass: 'datepicker ',
            allowEmpty: true
        });           
    </script>        
 </head>
 <body>
     <label>Datepicker starting at and allowing no value:</label>
     <input name='date_allow_empty' type='text' value='' class='date picker' />
 </body>
</html>
4

2 に答える 2

4

関連する要素が DOM に存在するようになったら、JavaScript コードを実行する必要があります。スクリプトをページの最後に移動するだけです。また、日付ピッカー スクリプトが MooTools に依存している場合は、日付ピッカー インクルードを MooTools インクルードの後に​​配置する必要があります。例えば：

<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>     
    <!-- FIRST CHANGE HERE, swapping the order of the script elements -->
    <script type="text/javascript" src="mootools-yui-compressed.js"></script>
    <script type="text/javascript" src="datepicker.js"></script>      
    <link type="text/css" rel="stylesheet" href="datepicker.css">
 </head>
  <body>
   <label>Datepicker starting at and allowing no value:</label>
   <input name='date_allow_empty' type='text' value='' class='date picker' />
   <!-- SECOND CHANGE HERE, moving your script to *after* the elements it operates on -->
   <script type="text/javascript">           
            new DatePicker('.picker', {
     pickerClass: 'datepicker ',
     allowEmpty: true
     });           
   </script>        
  </body>
</html>

ライブコピー| ソース

そこにスクリプトを移動しましたが、YUI の人々が提案するように、すべてのスクリプトをそこに移動することもできます。

jsFiddle で機能する理由は、onloadイベントから JavaScript コードをロードするように設定されたフィドルがあるためです。これは、プロセスの非常に遅い段階で発生します。それまでに DOM 要素が存在します。

于 2012-04-30T07:35:14.567 に答える
2

ページの読み込み後に、DatePicker初期化を読み込んでみてください。

A good programmer always use View Source

Fiddleを見たとしたら、次のようになります。

<script type='text/javascript'>
    window.addEvent('load', function() {
        new DatePicker('.picker', {
             pickerClass: 'datepicker ',
            allowEmpty: true
        });
    });
</script>

これは、HTML要素が読み込まれず、スクリプトに表示されないためです。

于 2012-04-30T07:37:11.130 に答える