この例では、ブートストラップを使用するナビゲーションバーのデザインが含まれているform.htmlページが1つあります。他のページはコンテンツとjqueryスクリプトだけを含むcontent.htmlページです。コンテンツページの 例：私は、ナビゲーションバーにメッセージ]タブをクリックします例えばブートストラップとjqueryを使用してウェブサイトを変更するコンテンツ
<body><h1>hello world!</h1></body>
<--jquery script calling another function from a .js file-->
私はform.htmlにアクセスし、それはform.html
内部content.htmlを表示するには、私の質問はそれがいかにあります完了しました。設計をコピー＆ペーストする必要がなく効率的です。それはjqueryの機能ですか？それのためのオンラインtuturialsはありますか？私は解決策を見つけることができません。
以下のリンクを参照してください、あなたは、リンクについては
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajax
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_text_set
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_replacewith
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello world!");
});
});
</script>
</head>
<body>
<button>Set text content for all p elements</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>アイデアを、得ることができ、Iヘクタール処理されたリンクに従ってgifを読み込んでいる間にコンテンツを動的に変更するためのコードを追加しました。リンクが処理されると、読み込み中の画像にそれぞれのコンテンツが表示されます。 以下のオーバーレイ機能は、gifイメージの読み込みに使用されます。
<script>
var overlay = {
click_on_overlay_hide : true,
show_loading_image : true,
loading_image : "images/loading.gif",
$ : function(id) {
return document.getElementById(id);
},
init : function() {
var ol_div = document.createElement("div");
ol_div.id = "overlay";
ol_div.style.display = "none";
ol_div.onclick = (this.click_on_overlay_hide) ? overlay.hide : null;
if (this.show_loading_image) {
var l_img = document.createElement("img");
l_img.src = this.loading_image;
l_img.style.position = "absolute";
l_img.style.top = (((window.innerHeight) ? window.innerHeight
: document.body.clientHeight)/2)
+ "px";
l_img.style.left = (((window.innerWidth) ? window.innerWidth
: document.body.clientWidth)/2)
+ "px";
ol_div.appendChild(l_img);
}
document.body.appendChild(ol_div);
},
show : function() {
if (this.$("overlay")) {
this.$("overlay").style.display = "";
}
},
hide : function() {
if (overlay.$("overlay")) {
overlay.$("overlay").style.display = "none";
}
}
}
function First() {
document.getElementById("di").innerHTML = "";
document.getElementById("di").innerHTML = "<center><h6>I am First</h6></center>";
}
function Second() {
document.getElementById("di").innerHTML = "";
document.getElementById("di").innerHTML = "<center><h6>I am Second</h6></center>";
}
</script>
<body onload=overlay.init();">
<div style="display: none;" id="overlay">
<h1>
<img class="centerImg" src="images/loading.gif">
//Below tag content will change according to the link processed
<div id="di">Processing the url...</div>
</h1>
</div>
//First link
//It will call the First() and changes the content of id="di" into "I am First" ,displayed along with the gif image,till the href link is processed.
<a href="services/dealjson/first" onclick="First(); overlay.show(); setTimeout('overlay.hide()', 20000)">FIRST</a>
//Second link
<a href="services/dealjson/second" onclick="Second(); overlay.show(); setTimeout('overlay.hide()', 13000)">SECOND</a>
</body>
ちょうどリンクすればどうですか？ボタンではありません。 – guwop69
フォーム/コンテンツページが同じデザイン/ナビゲーションバーをどのように共有しているかを尋ねているとします。もしそうなら、これを行うにはいくつかの方法があります。
あなたは 'コピーせずに、他のHTMLページにform.html include' nは再び同じデザインを貼り付けることができます。 – Bhugy
@Bhugyはい、私は彼が 'include'を使わずにどのようにしたのか知りたいと思います。 – guwop69
あなたはこのウェブサイトへの参照やこれが見つかったものを提供できますか？ – Bhugy