Question

我几乎不知道如何使用AJAX和jQuery，或者它是如何工作的，但我想使用Struts 2框架创建一个简单的登录webapp。

我从网上获得了一个登录页面模板，如下所示：

<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>和</s:form>。

执行此操作后，它会丢失模板的格式。我下载了struts2-jquery插件jar并尝试使用<sj: form>，但这导致编译错误。

如何使用struts标记而不会丢失模板的格式和设计？

编辑：

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

在这里，您可以看到当我编辑<form>和</form>到<s:form>和</s:form>时会发生什么，并添加tag-lib页面指令：

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

我还将扩展名更改为.jsp并且没有编辑任何其他内容。

Answer 1

使用

<s:form name="login-form"  theme="simple" class="login-for...

Answer 2

Struts2使用Themes to generate the HTML。

对于每个主题，相同的 Struts2标记（如<s:select/>）将生成不同的 HTML。

默认主题（未指定任何内容时应用的主题）是 XHTML主题。

用它，标签

<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>

Here you can find the list of the four out-of-the-box themes

如果有必要，你甚至可以卷起自己的。

我个人更喜欢简单主题，它会生成尽可能少的HTML，让您在标记周围生成HTML。

要在标记中使用它，只需将其添加如下：

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

要将其设置为项目中所有JSP的默认主题，请将以下行放在struts.xml文件中：

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

要将 CSS类添加到 Struts2标记，请始终使用cssClass代替class;

要向 Struts2标记添加内嵌样式，请始终使用cssStyle代替style

现在，您拥有了完全按照自己的意愿绘制组件所需的一切：生成的HTML和CSS由您决定。

使用struts标记前缀和ajax

2 个答案: