Мобильный стиль jquery применяется для всего проекта - почему? - PullRequest
1 голос
/ 21 октября 2011

Я хочу, чтобы только целевая страница была стилизована с помощью 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 mobile, когда я захожу через эту страницу. Почему это? Является ли ist, потому что импорт через тег "ссылка" делает его глобальным для всего проекта? заранее спасибо Даниэль

edit: страница, на которую вы заходите после входа в систему (должен иметь нормальный стиль:)

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

edit: это заголовок файла 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/>

Ответы [ 2 ]

2 голосов
/ 21 октября 2011

Как я понимаю, вы добавили jquery-mobile в основной макет (layout/layout.gsp), а ваша login.gsp страница расширяет его (это <meta name="layout" content="layout"/>)

Лучше сделать два макета:

  • /views/layout/mobile.gsp - для мобильных страниц
  • /views/layout/browser.gsp - для стандартных страниц

и расширяйте только тот макет, который необходим для текущей страницы.

Подробнее о разметке Grails можно узнать по адресу http://grails.org/doc/latest/guide/6.%20The%20Web%20Layer.html#6.2.4%20Layouts%20with%20Sitemesh

0 голосов
/ 11 июля 2012

Относительно:

, когда я создаю макет "mobile" и импортирую его на страницу loginMobile, и только там стиль jquery Mobile снова применяется ко всему проекту.

Насколько я понимаю из истории этого вопроса, возможно, это связано с тем, что по умолчанию включен ajax.

Вы пытались использовать атрибут data-ajax="false"Например, на ссылку / кнопку отправки?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...