jquery en-tête/pied de page mobile

Je n'ai pas de pages jquery ayant chacune un en-tête et un pied de page. Comment puis-je le faire en en-tête unique et pied de page. (ie) Voulez-vous charger les fichiers html en-tête/pied de page dans la section en-tête/pied de page principale.jquery en-tête/pied de page mobile

Veuillez nous consulter.

S'il vous plaît trouver la structure de la page ci-dessous ....

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Single page template</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" /> 

    <script src="js/jquery-1.8.2.min.js"></script> 
    <script src="js/customScript.js"></script> 
    <script src="js/jquery.mobile-1.2.0.min.js"></script> 
</head> 

<body> 

<div data-role="page" id="page1"> 
    <div id="hdr"> 
     <!--Need to include header.html--> 
    </div> 
    <div data-role="content"> 
     <!--Content--> 
    </div> 
    <div id="ftr"> 
     <!--Need to include footer.html--> 
    </div> 

</div> 

</body> 
</html>

Merci à l'avance ....

Source

2013-04-03 Yesvinkumar

d'abord, vous devriez avoir des scripts JQM et des liens de feuille de style dans '' . – Omar

J'utilise ** php ** sur mes devs mobiles avec jQuery mobile avec un fichier ** header.php ** et un autre ** footer.php **. Puis je les appelle avec ' 'sur tous les fichiers nécessaires. – kevin

comment le php fonctionnera dans le mobile ...? pouvez-vous s'il vous plaît fournir un code ... – Yesvinkumar

Vous pouvez utiliser jQuery load():

$(document).ready(function() { 
    $("#hdr").load("header.html"); 
    $("#ftr").load("footer.html"); 
});

Source

2013-04-03 13:08:21 Eli

j'ai utilisé la même chose. Mais les styles ne sont pas mis à jour même si j'ajoute un trigger ('create'). Pouvez-vous s'il vous plaît fournir des échantillons de code, le cas échéant ...? Merci beaucoup ... – Yesvinkumar

Voici un exemple de travail:

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQM Complex Demo</title> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>  
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    <script> 
     $(document).on('pagebeforeshow', '[data-role="page"]', function(){  
      $.mobile.activePage.find('[data-role="header"]').load("header.html", function(){ 
       $(this).parent().trigger('pagecreate'); 
      }); 
      $.mobile.activePage.find('[data-role="footer"]').load("footer.html", function(){ 
       $(this).parent().trigger('pagecreate'); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div data-role="page" id="index"> 
     <div data-theme="a" data-role="header"> 

     </div> 

     <div data-role="content"> 

     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 

     </div> 
    </div>  
</body> 
</html>

header.html

<h3> 
    Header 
</h3>

footer.html:

<h3> 
    Footer 
</h3>

L'astuce consiste à déclencher pagecreate ici (non créer) au style en-tête et pied de page fter contenu a été ajouté par charge fonction.

Lire ce article/answer pour trouver une différence entre

trigger('create')

trigger('pagecreate').

Fondamentalement, pagecreate se recoiffer page entière en créer sera le style que du contenu.

Source

2013-04-03 13:29:55 Gajotres

Salut Gajotres, Merci pour le partage ... Cette solution fonctionne bien pour moi! – Yesvinkumar

@Yesvinkumar, peut-être que vous devriez le marquer comme la réponse. –

tête Ajouter

vérifie s'il n'y a pas en-tête puis .append() l'en-tête .before() div data-role=content.

$(document).on('pagebeforeshow', function() { 
if ($(this).find('[data-role=header]').length == 0) { 
    $('[data-role=content]').before('<div data-role="header"><h1>Page header</h1></div>'); 
    $('[data-role=page]').trigger('pagecreate'); 
} 
});

Ajouter un pied

vérifie s'il n'y a pas de bas de page et .append() le pied de page .after() div data-role=content.

$(document).on('pagebeforeshow', function() { 
if ($(this).find('[data-role=footer]').length == 0) { 
    $('[data-role=content]').after('<div data-role="footer"><h1>Page footer</h1></div>'); 
    $('[data-role=page]').trigger('pagecreate'); 
} 
});

Source

2013-04-03 13:32:04 Omar

var currentPage=$.mobile.activePage; 

$('<div data-role="header" id="myheader"> 
     <a href="" >Home</a> 
     <a href="" >Back</a> 
    </div>').prependTo(currentPage).trigger('create'); 

$('<div data-role="footer" id="myfooter"> 
     <a href="">About Us</a> 
    </div>').appendTo(currentPage).trigger('create');

Source

2014-12-05 09:55:13

jquery en-tête/pied de page mobile

Répondre

Questions connexes