La création de réutilisables html pour la barre de navigation sur plusieurs pages

J'ai pensé qu'il serait agréable d'avoir un code réutilisable, en particulier pour la barre de navigation, car il sera le même dans l'ensemble de mes pages. De cette façon, je n'aurai pas à aller de page en page et de modifier manuellement chacun individuellement lorsqu'un changement se produit.

Il semble possible d'utiliser des iframes, mais je l'ai essayé et l'ensemble de la page, le style est allé hors de contrôle. Je peux le réparer, mais je me demande si il ya quelque chose de similaire.

Il serait génial si quelque chose comme cela pourrait fonctionner:

var navbar = document.getElementById('navbar');
barre de navigation.innerHtml = url('navigation.txt');

Je suis actuellement en train de travailler hors ligne sur mon site, donc je ne pense pas que je peux faire des demandes xmlhttp. - Il Correct? Au moins, j'ai encore pas encore d'obtenir d'ajax exemple au travail. C'est malheureux parce que je pense que je pourrais facilement utiliser ce que mon application.

Voici ma barre de navigation de balisage. Il n'est pas très compliqué, donc j'ai un sentiment que je vais l'éditer manuellement à la fin.

<nav>
    <ul id="navbar">
        <li><a href="biosketch.html">Biosketch</a></li>
        <li><a href="projects.html">Class Projects</a>
            <ul>
                <li><a href="projects.html#SeniorProject">Senior Project</a></li>
                <li><a href="projects.html#WindTurbine">Wind Turbine</a></li>
            </ul>
        </li>
        <li><a href="#">Resume</a></li>
        <li><a href="#">Work Experience</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>

OriginalL'auteur ptpaterson | 2011-01-05

3

Comme il a été dit, typiquement, cela se fait côté serveur avec un include pour les non AJAX sites. Cependant, je pense que vous pouvez faire usage de google fermeture de modèles. Essentiellement, vous devez définir un modèle dans leur création de modèles de langue, qui génère une fonction javascript que vous pouvez appeler pour rendre votre code HTML.

http://code.google.com/closure/templates/docs/helloworld_js.html

Exemple:
```
--templates.soy

{namespace templates}

{template .nav}
<ul id="navbar">
    <li><a href="biosketch.html">Biosketch</a></li>
    <li><a href="projects.html">Class Projects</a>
        <ul>
            <li><a href="projects.html#SeniorProject">Senior Project</a></li>
            <li><a href="projects.html#WindTurbine">Wind Turbine</a></li>
        </ul>
    </li>
    <li><a href="#">Resume</a></li>
    <li><a href="#">Work Experience</a></li>
    <li><a href="#">Contact Me</a></li>
</ul>
{\template}
```
Ensuite, vous exécutez la commande suivante pour compiler dans une fonction javascript
```
java -jar SoyToJsSrcCompiler.jar --outputPathFormat templates.js  templates.soy
```
Cela va générer un fichier appelé templates.js contenant une fonction appelée modèles.nav lequel vous pouvez appeler à partir de votre page comme suit:
```
document.getElementById('navbar').innerHTML = templates.nav();
```
Ce n'est même pas à l'aide de la fusion des données, ce qui permettrait de passer d'un objet de données pour afficher le code HTML qui n'est pas statique. Mais j'ai seulement montré ce depuis qu'il est tout ce que vous avez demandé. Je sais que vous pouvez simplement coller le code html dans un JS chaîne aussi, mais vous l'avez à traiter avec l'absence de la syntaxe de l'aide de votre éditeur.

Le seul inconvénient est que cela nécessite JS que vous ne semblez pas à l'esprit. Toutefois, si vous voulais support JS-moins de clients, vous pouvez générer le modèle sur le côté serveur. Il y a aussi un compilateur qui génère Java google fermeture méthodes. Vous pouvez regarder sur leur site web.

Espère que cela aide.

