0

私はその問題を解決するために正午過ぎの時間を費やしています (私は jQuery mobile 1.4.5 を使用しています)。

この方法で、フッターにメニューを動的に作成します。

$(document).on("pagebeforecreate", function(event) {

    var $maPage = $(event.target);
        var html    = '<div data-role="navbar">'
                + '<ul id="menu">'
                + '<li><a href="#home" data-rel="location" data-icon="location" data-transition="slide"></a></li>'
                + '<li><a href="#graph" data-rel="graph" data-icon="bars" data-transition="slide"></a></li>'
                + '<li><a href="#alarm" data-rel="alert" data-icon="alert" data-transition="slide" id="link-alarm" class="green"></a></li>'
        + '<li><a href="#preferences" data-rel="preferences" data-icon="gear" data-role="button" data-transition="slide"></a></li>'
                + '<li><a href="#info" data-rel="info" data-icon="info" data-transition="slide"></a></li>'
                 + '</ul>'
                + '</div>';
    
    // On transforme mon HTML brut en objet jQuery pour le manipuler facillemrnt
    var $navBar = $(html);
    // On recupère l'Id de la page en cours
    var idPage = $maPage.attr('id');
    
    // On recupère le bouton qui corresponf a l'id de la page en cours, pour lui ajouter les classes ui-btn-active et ui-state-persist
    //$navBar.find('a[href="#' + idPage + '"]').addClass('ui-btn-active ui-state-persist');
    
    $maPage.find('div[data-role="footer"]').html($navBar);
});

アラーム リンクでは、アラームがない場合に緑色の背景を追加するクラス グリーンです。

クラスを変更する一時的な関数を作成しました。アラームがない場合は 0 である localStorage 変数を参照し、アラームの量に応じて数が増加します。

function checkRed() {
   /*
    * Journal
    */
    
    ls_journal = JSON.parse(window.localStorage.getItem('journal'));
    //alert(ls_journal.length);

    if(ls_journal.length > 0) {
        //alert('add red');
        $('#link-alarm').removeClass('green').addClass("red");
    }
    else
    {
        //alert('add green');
       $('#link-alarm').removeClass('red').addClass('green');
    }
}

ホームページには、駅のローカリゼーションを含むマップがあります。MySQL リクエストはステーションのステータスをリクエストしており、温度が低すぎる場合はアラームが鳴り、アラーム リンクの背景を赤にする必要があります。

ホームページにいる間は問題なく動作しますが、別のページに移動すると遷移が発生しません。つまり、アラーム リンクの背景は緑色のままで、クラスは緑色のままです。

赤の時もありますが、ほとんどの場合は緑です。

私の問題はハンドラーに関連している可能性があると思いますが、checkRed()別のハンドラーで関数を呼び出そうとしました

$(document).on( "pagecontainertransition", function( event, data ) {
        checkRed();
        //$('#menu').listview(); // That do not work well
});

$(document).on( "pageshow", function( event, data ) {
        checkRed();
        //$('#menu').listview(); // That do not work well
});

$(document).on( "pagecontainertshow", function( event, data ) {
        checkRed();
        //$('#menu').listview(); // That do not work well
});

私の目標は本当に単純ですが、それを機能させるには非常に問題があります。

ls_journal = JSON.parse(window.localStorage.getItem('journal'));

ls_journal が 0 より大きい場合、遷移後のすべてのページ (pagebeforecreate、pageshow など) から、アラーム背景リンクは常に緑色である必要があります。

id が 0 の場合、背景は緑でなければなりません。

特定の時点でナビを更新する方法があるかどうか、本当に疑問に思いますか？私は成功せずに試しました

$('#menu').listview()
$('#menu').listview('refresh');

助けてくれて本当にありがとうございます

4

0 に答える 0