Перейти к содержимому


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 96 Вне конкурса за определение пользователя месяца

  • Фотография yuran
    #2

    yuran (yurbol.ru)
    Очков активности: 81 0 тем, 54 сообщения, 1 балл репутации

  • Фотография Ixman
    #3

    Ixman (o5cat.ru)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #4

    BLIK
    Очков активности: 51 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #5

    Mandarin
    Очков активности: 42 0 тем, 28 сообщений, 1 балл репутации

  • Фотография WGN
    #6

    WGN (worldgamenews.com)
    Очков активности: 39 Вне конкурса за определение пользователя месяца

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 31.5 2 темы, 15 сообщений, 1 балл репутации

  • Фотография алексс
    #8

    алексс
    Очков активности: 27 2 темы, 12 сообщений, 1 балл репутации

  • Фотография Mariko
    #9

    Mariko
    Очков активности: 16.5 1 тема, 8 сообщений, 1 балл репутации

  • Фотография RosenRot
    #10

    RosenRot (abuzov.com)
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 31.10.2018
  • Яндекс выдача: 15.11.2018
Топ 5 участников по репутации


  • Закрытая тема Тема закрыта

Как подгружать содержимое на страницу без перезагрузки

#1 kovyaro

kovyaro
  • Неактивные
  • 14 сообщений
  • Репутация: 0
0

Отправлено 24 March 2011 - 13:35

ZiTosS, извините, опять пишу не в той теме, надеюсь вы выделите ее в отдельную.
Вопрос возник в следующим, как подгружать содержимое на веб страницу при клике по пункту меню. В приведенном ниже примере содержимое должно находиться в container2. По идее содержимое должно находиться в отдельных файлах.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Main</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container1">
<a href="http://www.tsogu.ru/" title="официальный сайт" target="_blank"><div id="logo"></div></a>
<div id="slog">
<font color="#FFFFFF" size="+2"><b>Использование компьютерных технологий в науке и образовании</b></font>
</div>
</div>
<div class="navi">
<ul>
<li><a href="123.html" title="">Главная</a></li>
<li><a class="hide" href="">В науке</a>
<ul>
<li><a href="" title="">Страница 1</a></li>
<li><a href="" title="">Страница 1.1</a></li>
<li><a href="" title="">Страница 1.2</a></li>
<li><a href="" title="">Страница 1.3</a></li>
</ul>
</li>
<li><a class="hide" href="">В образовании</a>
<ul>
<li><a href="" title="">Страница 2</a></li>
<li><a href="" title="">Страница 2.1</a></li>
<li><a href="" title="">Страница 2.2</a></li>
<li><a href="" title="">Страница 2.3</a></li>
</ul>
</li>
<li><a class="hide" href="">Об авторе</a>
<ul>
<li><a href="" title="">Страница 3</a></li>
<li><a href="" title="">Страница 3.1</a></li>
<li><a href="" title="">Страница 3.2</a></li>
<li><a href="" title="">Страница 3.3</a></li>
</ul>
</li>
</ul>
</div>
<div id="titl"></div>
<div id="container2"></div>
<div id="container3"></div>
</body>
</html>


На большое ко-во пунктов в меню "Об авторе" не обращайте внимание, это по заданию нужно, про себя, про группу, про универ и т.д. :)

 

 

  • 0

#2 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 24 March 2011 - 14:45

kovyaro,
http://www.masterweb...&...ost&p=54206
  • 0

#3 kovyaro

kovyaro
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 0

Отправлено 24 March 2011 - 17:21

Спасибо, то что надо.
  • 0

#4 kovyaro

kovyaro
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 0

Отправлено 25 March 2011 - 09:14

Ага, поторопился, там просто отображается содержимое разных контейнеров размещены на той же странице. А мне надо загрузку из других HTML файлов форматированного текста, картинок и т.д.
  • 0

#5 surfer

surfer
  • Заблокированные
  • 1956 сообщений
  • Репутация: 71

Отправлено 25 March 2011 - 10:55

возможно это будет полезно
http://dklab.ru/lib/JsHttpRequest/
http://forum.vingrad...opic-53291.html
http://yandex.ru/yan...
  • 0

#6 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 25 March 2011 - 15:28

