-1

サンプル jsf アプリケーションを作成し、jquery を使用しようとしています。jquery.js ファイルはどのディレクトリに配置する必要がありますか? web-inf? ソース？.js ファイルをダウンロードしましたが、動作していないようです。私はそれがどこにあるべきかわかりません。

googleapis を指すようにコードを更新しましたが、まだ機能しません。

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <title>Facelet Title</title>
</h:head>
<h:body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
        $(document).ready(function(){
            $("#p1").mouseenter(function(){
                alert("You entered p1!");
            });
        });
    </script>
    <p id="p1">Enter this paragraph.</p>
</h:body>

4

7 に答える 7

2

ファイルへの正しいパスを指定する限り、どこにでも保持できます。ただし、ディレクトリから遠ざけるようにしてくださいWEB-INF。そのディレクトリの下にはプライベート ファイル (ユーザーが直接アクセスできないファイル) のみを保持してください。

ディレクトリがある場合はweb-content、jquery ファイルをそのweb-content\jsディレクトリの下に置いて、 経由でアクセスできるようにします<path-to-your-app>/js/jquery.js。

ただし、jQueryのダウンロード セクションにある CDN バージョンのファイルを使用してみてください。GoogleまたはMicrosoftのCDNを使用できます。

于 2013-01-24T04:01:12.693 に答える
1

JSF2を使用している場合は、JSF2リソース管理システムを利用できます。つまり、次のように、CSS / JS/imageリソース/resourcesをパブリックWebコンテンツのフォルダーにドロップします。

WebContent
 |-- resources
 |    |-- css
 |    |    `-- style.css
 |    |-- js
 |    |    `-- script.js
 |    `-- img
 |         `-- logo.png
 :

これらは、次のコンポーネントで利用できます。

<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="img/logo.png" />

したがって、特定のケースでは、次のように保存する必要があります/resources/js/jquery-1.9.0.min.js。

WebContent
 |-- resources
 |    `-- js
 |         `-- jquery-1.9.0.min.js
 :

そしてそれを次のように参照してください：

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <title>Facelet Title</title>
    <h:outputScript name="js/jquery-1.9.0.min.js" />
</h:head>
<h:body>
    <h:outputScript target="body">
        $("#p1").mouseenter(function(){
            alert("You entered p1!");
        });
    </h:outputScript>
    <p id="p1">Enter this paragraph.</p>
</h:body>

注：は<h:outputScript target="body">自動再配置され、その終わりは。<body>より早くヒットし$(document).ready()ます。

参照：

于 2013-01-24T11:49:41.883 に答える
1

関係ありません。最も重要なのは、正しいパスを指定する必要があることです。

例えば：

<script language="javascript" src='script/jquery-1.6.min.js'></script>

また、jquery を含む html ファイルは、スクリプト フォルダーと一緒に配置する必要があります。

于 2013-01-24T04:09:10.727 に答える
0

Web アプリで、resources次のフォルダーjsの次のフォルダーにjquery.jsJavaScript ファイルで名前を付け、この有効な JavaScript ファイル内に、バージョンの構文に一致する名前を付けます (例: ) 1_6.js。

したがって、あなたの例では次のようになります。

<your_web_app>/resources/js/jquery_min.js/1_6.js

これは正しい JSF の方法です。これで、jsf ページで使用できます。

<h:outputScript library="js" name="jquery_min.js"/>

また、すべてのバージョンは JSF フレームワークによって管理されます。1_7.js次のバージョン、おそらく 1_7 を追加すると、フォルダーにファイル名が付けられjquery_min.js、JSF は自動的に上記のコードからそのバージョンのファイルを呼び出します。

于 2013-01-24T10:13:54.987 に答える
0

jquery ライブラリは、Web アプリケーションのフォルダーWebContent内のディレクトリに配置できます。resources

WebContent
   ->resources->js->jquery-latest-version.js

指定することで、JSFページにjqueryを含めることができます。

<h:outputScript name="js/jquery-latest-version.js" />

html内<head>またはページの下部にもあります。

于 2013-01-24T05:58:24.103 に答える
0

正しいパスを提供している限り問題ありません。今のところ、ほとんどの場合、Google がホストする jquery ライブラリを使用しています。これにより、トラフィックのプレッシャーが軽減されます..

あなたはそれを試すことができます Googleがホストするライブラリ

リンクの前に http または https を付ける必要があることに注意してください。

于 2013-01-24T03:59:54.567 に答える
0

スクリプト ファイルをWebResources/WebContentフォルダー (任意のリソース フォルダー、ただしパスは正しい必要があります) に保持し、スクリプト ファイルの読み込みに

使用h:outputScriptできます:(リファレンス)

 <h:outputScript name="js/jquery-1.6.2.js" />

RichFaces を使用している場合はパスを配置します。

<a4j:loadScript src="resource:///pathToFile/jquery-1.4.2.min.js" />

Google CDN の追加:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

参照: xhtml の jQuery

シナリオ:以下のようなコードを使用します。

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <title>Facelet Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
</h:head>
<h:body>
   <script type="text/javascript">
        $(document).ready(function(){
            $("#p1").mouseenter(function(){
                alert("You entered p1!");
            });
        });
    </script>
    <p id="p1">Enter this paragraph.</p>
</h:body>

または

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
            $(document).ready(function(){
                $("#p1").mouseenter(function(){
                    alert("You entered p1!");
                });
            });
        </script>

デモ:
Live Example1 (本文に Google CDN を追加)
Live Example2 (ヘッダーに Google CDN を追加)。

于 2013-01-24T04:16:41.747 に答える