Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > Подгрузка сайтов внизу меню


Автор: педрол 13.3.2010, 07:09
Здравствуйте, хочется такую штуку, чтобы при нажатии пункта меню без перезагрузки страницы внизу горизонтального меню подгружался (внешний) сайт.


То есть один уровень меню, 5-7 ссылок, меню не плавает, просто всегда вверху страницы. Я думаю надо смотреть в сторону jQuery, (типа там внизу будет такой невидимый объект, в который и будет подгружаться сайт). Подскажите максимально простое одноуровневое js меню без использования картинок (вроде такого hxxp://javascript-array.com/scripts/simple_drop_down_menu/)и собственно  smile реализации этой самой динамической подгрузки сайтов.
---
Можно и серверное-что-нибудь, просто, боюсь, хостинг не потянет мощную динамику. 

Автор: bars80080 13.3.2010, 13:42
а просто фреймами уже не хочется?

Автор: педрол 13.3.2010, 18:57
bars80080, вроде быэто не модно, да и не красиво, всё плавает

я нашёл несколько функций jQuery, 
Код

$().get $().load $().append
, это как-то связано с темой динамической подгрузки страниц?

везде даются примеры как загрузить .html или область из него, притом со своего сайта, а мне нужно просто "подклеить" сайт снизу менюшки
----------
ну и заодно, гружу страницу в 
Код

<object id="page" type="text/html" 
    data="http://zhack.net" 
    width="100%" height="100%"> 
  <p>Oops! That didn't work...</p> 
</object>

получается в окошке шириной на всю страницу, а высотой только треть экрана (Опера 10), в чём может быть дело? 

Автор: bars80080 13.3.2010, 19:43
Цитата(педрол @  13.3.2010,  17:57 Найти цитируемый пост)
вроде быэто не модно

это не аргумент


Цитата(педрол @  13.3.2010,  17:57 Найти цитируемый пост)
да и не красиво, всё плавает

это уже зависит от мастерства верстальщика


Цитата(педрол @  13.3.2010,  17:57 Найти цитируемый пост)
а высотой только треть экрана

высота - тонкое место. изначально надо выставить высоту и для внешних элементов (html, body, прочих div'ов)

Автор: педрол 13.3.2010, 22:10
а среднюю часть моего поста про jQuery как-нибудь прокомментируете?

похоже, мне рекомендуют чем проще тем лучше, а мне хочется красиво, как вкантакте, чтобы шапка висела, а внизу загружалось, и непременно с preloader.gif пока грузится

Автор: bars80080 13.3.2010, 22:46
Цитата(педрол @  13.3.2010,  21:10 Найти цитируемый пост)
а среднюю часть моего поста про jQuery как-нибудь прокомментируете?

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


Цитата(педрол @  13.3.2010,  21:10 Найти цитируемый пост)
похоже, мне рекомендуют чем проще тем лучше, а мне хочется красиво, как вкантакте, чтобы шапка висела, а внизу загружалось, и непременно с preloader.gif пока грузится 

ну, тут как бы, хотеть не запретишь, вопрос в том, что обучать тебя никто не стремиться. вот если бы ты хотел сделать фреймами, мне потребовалось всего лишь дать ссылку на этот момент в одном из справочников. если ты хочешь подгрузку, то могу сказать одно: ищи статью по аяксу (ajax). именно он этим занимается. когда ты прочитаешь, что это и как это делается, я бы дал ссылку на кустарную реализацию, но не на jquery.
и только потом мы бы уже обсудили о том как вешать прелоадерную картинку (пока её просто некуда вешать)

так что, либо жди доброго самаритянина с рассказом про jquery, либо читать об аяксе, а потом я тебе дам эту http://forum.vingrad.ru/index.php?showtopic=234446&view=findpost&p=1685574

Автор: Любитель 14.3.2010, 13:15
1. Страница должна состоять из 3 ёх блоков: меню, див контента, див прелоадера.
2. Див прелоадера изначально скрыт, ну position: fixed (если нужен IE6 - absolute, высота выставляется скриптом).
3. Будем считать, что в меню, у тебя ссылки с классом navigation и в href прописан адрес контента. Это не лучший вариант - в идеале надо уметь строить страницу без JS-а, чтоб поисковики могли по этому ходить, средний клик работал и т. д.
4.
Код

$(function() {
  var preloader = $('#preloaderDivId');
  $('a.navigation').click(function(e) {
    e.preventDefault();
    preloader.show();
    $('#contentDivId').load(this.href, function() {
      preloader.hide();
    });
  });
});

5. Ну и собственно - что-то мне подсказывает, что простая подгрузка контента в определённое место с ичпользованием jQuery (учитывая, что это одна функция) рассмотрена везде, где только можно. Построение "правильных" ссылок (в этом случае на server-side чекаем заголовок X-Requested-With) , думаю, тоже.

Автор: skyboy 14.3.2010, 13:43
а ничего, что фрейм предлагает изоляцию CSS, JS? разве это дело - вставить стороннюю страницу внутрь своей верстки? неужто не пугают конфликты стилей и javascript'a? хотя, никогда не использовал object type="text/html". может, и преувеличиваю возможные проблемы.
касательно высоты: поставь  object'y overflow: hidden. А так он, скорее всего, не тянется за содержимым.

Автор: педрол 14.3.2010, 17:38
я просто слышал что Аякс это в общем технология динамического именения страниц, которую можно реализовать через различные фреймворки, потому и спрашивал по JQuery, как про самый распространённый.
________________________________________
bars80080, XMLHttpRequest работает при загрузке контента не со своего сайта? А с отключенным ActiveX? Спасибо за ссылку на реализацию.

Любитель, с трудом понимаю особые термины, но всё равно, благодарю вас.
Цитата

простая подгрузка контента в определённое место с ичпользованием jQuery
  smile 

Цитата

надо уметь строить страницу без JS-а
 Поддержка PHP на хостинге есть, пойду спрошу в разделе PHP про $str = file_get_contents
_________________________________________
Вообще я наверно не с того начал. У меня нет желания и мощностей размещать различные сервисы на моём сервере, поэтому на сервере будет лишь зонтик, т.е. меню, а контент будет подгружаться с других ресурсов. То есть около 5 ссылок: форум, чат, блог, файловый архив, ещё не придумал. Может я усложняю и можно всё сделать проще?

Автор: Любитель 14.3.2010, 19:23
Цитата(педрол @  14.3.2010,  17:38 Найти цитируемый пост)
поэтому на сервере будет лишь зонтик, т.е. меню, а контент будет подгружаться с других ресурсов

Блин, так с этого и надо было начинать. Тогда ни о каком XHR речь и не идёт (если только не делать на своём сервере прокси). Оечвидный вариант - как раз сделать ифрейм..

Автор: bars80080 14.3.2010, 20:25
Цитата(педрол @  14.3.2010,  16:38 Найти цитируемый пост)
XMLHttpRequest работает при загрузке контента не со своего сайта? 

Цитата(Любитель @  14.3.2010,  18:23 Найти цитируемый пост)
Блин, так с этого и надо было начинать

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

раз уж внешний сайт, то есть другой домен, значит, никакого аякс.

вариантов остаётся всего два: json и фреймы.

json, вот посмотрите примерную реализацию: http://forum.vingrad.ru/index.php?showtopic=294328&view=findpost&p=2116346
открывается элемент <script src="внешний урл"></script>. но честно говоря, для подгрузки полномасштабных страниц, это мягко говоря через одно место. данные таким способом тягать ещё куда ни шло, но полноценные страницы - там будут такие траблы с парсингом

Автор: педрол 16.3.2010, 21:13
решил фреймами; меню на css

Автор: педрол 18.3.2010, 13:21
а каким образом встроена страничка жж на cheaptrip.ru ?

Автор: bars80080 18.3.2010, 14:37
Цитата(педрол @  18.3.2010,  12:21 Найти цитируемый пост)
а каким образом встроена страничка жж на cheaptrip.ru ? 

да никак. она там изначально есть, но почему-то используется дикий способ с последующим заказом.

сам сайт выглядит конечно просто чудовищно. особенно радует финальный размер - 3М. просто ни за что
в эксплорере вообще грузился минут 5

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)