使用引导程序和jquery改变内容的网站

-2

我发现这个例子有一个form.html页面，其中包含使用引导程序的导航栏的设计。另一页只是一个content.html页面，它只包含内容和一个jQuery脚本。内容页的例子：使用引导程序和jquery改变内容的网站

<body><h1>hello world!</h1></body> 
<--jquery script calling another function from a .js file-->

当我访问form.html和例如我会点击导航栏中的消息标签，因为它会显示内form.html

的content.html我的问题是，怎么可能完成。它的效率非常高，我们无需再次复制和粘贴设计。那是jQuery的一个功能吗？有没有在线的tuturials？我找不到解决方案。

来源

2016-04-28 guwop69

您可以将form.html包含到任何其他html页面中，而无需复制n再次粘贴相同的设计。 – Bhugy

@Bhugy是的，但我想知道他是如何做到的，而不使用'include'。 – guwop69

您能否提供对该网站的引用或您发现此内容的内容？ – Bhugy

请参考以下链接，你可能会得到一个想法，

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>

对于链接，我公顷在加载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>

来源

2016-04-28 04:07:03 user57

如果它只是一个链接呢？不是一个按钮。 – guwop69

我假设你问的是表单/内容页面如何共享相同的设计/导航栏。如果是这样，有几种方法可以做到这一点。

正如你前面提到的，复制和粘贴，但这很难保持。
导航栏是网站母版页的一部分。而表单/内容页面就是这个母版页的正文。该选项虽然重新载入了导航栏，但并不需要为出现的每个页面重新编码。
Ajax，如您所怀疑的那样。使用ajax可以动态更新网页正文的javascript调用。这里导航栏不会因内容更改而重新加载。

来源

2016-04-28 02:56:06

使用引导程序和jquery改变内容的网站

回答

相关问题