JQuery, оживляющий динамической загрузки страницы

Question

Я хочу, чтобы достичь чего-то вроде этого:

1. Нажмите на ссылку в навигационной панели
2. FADEOUT часть сайта, страница
3. нагрузки от линии
4. одушевленные обертывание для матч новый сайт высота
5. fadeIn новый контент.

Я нашел аккуратное решение (here) для этого, но мой сайт построен по-разному.

Мой index.php:

<?php 
include ('includes/header.php'); 
echo '<div id="wrapper">'; 

if ($_GET['page'] == 'about'){ 
    include 'includes/navbar.php'; 
    include 'includes/about.php'; 
}else if ($_GET['page'] == 'login'){ 
    include 'includes/navbar.php'; 
    include 'includes/login.php'; 
}else if ($_GET['page'] == 'register'){ 
    include 'includes/navbar.php'; 
    include 'includes/register.php'; 
}else if ($_GET['page'] == 'member-index'){ 
    include 'includes/navbar.php'; 
    include 'includes/member-index.php'; 
}else if ($_GET['page'] == 'login-failed'){ 
    include 'includes/navbar.php'; 
    include 'includes/login-failed.php'; 
}else if ($_GET['page'] == 'logout'){ 
    include 'includes/logout-exec.php'; 
    include 'includes/navbar.php'; 
    include 'includes/logout.php'; 
}else if ($_GET['page'] == 'register-success'){ 
    include ('includes/navbar.php'); 
    include 'includes/register-success.php'; 
}else if ($_GET['page'] == 'access-denied'){ 
    include 'includes/navbar.php'; 
    include 'includes/access-denied.php'; 
}else { 
    include ('includes/navbar.php'); 
    include 'includes/home.php'; 
} 

echo '</div>'; 
include ('includes/footer.php'); 
?> 

я перезагрузить Navbar, потому что изменилось в случае, если сессия присутствует.

navbar.php

<?php 
    //Start session 
    session_start(); 
?> 

<div id="navbar"> 
    <div class="button"><a href="index.php">Home</a></div> 
    <?php 
     //Check whether the session variable SESS_MEMBER_ID is present or not 
    if(!isset($_SESSION['SESS_MEMBER_ID']) || (trim($_SESSION['SESS_MEMBER_ID']) == '')) { 
     echo '<div class="button"><a href="index.php?page=login">Login</a></div>'; 
     echo '<div class="button"><a href="index.php?page=register">Register</a></div>'; 
    } else { 
     echo '<div class="button"><a href="index.php?page=logout">Logout</a></div>'; 
    } 
    ?> 

    <div class="button"><a href="index.php?page=member-index">Member</a></div> 
    <div class="button"><a href="index.php?page=about">About</a></div> 
</div> 

Каждая страница я хочу, чтобы загрузить содержит DIV, в котором я обернуть все другие элементы страницы, например. about.php:

<div id="mainbody"> 
    <h1>*.php</h1> 
</div> 

Я хочу, чтобы достичь эффекта, описанного @ начало этого поста с сайта строить так, как это сейчас строить. В этом примере, о котором я упоминал, динамический контент загружается с использованием класса .load(). Может быть, я должен построить свой сайт по-разному, dunno im still php/jquery newb.

Answer 1

Здесь много, я постараюсь указать вам в правильном направлении.

Если мы сделаем шаг за шагом, мы начнем с навигации eventListner.

$('#navbar div.button a').click(function(){ 

}); 

Тогда вы, вероятно, хотите, чтобы получить имя области/страницы, которая была нажата

$('#navbar div.button a').click(function(){ 
    var pageName = $(this).attr('href').replace('index.php?page=','') // get name 
}); 

Тогда вы, вероятно, хотите, чтобы захватить удалить старое содержание затем добавить новый в этой области. Предполагая, что все страницы уже загружены в скрытый дайв где-то, попробуйте это.

$('#navbar div.button a').click(function(){ 
     var pageName = $(this).attr('href').replace('index.php?page=','') // get name 

     var newContent = $('#'+ pageName).html(); 
     $('#mainbody div#currentPageWrapper').fadeOut(function(){ 
     $(this).empty(); 
     }); //clear old content 

     $('#mainbody div#currentPageWrapper').append(newContent).fadeIn(); 

    }); 

Чтобы получить страницы динамически вы можете сделать вызов AJAX, как это (больше на $ .get() here

$.get('ajax/test.html', function(data) { 
    $('.result').html(data); 
    alert('Load was performed.'); 
}); 

Таким образом, в данном примере вы смотрите на что-то вроде этого

$('#navbar div.button a').click(function(){ 
      var pageName = $(this).attr('href').replace('index.php?page=','') // get name 

      //var newContent = $('#'+ pageName).html(); //get preloaded 

$.get(pageName + '.php', function(data) { 
    $('#mainbody div#currentPageWrapper').fadeOut(function(){ 
      $(this).empty(); 
      }); //clear old content 

      $('#mainbody div#currentPageWrapper').append(data).fadeIn(); 


}); 




    });