Jump to content
  • 0

Подгрузка нужной страницы в div содержимого


HaveFun
 Share

Question

Здравствуйте. FAQ по JS прочитал, но такой проблемы не нашёл. В поиске толкового решения не оказалось.

Как и указано в названии, нужно организовать подгрузку нужной страницы в div содержимого при щелчке на одном из навигационнох дивов(по бокам на макете).

Вот примерный макет сайта:

5677ad77a23et.jpg

По щелчке на "Урок 1" или "Тема 1" текст должен подгружаться из другой страницы в див содержимого.

Думаю организовать ajax'ом, но пока не получилось.

Вот тут накопал примерный вариант.

Фреймы не предлагать. Спасибо.

Edited by HaveFun
Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0

книга http://progbook.ru/ajax/866-bibo-jquery-podrobnoe-rukovodstvo-po-prodvinutomu.html

сервер http://denwer.ru/

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

Link to comment
Share on other sites

  • 0

Я скачал себе вот эти исходники, вроде переделал под себя, но не знаю, как проверить, правильно ли я сделал.

Надо закупить хостинг сразу под него, наверное... Или есть способ протестить ajax на компьютере?

Вопрос с этим решился, спасибо!

Edited by HaveFun
Link to comment
Share on other sites

  • 0

Скачал отсюда исходники.

Снова возникла проблема:

Вот код скрипта, который подключается в html:

var AjaxContent = function(){
var container_div = '';
var content_div = '';
return {
getContent : function(url){
$(container_div).animate({opacity:0}, //Turn the opacity to 0
function(){ // the callback, loads the content with ajax
$(container_div).load(url+" "+content_div, //only loads the selected portion
function(){
$(container_div).animate({opacity:1}); //and finally bring back the opacity back to 1
}
);
});
},
ajaxify_links: function(elements){
$(elements).click(function(){
AjaxContent.getContent(this.href);
return false; //prevents the link from beign followed
});
},
init: function(params){ //sets the initial parameters
container_div = params.containerDiv;
content_div = params.contentDiv;
return this; //returns the object in order to make it chainable
}
}
}();

И вот этот:

<script type="text/javascript">
$(function(){
AjaxContent.init({containerDiv:"#ajax-wrap",contentDiv:"#text"}).ajaxify_links("#menu a");
});
</script>

Я понял так, что containerDiv:"#ajax-wrap" - оболочка дива, куда надо вставлять.

contentDiv:"#text" - контент, который надо выгрузить из другой страницы и загрузить в существующую.

ajaxify_links("#menu a") - при щелчке на этом селекторе будет срабатывать скрипт.

Но как только я переделал под себя менюшку и отодвинул её вбок (см. макет), то при щелчке содержимое меняет прозрачность и становиться маленькой и пустой, безо всякого содержимого.

В чём может быть проблема?

Заранее спасибо. Изначальный пример с Денвером прекрасно работает.

Edited by HaveFun
Link to comment
Share on other sites

  • 0
Я не вдавался в детали, но разве не надо вызвать метод getContent(url) ?

Тогда ещё нужен метод "вгрузки" контента в определённый див.

getContent : function(url){ - посмотрите внимательно на код.

Edited by HaveFun
Link to comment
Share on other sites

  • 0

Объект вернулся, у него вызвали init(), а всё остальное вызвать? Функции, которые внутри return {}, не выполняются, это просто структура объекта. На выполнение запускается только создание этого объекта, а не все его методы.

Link to comment
Share on other sites

  • 0

Мне кажется, что на очень многих сайтах "стоит" подобная система подгрузки.

Да, сам нашёл 3 таких вопроса.

Мне кажется, что на очень многих сайтах "стоит" подобная система подгрузки.

Да, сам нашёл 3 таких вопроса.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy