0

jQuery モバイル 1.3.2 を使用して、アプリケーションの状態に基づいてデータ テーマを反映するように初期ログイン画面を更新したい PhoneGap アプリケーションがあります。ログインページのhtmlは次のとおりです。

ログインhtml：

<div id="login" data-role="page">

    <div data-role="header">
        <h1>Survey login</h1>
    </div>



    <div data-role="content">
        <!--div id="logincontent"></div-->

        <form id="form-login">
            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="login-password">Password:</label>
                <input type="password" name="login-password" id="login-password" value="" placeholder="Password" />
            </div>
            <a href="#" id="login-button" data-role="button" onclick="checkLogin()">Login</a>
        </form>
    </div>



    <div data-role="footer" id="login-footer" data-theme="a">
        <h4 id="login-footer-header">UIC &amp; EVL</h4>
    </div>

</div>

ログインページのテーマを変更するJS関数：

    function displayAppStatus(type){
        if(type == 'suspend'){
            $("#login").page({theme:'g'});
            $("#login").trigger('create');
            $("#login-footer-header").text("Log in to break suspension");

        }
        else if(type == 'bedtime'){
            $("#login").page({theme:'f'});
            $("#login").trigger('create');
            $("#login-footer-header").text("Log in to break bedtime");
        }
        else if(type == 'delay'){
            $("#login").page({theme:'h'});
            $("#login").trigger('create');
            $("#login-footer-header").text("Log in to break delayed notification");
        }
        //Cancel appStatus display
        else if(type == 'cancel'){
            $("#login").page({theme:'a'});
            $("#login").trigger('create');
            $("#login-footer-header").text("UIC & EVL");
        }
    }

リンクされたスタイルシートとスクリプト(念のため):

    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/themes/ecig/ecig_themes.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.css" />

    <script src="cordova.js"></script>

    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>

また、ユーザーが通知を遅らせたり、通知を一時停止したり、アプリをスリープ状態にしたりした場合は、コード全体で displayAppStatus を呼び出します。

何が起こるかというと、ログイン ページが正しいデータ テーマの色で点滅しますが、ページのテーマはすぐにデフォルトに戻ります。

私はここにいます： JQuery Mobile data-themeを動的に変更 し、 jQuery mobileがページにテーマを動的に追加しました

しかし、これらのスレッドのどちらも私の問題を解決していません。

4

1 に答える 1

0

jquery mobile は、スタイルを適用するために、コードに表示されない多くの CSS を作成するため、特に注意が必要です。

機能しているコードを貼り付けて、製品カテゴリに基づいてページのコードを変更できるようにします。ここでは、主にナビゲーション、ヘッダー、フッターのスタイルを変更していますが、変更したいクラスを関数に渡すだけです。

それが役に立てば幸い！

これが私が関数「Element_theme_refresh」を呼び出す方法です。newTheme は基本的に jquery モバイル テーマ名です。

function UpdateNavBarStyles ()
{
    var newTheme = AssignMeTheme ( sessionStorage.categoriaID );
    Element_theme_refresh ( '#pag_fichaProducto', newTheme );
    Element_theme_refresh ( '.ui-header', newTheme );
    Element_theme_refresh ( '.ui-footer', newTheme );
    Element_theme_refresh ( '.menuPanelButton', newTheme ); // Once the collapsible exists, update its theme
    Element_theme_refresh ( '.backButton', newTheme );          // Back button, apply new theme
    Element_theme_refresh ( '.quoteBtn', newTheme );            // Quote Cart widget button, update its theme
    Element_theme_refresh ( '.syncroBtn', newTheme );           // Data Syncronization button, update its theme
}

そして、ここに実際の機能があります。

/* This function query the element for the current applied jquery mobile theme and change
it to the input data-theme or swatch */
function Element_theme_refresh( element, newTheme )
{
    var curTheme = $(element).attr('data-theme') || 'a';

    $(element).attr('data-theme', newTheme);

    if( $(element).attr('class') ) {
        // Theme classes end in "-[a-z]$", so match that
        var classPattern = new RegExp('-' + curTheme + '$');
        newTheme = '-' + newTheme;

        var classes =  $(element).attr('class').split(' ');

        for( var key in classes ) {
            if( classPattern.test( classes[key] ) ) {
                classes[key] = classes[key].replace( classPattern, newTheme );
            }
        }

        $(element).attr('class', classes.join(' '));
    }
}
于 2014-03-09T20:24:40.303 に答える