Jak ponownie użyć kodu HTML na każdej stronie html?

powiedzmy mam kod jak poniżej:Jak ponownie użyć kodu HTML na każdej stronie html?

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
#overlay_form{ 
    position: absolute; 
    border: 5px solid gray; 
    padding: 10px; 
    background: white; 
    width: 270px; 
    height: 190px; 
} 
#pop{ 
    display: block; 
    border: 1px solid gray; 
    width: 65px; 
    text-align: center; 
    padding: 6px; 
    border-radius: 5px; 
    text-decoration: none; 
    margin: 0 auto; 
} 
</style> 
<script src="jquery.js"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 
    //open popup 
    $("#pop").click(function(){ 
     $("#overlay_form").fadeIn(1000); 
     positionPopup(); 
    }); 

    //close popup 
    $("#close").click(function(){ 
     $("#overlay_form").fadeOut(500); 
    }); 
}); 

//position the popup at the center of the page 
function positionPopup(){ 
    if(!$("#overlay_form").is(':visible')){ 
     return; 
    } 
    $("#overlay_form").css({ 
     left: ($(window).width() - $('#overlay_form').width())/2, 
     top: ($(window).width() - $('#overlay_form').width())/7, 
     position:'absolute' 
    }); 
} 

//maintain the popup at center of the page when browser resized 
$(window).bind('resize',positionPopup); 

</script> 
</head> 
<body> 

<a href="#" id="pop" >PopUp</a> 
<br /> 
<form id="overlay_form" style="display:none"> 
<h2> Put your contents here..</h2> 
<label>Username: </label><input type="text" name="username" /><br /><br /> 
<label>Password: </label><input type="text" name="password" /><br /><br /> 
<input type="button" value="Login" /> 
<a href="#" id="close" >Close</a> 
</form> 


</body> 
</html>

To jest przykład dialogowe popup. Powiedzmy, że chcę używać tego okna dialogowego na wszystkich moich stronach internetowych (a.html, b.html, c.html i itp.), Jaki jest najlepszy i najłatwiejszy sposób, aby powyższy kod był możliwy do ponownego wykorzystania? Ponieważ uważam, że kopiowanie wklejenia "overlay_form" do każdej strony html nie jest uzasadnione.

Nadal na poziomie początkowym w JavaScript, więc tworzenie wtyczki jQuery jest dla mnie zbyt trudne. Dlatego chciałbym szukać innych sposobów, aby to zrobić. Dzięki.

Źródło

2013-04-06 GMsoF

Można umieścić swój kod w innym .html pliku i załadować go z .load()http://api.jquery.com/load/

$('#targetid').load('somewhere/a.html'); // loads the .html in the #targetid

Źródło

2013-04-06 15:05:28 Spokey

Szukałem w kodzie ponownego użycia i jak jQuery zbliżania się najlepsze, ALE, mam problemy z zastosowaniem mojego css do załadowanych treści. Jaki jest właściwy sposób na zrobienie tego? –

jak dobrze to a.html będzie indeksowane przez GoogleBota? – walv

Najlepszą praktyką, jeśli chcesz wielokrotnie używać kodu, jest umieszczenie całego kodu jQuery w zewnętrznym pliku .js, umieszczenie całego kodu CSS w zewnętrznym arkuszu stylów i odniesienie do tych plików na każdej stronie.

E.g. dla CSS w pliku o nazwie style.css:

<link rel="stylesheet" type="text/css" href="style.css">

i dla jQuery w pliku o nazwie jQueryFunctions.js:

<script type="text/javascript" src="jQueryFunctions.js"></script>

W zakresie tym ten sam kod HTML na różnych stronach, jedna z najprostszych Myślę, że można użyć funkcji PHP include(). Here's a very simple one-page tutorial o ponownym użyciu formularzy HTML na wielu stronach, które go używają.

Źródło

2013-04-06 15:02:51 lifetimes

umieścić wszystkie swoje wielokrotnego użycia kodu w dokumencie HTML i wezwać go do strony za pomocą następującego kodu php:

<?php include("example.html") ?>

Źródło

2013-04-06 16:08:24

Nie myśl, że używa 'php', nie oznaczał tego tagiem. – Spokey

Nie zauważyłem, zostawię odpowiedź na wszelki wypadek ... –

Dostałem odpowiedź, czego szukałem, dziękuję user1102285. –

Modest HTML robi to.

Wygląda to tak:

main.xhtml

<?xml version='1.0' encoding='UTF-8'?> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <include>overlayForm</include> 
    </head> 
    <body> 
    <overlayForm/> 
    </body> 
</html>

overlayForm.xml

<form style="display:none"> 
    <h2> Put your contents here..</h2> 
    <label>Username: </label><input type="text" name="username" /><br /><br /> 
    <label>Password: </label><input type="text" name="password" /><br /><br /> 
    <input type="button" value="Login" /> 
    <a href="#" id="close" >Close</a> 
</form>

Źródło

2013-09-06 01:15:39 GoalBased

Jak ponownie użyć kodu HTML na każdej stronie html?

Odpowiedz

Powiązane problemy