0

このページと同じコードを実行して、入力に日付ピッカーを追加しようとしています: http://jqueryui.com/demos/datepicker/ このページで入力ボックスをクリックすると、日付ピッカー テーブルが表示されます。 . これは私のページへのコードです:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/jquery.js"></script>
        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/datepicker.js"></script>
        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/widget.js"></script>   
        <link rel="icon" 
              type="image/png" 
              href="#{facesContext.externalContext.requestContextPath}/resources/images/askbirdfavicon.png"/>
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/form.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/datepicker.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/adminnavbar.css" rel="stylesheet" type="text/css" />
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
        <title>AskBird</title>
    </h:head>
<h:body>
        <h:form id="form" >                                  
                <script>
                    $(function() {
                        $( "#datepicker" ).datepicker();
                    });
                </script>
                <div class="demo">

                    Date: <input type="text" id="datepicker" class="hasDatepicker"/>

                </div><!-- End demo -->               
            <script>

                $(document).ready(function () {
                    $("p").text("The DOM is now loaded and can be manipulated.");
                });                                
            </script>
            <p>Not loaded yet.</p>    
</h:form>
    </h:body>
</html>

私のjqueryライブラリは確実にロードされています.

ここに画像の説明を入力

また、datepicker.js ライブラリが読み込まれていることを確認するために、「datepicker」の ID を持つ空の div をコードに追加して、ページにカレンダーが表示されるようにしました。（再び写真に表示されます）。問題は、入力をクリックしても何もポップされないことです。それが、上で提供したページでの仕組みだからです。私が間違っていると思いますか？

4

2 に答える 2

1

jquery-ui JSおよびCssファイルへの参照はどこにありますか？

コードもラップしてみてください：

$（document）.ready（function（）
{{
    $（ "#datepicker"）.datepicker（）;
}）;
于 2012-10-08T12:42:21.010 に答える
1

JSをロードしましたが、CSS をロードしていません。

jquery ui cssファイルをロードしていません。これが問題です。ロードすると機能します。

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.cssを追加する か、jquery ui サイトから css と画像をダウンロードします。

編集: また、jquery ui-core js ファイルが表示されませんか? 含めましたか？

http://jqueryui.com/download、このリンクを読んでください。日付ピッカーが機能するために必要なファイルがいくつかあります。

作業例: http://jsfiddle.net/tbYPf/30/

于 2012-10-08T12:43:34.263 に答える