0

私は HTML5 フォームを徐々に強化することに慣れていません。現在、クロスブラウザー フォームを作成するために jQuery UI と HTML5 の新しい入力タイプを試しています。スクリプトの条件付き読み込みにModernizrとYepnopeを使用し、 CSS-tricks.comで提供されているチュートリアルに従っています。しかし、私はObject [object Object] has no method 'datepicker'エラーが発生しています。

Modernizr.load()の代わりに which を使用できることがわかりましたがyepnope()、それは機能せず、Object #<Object> has no method 'load'エラーが発生したため、 に戻りましたyepnope()。以下は<Head>、ウェブページのセクションごとです。

<Head>
    <title>HTML5 Web Form</title>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/modernizr-2.5.2.js"></script>
    <script type="text/javascript" src="js/yepnope.1.5.2-min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <script type="text/javascript">
    yepnope({
            test: Modernizr.inputtypes.date,
            nope: [
                    "./js/jquery-ui-1.8.17.custom.min.js",
                    "./css/jquery-ui-1.8.17.css"
            ]
    });

    $(function(){
        $("input[type='date']").datepicker(); //this is giving error
    });
    </script>
</Head>

との<body>形をしています<input type='date' name='dtTest'/>

少しグーグルした後、エラーの原因がjQueryコアの2回のロードであることがわかりました。これもフォローしましたが、問題を修正できません。

ありがとう。

注: Chrome 17 と Opera 11.61 でページをテストしています。

4

1 に答える 1

1

HTML ページは次のようになります。

<!DOCTYPE html>
<Html>
    <meta charset="utf-8">
    <head>
        <title>HTML5 Web Form</title>
        <script type="text/javascript" src="js/modernizr-2.5.2.js"></script>
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/yepnope.1.5.2-min.js"></script>
        <script type="text/javascript">

            yepnope({
                test : Modernizr.inputtypes && Modernizr.inputtypes.date,
                nope : [
                    'js/jquery-ui-1.8.17.min.js',
                    'css/jquery-ui-1.8.17.css',
                    'js/datepicker.js'
                ],
                callback : {
                    'jquery-ui-1.8.17.min.js' : function() {
                         $("input[type='date']").datepicker();
                    }
                }
            });
        </script>
    </head>
    <body>
        <div id="lblTest">Hello World</div><br/>
        <form name="frmMain" action="#">
            Date : <input type='date' name='dtTest'/>
        </form>
    </body>
</Html>

そして、datepicker.js の内容は次のようになります。

$(function() {
    $("input[type='date']").datepicker();
});

これは私の Chrome のコピーでは問題なく動作しますが、他のブラウザーで確認する機会はありませんでした。

更新: yepnope のブロックをより効率的にdatepicker.js利用し、そこにバインドすることで、個別の使用を避けることができます。callbackdatepicker()

于 2012-02-14T15:00:53.223 に答える