brasofilo

(SOPT) 37603

Oct 22nd, 2014
253
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Bootstrap, from Twitter</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
  8.    
  9. </head>
  10.  
  11. <body>
  12.  
  13.     <div class="navbar navbar-inverse navbar-fixed-top">
  14.         <div class="navbar-inner">
  15.             <div class="container">
  16.                 <a class="btn disabled btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  17.                     <span class="icon-bar"></span>
  18.                     <span class="icon-bar"></span>
  19.                     <span class="icon-bar"></span>
  20.                 </a>
  21.                 <a class="brand" href="#">Project name</a>
  22.                 <div id="nav-main" class="nav-collapse collapse">
  23.                     <ul class="nav">
  24.                         <li><a class="tc" href="#home" data-url="tt.php" data-info="GET">Home</a></li>
  25.                         <li><a href="#about">About</a></li>
  26.                         <li><a href="#contact">Contact</a></li>
  27.                         <li class="dropdown">
  28.                             <a class="dropdown-toggle " data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  29.                             <ul class="dropdown-menu">
  30.                                 <li><a href="index2.php">Action</a></li>
  31.                                 <li><a href="index.php">Another action</a></li>
  32.                                 <li><a href="#">Something else here</a></li>
  33.                                 <li class="divider"></li>
  34.                                 <li class="nav-header">Nav header</li>
  35.                                 <li><a href="#">Separated link</a></li>
  36.                                 <li><a href="#produto/2/3/5">One more separated link</a></li>
  37.                             </ul>
  38.                         </li>
  39.                     </ul>
  40.                 </div><!--/.nav-collapse -->
  41.             </div>
  42.         </div>
  43.     </div>
  44.  
  45.     <div class="container">
  46.         <div id="conteudo">
  47.             /carrega as informaçoes
  48.         </div>
  49.     </div> <!-- /container -->
  50.  
  51.     <!-- Le javascript
  52.    ================================================== -->
  53.     <!-- Placed at the end of the document so the pages load faster -->
  54.     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  55.     <script>
  56.     $(document).ready(function(){
  57.         // faz load via url
  58.         var hash = window.location.hash;
  59.         var hashman = $(".tc[href='"+hash+"']").attr("data-url");
  60.         var hashman_tipo = $(".tc[href='"+hash+"']").attr("data-info");
  61.  
  62.         if (typeof hashman !== "undefined") {
  63.             loading(1);
  64.             navegacao(hashman,hashman_tipo);
  65.         }else {
  66.             loading(1);
  67.             navegacao("tt.php","GET");
  68.         }
  69.         // faz load via link
  70.         $(".tc").click(function(){
  71.            
  72.             $("#conteudo").fadeOut('slow',function(){
  73.                 loading(1);
  74.                 var link = $(this).attr("data-url");
  75.                 var tipo = $(this).attr("data-info");
  76.                 navegacao(link,tipo);
  77.             });
  78.            
  79.         });
  80.  
  81.         function navegacao(link,tipo){
  82.             $.ajax({
  83.                 url : link,
  84.                 dataType : "HTML", // Pode ser SCRIPT se o retorno for somente comandos JavaScript
  85.                 type : tipo, // Pode ser get ou post..
  86.                 success : function(conteudo){
  87.                     log(conteudo)
  88.                     $("#conteudo").html(conteudo).fadeIn('slow');
  89.                 },
  90.                 error : function(a,b,c){
  91.                     alert("Erro : "+a["status"]+" "+c);
  92.                 }
  93.             });
  94.         }
  95.  
  96.         function loading(status) {
  97.             if ( status == 1 )
  98.             $('#conteudo').html("<div id='loading'><br><br><center><img src='http://i.stack.imgur.com/drgpu.gif' border='0' /></center></div>");
  99.             else
  100.             $('#loading').fadeOut();
  101.         }
  102.  
  103.  
  104.  
  105.  
  106.     });
  107.  
  108.  
  109.     </script>
  110. </body>
  111. </html>
RAW Paste Data