Ce qui est très cool. Je vais certainement vérifier cela. Je me rends compte aussi que si je vais à la publication de tout sur les sites de connaître php/asp sera important, donc je vais devoir commencer à travailler sur ce à bientôt.
Je vous suggère d'aller encore plus loin, puisque vous jouez avec elle. Il y a probablement un autre bloc de code html que vous utilisez pour enrouler l'ensemble de la page. En font un modèle également, ainsi il est plus facile de modifier l'aspect global. Ce modèle pourrait appeler la valeur liquidative de modèle à l'intérieur de lui-même.

OriginalL'auteur Juan Mendes
2

Utiliser un langage côté serveur pour créer une navigation de fichier. Il peut être statique ou il peut être extrêmement complexe, il est à vous.
```
<?php include 'includes/nav.php'; ?>
```
contenu de nav.php peut être le <nav> élément entièrement. Vous pouvez idéalement programme pour afficher/masquer des éléments basés sur le courant "section", et également basculer certaines classes en fonction de la section.

OriginalL'auteur meder omuraliev
1

Vous pouvez utiliser les appels AJAX "hors ligne", comme vous dites, c'est côté client code.

Mais la façon dont je le ferais si je n'étais pas à l'aide d'un langage côté serveur (ASP.NET ou PHP) est d'avoir un petit .fichier js qui rend la barre de navigation, et je voudrais juste ajouter un <script src='js/navbar.js'></script> où la barre de navigation.

De cette façon quand vous avez besoin de le changer, vous ne changer la .js et il mettrait à jour dans toutes les autres pages.

OriginalL'auteur Blindy
1

Quelques suggestions:
- Si vous êtes à l'aide de JSP (ou des technologies similaires), vous pouvez simplement utiliser quelque chose comme SiteMesh ici pour aider à la création de modèles
- Vous pouvez utiliser server side includes
- Vous pouvez écrire une fonction JavaScript pour créer par programmation les DOM dont vous avez besoin (sans AJAX nécessaire) et puis il suffit d'appeler cette fonction JS tout au long de vos pages (pas de duplication de code)
OriginalL'auteur kvista
0

Normalement, ces types de ré-utilisable morceaux de mark-up sera généré côté serveur, principalement par le biais d'un moteur de template.

Vous pouviez changer de Firefox paramètres de sécurité pour permettre la connexion des appels AJAX, mais il est probablement préférable de configurer un environnement local de développement où vous pouvez commencer à utiliser un langage côté serveur, et de le faire correctement dès le début.

OriginalL'auteur Jop de Klein

Si vous souhaitez la mettre en œuvre, sans le côté serveur de codage impliqués, essayez ceci:

var http = false;

if(navigator.appName == "Microsoft Internet Explorer") {
  http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  http = new XMLHttpRequest();
}

http.open("GET", "navigation.txt");
http.onreadystatechange=function() {
  if(http.readyState == 4) {
    var navbar = document.getElementById('navbar');
        navbar.innerHtml = http.responseText;
  }
}
http.send(null);

Lorsque je l'exécute j'ai "origine de la Croix demandes sont prises en charge uniquement pour HTTP."

OriginalL'auteur Chandu

0

Si vous allez utiliser le même code, il peut être préférable de créer un fichier séparé et de le mettre en œuvre dans les différentes pages web.

Il est possible par le biais de ce: https://www.w3schools.com/howto/howto_html_include.asp

Vous écrivez à la barre de navigation du html dans un document distinct .fichier html et appelez-le comme ceci:

<div w3-include-html="content.html"></div>

Alors appel à une fonction javascript à partir de
```
<script src="https://www.w3schools.com/lib/w3data.js"></script> 
```
qui est w3IncludeHTML();

Et vous devriez avoir cela en place! Espérons que cela a aidé! 🙂

OriginalL'auteur Ananth Vivekanand

Vous devez vous connecter pour publier un commentaire.