Навигация без перезагрузки - JavaScript, Ajax

Glavar · 03.01.2011, 16:32

Подскажите как бы сделать навигацию без перезагрузки. Есть файлы 1-5.php . И потом при нажатии на OnClick подгружается файл. Или все файлы уже загружены но 2-5.php - невидимые и только после нажатия их можно увидеть.

InternetStranger · 03.01.2011, 17:40

Либо учите JavaScript (jQuery) + AJAX и все ваши вопросы отпадут сами собой, либо есть очень простой и эффективный способ с использованием iframe.
Создаем Iframe на странице, например, с id="my_frame"

В обработчике onclick вызываем эту функцию:

PHP код:


			
function showhtml( FileName ) {
    var IFrameElement = document.getElementById('my_frame');
    if (IFrameElement){ IFrameElement.src = FileName; }
};

Никки · 03.01.2011, 19:06

Фреймы - это моветон! Только AJAX!

InternetStranger · 03.01.2011, 20:38

Цитата:

Сообщение от Никки

Фреймы - это моветон! Только AJAX!

Никто и не спорит. Для себя давно уже выкинул из памяти этот чудесный тег.
Но при отсутствии возможности (читай - опыта, умений, знаний...), iframe тоже сканает

И м/о создать создать навигацию (многостраничный сайт) чисто из html-файлов и разместить его на вшивеньком бесплатном хостинге без поддержки php ))

Хотя... интересно вот, $.ajax в jQuery сможет запросить статический текстовый файл? Раньше в голову не приходило

UPD: Работает. Пример приложен в архиве.

Никки · 03.01.2011, 23:51

AJAX может запросить хоть что, лишь бы с этого же домена

Ghennadiy · 11.01.2011, 21:48

Код HTML:

<html>
   <head>
       <script language="JavaScript" type="text/javascript">
         function showElement(id) {
             var ids = Array('first', 'second', 'third');
             document.getElementById(id).style.display = 'block';
             var cnt = ids.length;
             for(i = 0; i < cnt; i++) {
               if(ids[i] != id)
                   document.getElementById(ids[i]).style.display = 'none';
             }
         }
       </script>
   </head>
   <body>
       <a href="javascript:showElement('first')">First table</a> &nbsp; 
       <a href="javascript:showElement('second')">Second table</a> &nbsp; 
       <a href="javascript:showElement('third')">Third table</a> &nbsp; 
       <table id="first" style="display: none;">
         <tr>
             <td>It is</td>
             <td>first table</td>
         </tr>
         <tr>
             <td>row 2 col 1</td>
             <td>row 2 col 2</td>
         </tr>
       </table>
       <table id="second" style="display: none;">
         <tr>
             <td>It is</td>
             <td>second table</td>
         </tr>
         <tr>
             <td>row 2 col 1</td>
             <td>row 2 col 2</td>
         </tr>
       </table>
       <table id="third" style="display: none;">
         <tr>
             <td>It is</td>
             <td>third table</td>
         </tr>
         <tr>
             <td>row 2 col 1</td>
             <td>row 2 col 2</td>
         </tr>
       </table>
   </body>
 </html>

тоже самое только проще

Никки · 11.01.2011, 23:14

Ghennadiy, а если данные должны изменяться динамически?

03.01.2011, 16:32	#1
Glavar Новичок Джуниор Регистрация: 06.12.2009 Сообщений: 2	Навигация без перезагрузки Подскажите как бы сделать навигацию без перезагрузки. Есть файлы 1-5.php . И потом при нажатии на OnClick подгружается файл. Или все файлы уже загружены но 2-5.php - невидимые и только после нажатия их можно увидеть.

03.01.2011, 17:40	#2
InternetStranger php / delphi Форумчанин Регистрация: 10.06.2007 Сообщений: 175	Либо учите JavaScript (jQuery) + AJAX и все ваши вопросы отпадут сами собой, либо есть очень простой и эффективный способ с использованием iframe. Создаем Iframe на странице, например, с id="my_frame" В обработчике onclick вызываем эту функцию: PHP код: `function showhtml( FileName ) { var IFrameElement = document.getElementById('my_frame'); if (IFrameElement){ IFrameElement.src = FileName; } };` G.Azamat { Web Development / Computer simulation } Начинающий программист думает, что в килобайте 1000 байтов, а законченный уверен, что в километре 1024 метра. Последний раз редактировалось InternetStranger; 03.01.2011 в 17:43.

03.01.2011, 19:06	#3
Никки Форумчанин Подтвердите свой е-майл Регистрация: 20.11.2007 Сообщений: 500	Фреймы - это моветон! Только AJAX! Операторы России

03.01.2011, 23:51	#5
Никки Форумчанин Подтвердите свой е-майл Регистрация: 20.11.2007 Сообщений: 500	AJAX может запросить хоть что, лишь бы с этого же домена Операторы России

11.01.2011, 23:14	#7
Никки Форумчанин Подтвердите свой е-майл Регистрация: 20.11.2007 Сообщений: 500	Ghennadiy, а если данные должны изменяться динамически? Операторы России

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Вывод постов без перезагрузки	BIFFF	JavaScript, Ajax	5	09.12.2009 01:55
скрипт скрытия / отображения текста без перезагрузки (не работает в опере)	vlad007	JavaScript, Ajax	12	10.11.2009 13:08
Форум без перезагрузки страницы. Как все собрать в едино?	Web-Gangsta	JavaScript, Ajax	15	07.05.2009 00:32
получение форм без перезагрузки страници AJAX	memka	PHP	1	08.04.2009 23:19
Как изменить partition table без перезагрузки	alexBlack	Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM	3	12.02.2008 08:03