0

jQuery datepickerツールを使用しようとしていますが、機能しません。私はjQueryを初めて使用するので、jQueryについてはよくわかりません。誰かが私が間違っている場所を見つけることができますか？ヘッダーのリンクは正しいですか？

html：

<html>
    <head>  
        <title>CodeProject</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script type='text/javascript' src='javascript.js'></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    </head>
<body><h2>Date Picker</h2>
        <p>I will be making a simple date picker tool using jQuery. You have have seen it in some</br> travel websites where when you move your cursor on a date field, you see a little pop-up which allows you to pick a date.</p></br>
        <p>Departure date:<input type="text" id="departure"></p>
        <p>Returning date:<input type="text" id="returning"></p>
        <button>Submit</button>
</body>

jQueryファイル：

$(document).ready(function() {
$("#departure").datepicker();
$("#returning").datepicker();
});

CSSファイル：

    #header {
    background-color: white; /**#212121**/
    margin-bottom: 0px;
    margin-left: 0;
    margin-top: 0px;
    z-index: 1px;
    width: 99.2%;
    border-bottom: 2px solid #212121;

}

h1 {
    text-align: left;
    font-family: times, Times New Roman, times-roman, georgia, serif;
    color: #444;
    padding: 0px 0px 6px 0px;
    font-size: 51px;
    line-height: 44px;
    letter-spacing: -2px;
    font-weight: bold;
    padding-left: 10px;
}

span {
    color: #7EAEDE;
    font-size: 20px;
    letter-spacing: 4px;

}

h2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:30px;
    margin-top: 0px; margin-bottom: 10px;
    text-align: left;
    font-weight: normal;
    color: #222;
}

h4 {
    font-family: "Lucida Grande", Tahoma;
    font-size: 10px;
    font-weight: lighter;
    font-variant: normal;
    text-transform: uppercase;
    color: #666666;
    margin-top: 10px;
    text-align: left!important;
    letter-spacing: 0.3em;
    margin-left: 2px;
}

#p1 {
    font-family:  'Hoefler Text', Georgia, 'Times New Roman', serif;
    font-weight: normal;
    font-size: 1.75em;
    letter-spacing: .2em;
    line-height: 1.1em;
    margin:0px;
    text-align: center;
    text-transform: uppercase;
    color: #1BA8E0;
}

body {
    background-color: grey;
    margin: 0; /**body has margin by default so we 0 to get rid of it **/
}

#wrapper {
    width:700px; /**Get everything in the wrapper to be within this width of 700px**/
    margin: 0 auto; /**centre everything**/
    background-color: white;
    margin-top: 0px;
    border: 2px solid #444;
    border-top: 0px;
}

.border { /**Separated by a dotted line**/
    border-bottom: 1px dotted black;    
    border-top: 1px dotted black;
}
4

3 に答える 3

2

アクションを実行したいJSファイルを呼び出しています

<script type='text/javascript' src='javascript.js'></script>

jQuery および jQueryUI コンポーネントを呼び出す前に。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

ここで操作の順序を変更し、javascript.jsこれら 2 つのファイルの後に配置します。

于 2013-03-23T21:21:12.313 に答える
0

ここで見逃したことをやってみてくださいhttp:：

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

マークアップ：

<html>
        <head>  
            <title>CodeProject</title>
            <link rel="stylesheet" type="text/css" href="stylesheet.css">
            <script type='text/javascript' src='javascript.js'></script>
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
        </head>
    <body><h2>Date Picker</h2>
            <p>I will be making a simple date picker tool using jQuery. You have have seen it in some</br> travel websites where when you move your cursor on a date field, you see a little pop-up which allows you to pick a date.</p></br>
            <p>Departure date:<input type="text" id="departure"></p>
            <p>Returning date:<input type="text" id="returning"></p>
            <button>Submit</button>
    </body>
于 2013-03-23T21:22:57.990 に答える
0

リクエストした情報は次のとおりです。順序に注意してください。これは、datepicker のJQuery API ページから直接取得したものなので、それに従う必要があります。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

私が見つけたのは、.css ファイルを含めるのを忘れると、JQuery プラグインが機能しない傾向があるということです。既にオンライン バージョンのファイルを参照していたので、その参照を含めました。それでも問題が解決しない場合は、これらのリンクを直接参照して、これらのファイルへのアクセスに問題がないことを確認してください。

引き続き失敗する場合は、ページの読み込み中にコンソールを監視し、エラーがないか確認してください。これは常に、物事を理解し始めるのに適した場所です。

于 2013-03-23T21:52:46.350 に答える