Ага, поторопился, там просто отображается содержимое разных контейнеров размещены на той же странице. А мне надо загрузку из других HTML файлов форматированного текста, картинок и т.д.

kovyaro,
там 2 ссылки и 2 варианта.
Первый — меняется содержимое блоков из той же страницы (Tab Content Script)
второй — Аякс версия: загружается содержимое из внешних хтмл-файлов (Dynamically selecting a tab/ loading an external page)
  • 0

#7 Shramik

Shramik
  • Неактивные
  • 17 сообщений
  • Репутация: 0

Отправлено 28 March 2011 - 07:22

Попробуй посмотреть в исходниках
  • 0

#8 kovyaro

kovyaro
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 0

Отправлено 28 March 2011 - 07:32

Что то с трудом мне это дается. Если позволите, давайте разберем по кускам. Первое, что надо сделать, это получить содержимое href из пункта меню.
Вот, что я сделал, и сделал неправильно. Так в чем ошибка?
<script type="text/javascript">
		$(document).ready(function()
		{
			$(".navi a").click(function() //Срабатывает при клике на пунк меню
			{
				var href_new = $(this).attr(href); //Получение href
				window.alert(href_new); //Проверка, получен ли href
			});
		});
  </script>

Вот собственно момент определения клика по пункту меню и вызывает сильные сомнения.
Класс navi:
.navi
{
	margin:0 auto;
	background:#000;
	font-family: Georgia, "Times New Roman", Times, serif;
  width:1000px;
  height:21px;
}
.navi ul li a, .navi ul li a:visited
{
	display:block;
	text-decoration:none;
	color:#000;
	width:250px;
	height:21px;
	text-align:center;
	color:#fff;
	background:#000;
	line-height:20px;
	overflow:hidden;
}
.navi ul
{
  padding:0;
  margin:0;
  list-style:none;
}
.navi ul li
{
  float:left;
  position:relative;
}
.navi ul li ul {display:none;}
.navi ul li:hover a
{
  color:#090;
  background:#333;
}
.navi ul li:hover ul
{
  display:block;
  position:absolute;
  top:21px;
  left:0;
  width:105px;
}
.navi ul li:hover ul li a
{
  display:block;
  background:#333;
  color:#FFF;
}
.navi ul li:hover ul li a:hover
{
  color:#090;
}

Само меню:
<div class="navi">
<ul>
<li><a href="123.html" title="">Главная</a></li>
<li><a class="hide" href="">В науке</a>
<ul>
<li><a href="" title="">Страница 1</a></li>
<li><a href="" title="">Страница 1.1</a></li>
<li><a href="" title="">Страница 1.2</a></li>
<li><a href="" title="">Страница 1.3</a></li>
</ul>
</li>
<li><a class="hide" href="">В образовании</a>
<ul>
<li><a href="" title="">Страница 2</a></li>
<li><a href="" title="">Страница 2.1</a></li>
<li><a href="" title="">Страница 2.2</a></li>
<li><a href="" title="">Страница 2.3</a></li>
</ul>
</li>
<li><a class="hide" href="">Об авторе</a>
<ul>
<li><a href="" title="">Страница 3</a></li>
<li><a href="" title="">Страница 3.1</a></li>
<li><a href="" title="">Страница 3.2</a></li>
<li><a href="" title="">Страница 3.3</a></li>
</ul>
</li>
</ul>
</div>

  • 0

#9 surfer

surfer
  • Заблокированные
  • 1956 сообщений
  • Репутация: 71

Отправлено 28 March 2011 - 08:44

копай в сторону xmlhttprequest
  • 0

#10 kovyaro

kovyaro
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 0

Отправлено 28 March 2011 - 10:48

Хм, честно говоря, я не очень понял в каком направлении копать. Поскольку я первый раз столкнулся с Веб дизайном, то испытываю определенные трудности. Нельзя ли на пальцах объяснить. В частности, то что я указывал в предыдущем посте, как получить href, который лежит в пункте меню? В чем ошибка в представленном java коде. Второй момент, как на основании полученного href произвести загрузку содержимого в контейнер container2, средствами процедуры .load?
  • 0

#11 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 29 March 2011 - 09:02

kovyaro, вы правильно заметили, ошибка в непонимании разницы между переменной и строкой, нужно так:
<script type="text/javascript">
		$(document).ready(function()
		{
			$(".navi a").click(function() //Срабатывает при клике на пунк меню
			{
				var href_new = $(this).attr('href'); //Получение href
				alert(href_new); //Проверка, получен ли href
			});
		});
  </script>

  • 0

#12 Symphony

Symphony
  • Неактивные
  • 636 сообщений
  • Репутация: 54

Отправлено 29 March 2011 - 09:21

не забудьте собственно сам jq подцепить
  • 0


#13 kovyaro

kovyaro
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 0

Отправлено 29 March 2011 - 11:32

Отлично! Сработало, огромное спасибо. Я получил ссыку. Теперь вопрос в том, как остановить процесс перехода на данную ссылку, который продолжает работать в пункте меню? И вопрос два - как загрузить содержимое страницы в контейнер. Я думаю использовать метод $(this).load(href_new);, но не понятно, как ему указать, что содержимое грузить надо в <div id="container2"></div>
  • 0

#14 kovyaro

kovyaro
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 0

Отправлено 29 March 2011 - 11:42

Как вариант: $("#container2").load(href_new);. Проблема в том, что нормальной документации нет, где полностью бы описывались возможности того или иного метода, вот и приходиться тыкаться.
  • 0

#15 kovyaro

kovyaro
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 0

Отправлено 29 March 2011 - 11:55

Метод научного тыка дал результат ;) $('#container2').load(href_new);. Остался последний вопрос, как остановить работу выбранного пункта меню, чтобы он не открыл страницу, на которую с таким трудом :) удалось получить ссылку.
  • 0

#16 kovyaro

kovyaro
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 0

Отправлено 29 March 2011 - 12:39

Все, все вопросы сняты. Опят таки, метод научного тыка. Остановка производится методом event.preventDefault();. Но прежде чем его остановить, нужно в функцию передать event. Итого, код выглядит следующим образом:
<script type="text/javascript">
		$(document).ready(function()
		{
			$(".navi ul li a").click(function(event)
			{
				var href_new = $(this).attr('href');
				$('#container2').load(href_new);
				event.preventDefault();
			});
		});
  </script>

  • 0

#17 kovyaro

kovyaro
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 0

Отправлено 29 March 2011 - 12:55

Опять я. Мне нужно в информ контейнер писать название ткущей страницы. Я нашел $('#titl').append(title_new); Но проблема в том, что он дописывает к уже имеющимся символам, а мне надо что бы содержимое переписывалось полностью. Вижу два варианта: 1 - сначала стереть, потом уже вышеприведенным методом вставить. Но тогда вопрос, как стереть то, что там было. 2 - есть какой-то метод, который сразу может заместить содержимое, если есть такой, подскажите как он называется.
  • 0

#18 Symphony

Symphony
  • Неактивные
  • 636 сообщений
  • Репутация: 54

Отправлено 29 March 2011 - 13:13

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

недавно человечество придумало гугл. достаточно набрать jquery
  • 0


#19 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 29 March 2011 - 13:21

kovyaro, начнем с того, что содержимое из тега title просто так не вытащить. Либо хранить в атрибуте title у ссылки и оттуда вытаскивать название страницы, либо ещё где.

Я нашел $('#titl').append(title_new); Но проблема в том, что он дописывает к уже имеющимся символам, а мне надо что бы содержимое переписывалось полностью. Вижу два варианта: 1 - сначала стереть, потом уже вышеприведенным методом вставить. Но тогда вопрос, как стереть то, что там было. 2 - есть какой-то метод, который сразу может заместить содержимое, если есть такой, подскажите как он называется.

Есть два метода:
  • obj.text( txtString )
  • obj.html( htmlString )
Они отличаются только тем, что первый (text) вставляет текстовую строку, а второй (html) вставляет HTML-структуру (текст + теги)
Тоже самое, когда мы применяем их для вытаскивания содержимого элемента.

Ах да... И дока вам в руки - jQuery.com
  • 0

#20 kovyaro

kovyaro
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 0

Отправлено 29 March 2011 - 13:34

Ах да... И дока вам в руки - jQuery.com

Я нашел этот сайт. Спасибо.

недавно человечество придумало гугл. достаточно набрать jquery

Вышеуказанный сайт я нашел через Яндекс :)
Спасибо всем огромное, ваша помощь неоценима!
  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru