Question

我只希望使用Jquery设置着陆页的样式。这是一个登录页面，当用户使用手机登录时，它应该显示通常的样式

<%@ page contentType="text/html;charset=UTF-8" %>

<html><!-- lol-->
<head>
<title>myApp/title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>

<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>


<script type="text/javascript" cahrset="utf-8">


</script>
</head>
<body>


<div data-role="page" id="start" data-theme="d">
<div data-role="header">

<a href="http://www.fhws.de" data-icon="check">Kontakt</a>
</div>
<div class="ui-body ui-body-d">
    <g:form controller="login" action="doLogin">
        <div class="ui-grid-a">
            <div class="ui-block-a"><input type="text" name="userNameField" id="username" value="Matrikelnummer" /></div>
            <div class="ui-block-b"><input type="password" name="passWordField" id="password" value="Passwort" /></div>
        </div>

            <input type="submit" data-theme="d" name="loginButton" id="login" value="Login" />

    </g:form>
</div>

</body>   
</html>

正如您在表单中看到的，我使用grails作为后端。我的问题是，当我通过此页面登录时，所有其他页面也显示jquery移动样式。为什么？是不是因为通过“link”标签导入使整个项目全局化？在此先感谢丹尼尔

编辑：登录后登陆的页面（应该具有正常样式:)

  <%@ page import="groovy.sql.ExpandedVariable; iwinews.User; iwinews.Category" %>
  <html>
 <head>
<meta name="layout" content="layout"/>
<script type="text/javascript">

    var scroll_lock = false
    var more_url = '${createLink(action:"singleNewspost")}';
    var newsposts_by_category_url = '${createLink(action:"newspostsByCategory")}';
    var all_newsposts_url = '${createLink(action:"allNewsposts")}';
    var subscribed_newsposts_url = '${createLink(action:"subscribedNewsposts")}';
    var filter_shown_categories_url = '${createLink(action:"filterShownCategories")}';
    var search_url = '${createLink(action: "search")}';

    var filterTypes = {
        search : 0,
        category : 1,
        alle_kategorien : ${Category.ALLE_KATEGORIEN},
        meine_kategorien : ${Category.MEINE_KATEGORIEN}
    };

</script>

<script type="text/javascript">

</script>
</head>

<body>

 <content tag="search">
<div id="_searchbox">
    <input id="search"/></div>
  </content>

  <content tag="menu">
 <h6>News-Kategorien:</h6>
 <select id="kategorien_dropdown" class="grid_2">
    <option id="${Category.ALLE_KATEGORIEN}" ${selectedCategory == Category.ALLE_KATEGORIEN ? "selected=\"selected\"" : ""}>alle Kategorien</option>
    <option id="${Category.MEINE_KATEGORIEN}" ${selectedCategory == Category.MEINE_KATEGORIEN ? "selected=\"selected\"" : ""}>meine Kategorien</option>
</select>

<div id="filteredKategorien">
    <g:render template="filteredKategorienTemplate" model="${categories}"/>
</div>
</content>

编辑：这是layout / layout.gsp文件的头部

<%@ page import="iwinews.REVISION; iwinews.CONSTANTS; iwinews.User; iwinews.Category" %>

<meta charset="utf-8"/>
<title><g:layoutTitle default="${CONSTANTS.PAGE_TITLE} /></title>
<style type="text/css">

</style>
<link rel="shortcut icon"
      href="${resource(file: 'favicon.ico')}"/>
<link rel="stylesheet" href="${resource(dir: 'styles', file: 'reset.css')}"/>
<link rel="stylesheet" href="${resource(dir: 'styles', file: '960_12_col.css')}"/>
<link rel="stylesheet" href="${resource(dir: 'styles', file: 'default.css')}"/>


<g:javascript library="jquery"/>
<g:javascript library="jqModal"/>
<g:javascript library="jquery.cookie"/>
<g:javascript library="jquery.form"/>
<g:javascript library="application"/>


<g:layoutHead/>

Answer 1

据我了解，您已将jquery-mobile添加到主要布局（layout/layout.gsp）并且您的login.gsp页面扩展了它（<meta name="layout" content="layout"/>）

最好制作两种布局：

/views/layout/mobile.gsp - 适用于移动页面
/views/layout/browser.gsp - 标准页面

并扩展当前页面所需的布局。

您可以在http://grails.org/doc/latest/guide/6.%20The%20Web%20Layer.html#6.2.4%20Layouts%20with%20Sitemesh

了解有关Grails布局的更多信息

Answer 2

关于：

当我创建一个“mobile”布局并将其导入loginMobile页面时，只有那里，jquery Mobile样式再次适用于整个项目。

据我从这个问题的历史中了解，可能是因为默认情况下启用了ajax。

您是否尝试过使用data-ajax="false"属性，例如在提交链接/按钮上？

jquery移动风格适用于整个项目 - 为什么？

2 个答案: