我只希望使用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> 

如您在表格Im中看到的,后端使用grails。我的问题是,当我通过此页面登录时,所有其他页面也都显示了jquery移动样式。为什么? ist是因为通过“link”标签进行导入使其在整个项目中都具有全局性吗?
在此先感谢Daniel

编辑:登录后登陆的页面(假定具有正常样式:)
  <%@ 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/> 

请您参考如下方法:

据我了解,您已经将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布局的更多信息


    评论关闭
    IT序号网

    微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!