0

AJAX と jQuery の使用方法やその仕組みについてはほとんどわかりませんが、Struts 2 フレームワークを使用して単純なログイン Web アプリケーションを作成したいと考えています。

次のようなログインページテンプレートをネットから入手しました。

<html>
<head>
  <link href="css/style.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(".username").focus(function() {
          $(".user-icon").css("left","-48px");
      });
      $(".username").blur(function() {
          $(".user-icon").css("left","0px");
      });

      $(".password").focus(function() {
          $(".pass-icon").css("left","-48px");
      });
      $(".password").blur(function() {
          $(".pass-icon").css("left","0px");
      });
    });
  </script>
</head>

<body>
  <div id="wrapper">
    <div class="user-icon"></div>
    <div class="pass-icon"></div>

    <form name="login-form" class="login-form" action="" method="post">
      <div class="header">
        <h1>Login Form</h1>
        <span>
          Fill out the form below to login to my super awesome imaginary control panel.
        </span>
      </div>

      <div class="content">
        <input name="username" type="text" class="input username" value="Username" onfocus="this.value=''" />
        <input name="password" type="password" class="input password" value="Password" onfocus="this.value=''" />
      </div>

      <div class="footer">
        <input type="submit" name="submit" value="Login" class="button" />
        <input type="submit" name="submit" value="Register" class="register" />
      </div>
    </form>
  </div>

  <div class="gradient"></div>
</body>
</html>

フレームワークを使用するには、tag-libs ディレクティブを含め、ファイルの名前を .jsp タイプに変更してから、<form>タグを<s:form>andに変更しました</s:form>。

それを行った後、テンプレートの書式設定が失われます。struts2-jquery プラグイン jar をダウンロードして使用しようとし<sj: form>ましたが、コンパイル エラーが発生しました。

テンプレートのフォーマットとデザインを失わずに struts タグを使用するにはどうすればよいですか?

編集：

http://imgur.com/GKV4b0P,51RmXhP

<form>ここでは、 and</form>を<s:form>and</s:form>に編集し、tag-lib ページ ディレクティブを追加するとどうなるかを確認できます。

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

また、拡張子を .jsp に変更し、他には何も編集しませんでした。

4

2 に答える 2

0

使用する

<s:form name="login-form"  theme="simple" class="login-for...
于 2013-06-05T10:34:02.840 に答える
0

Struts2 はテーマを使用して HTML を生成します。

テーマごとに、同じStruts2 タグ( など<s:select/>) が異なるHTML を生成します。

デフォルトのテーマ (何も指定されていない場合に適用されるテーマ) はXHTML Themeです。

それに伴い、タグ

<s:select key="personBean.sport" list="sports" />

次の HTML を生成します。

<tr>
  <td class="tdLabel">
    <label for="save_personBean_sport" class="label">Favorite sport:</label>
  </td>
  <td>
    <select name="personBean.sport" id="save_personBean_sport">
      <option value="football">football</option>
      <option value="baseball">baseball</option>
      <option value="basketball" selected="selected">basketball</option>
    </select>
  </td>
</tr>

ここでは、すぐに使える 4 つのテーマのリストを見つけることができます。

必要に応じて、自分でロールアップすることもできます。

個人的には、できるだけ少ない HTML を生成し、タグの周りの HTML の生成はあなたに任せるシンプル テーマを好みます。

タグで使用するには、次のように追加するだけです。

<s:select ... theme="simple" />

プロジェクト内のすべての JSP のデフォルト テーマとして設定するには、struts.xml ファイル内に次の行を追加します。

<constant name="struts.ui.theme" value="simple" />

CSS クラスをStruts2 タグに追加するには、常に;cssClassの代わりに使用します。class

インライン StyleをStruts2 Tagに追加するには、常にcssStyle代わりにstyle

これで、コンポーネントを思い通りに描画するために必要なものがすべて揃いました。結果の HTML と CSS はあなた次第です。

于 2013-06-05T12:03:32.560 に答える