| |
|
|
| | На странице http://fh7929mi.bget.ru/35.html список ссылок, при клике на каждую из которых появляется всплывающее окно, содержащее соответствующую информацию.
Когда таких ссылок не очень много и размер всплывающего контента невелик, все работает вполне удовлетворительно. Но если ссылок (и окон) несколько десятков, а в каждом всплывающем окне имеется графика и много текста, то страница начинает тормозить. Поэтому возникает необходимость сделать так, чтобы при загрузке страницы коды для всплывающих окон не загружались, а докачивались с сервера лишь тогда, когда по данной ссылке посетитель кликнет.
Сейчас содержимое каждого всплывающего окна заносится из CMS в макет страницы вот таким образом:
<div id="3_audit_window" style="display:none;">
<?php
Core_Entity::factory('Document', 101)->Document_Versions->getCurrent()->execute();
?>
</div>
|
Вроде бы, это можно осуществить с помощью ajax через с php+jQuery либо через с load только с jQuery, но что-то не пойму как конкретно. | |
| |
|
|
| |
|
|
| |
для: Владимир55
(28.11.2014 в 18:36)
| | | А что именно непонятно? | |
| |
|
|
| |
|
|
| |
для: Commander
(28.11.2014 в 19:12)
| | | Я практически этого никогда не делал, так что не пойму, как и приступать. Собственно, ничего и непонятно.
В сети много скриптов со схожими функциями. Я потыркался, да там тоже ничего не поймешь. Это как-то все уж очень сложно... | |
| |
|
|
| |
|
|
| |
для: Владимир55
(28.11.2014 в 21:00)
| | | Работает точно также, как и всегда: JS-код запрашивает у сервера определенный адрес и делает с полученным ответом то, что ему надо. Выглядит очень просто (jQuery):
$.get('http://site.ru/path/to/page.html', '', function(response){
//Здесь делаем с ответом сервера (response) то, что хотим сделать
//Например:
$('#ajax').html(response);
});
|
Ответ сервера представляет собой то, что он отдаст при прямом запросе через браузер. Соответственно, при ajax-запросе необходимо позаботиться о том, чтобы CMS отдавала "голую" страницу, без использования шаблона. | |
| |
|
|
| |
|
|
| |
для: Commander
(29.11.2014 в 07:08)
| | | Не удается довести это до рабочего кода.
На странице page.html имеется запись:
А сама страница здесь: http://fh7929mi.bget.ru/36.html Не работает. Полный код:
<!DOCTYPE html>
<html>
<head>
<title>Проверка </title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="/partner.css" />
<style type="text/css">
.partner {background-color: #E9DFBA; vertical-align: middle; padding:0.2em; border-radius:0.3em; color: #000; float:none; border: #D6C48D 1px solid; margin: 0.5em auto; padding-top:0; width:75%; }
.partner a{ font-family: Tahoma, Geneva, sans-serif; font-weight:bold; text-decoration:none; height:0px; color:#663300;}
.partner a:hover {
/* при наведении ссылка становится */
text-decoration: underline; /* подчеркнутой */
}
.name_grupp {text-align: center; font-weight: bolder; font-size: 120%;}
</style>
<!-- jQuery -->
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/jquery.simplemodal.js"></script>
<script type="text/javascript">
function openWindow(module, id, success_href){
$('#'+module+'_window').modal({onShow: function (dialog) {
}});
};
</script>
</head>
<body>
<div class="partner">
<a href="#" onClick="openWindow('1_leazing', ''); return false;">Первый партнер</a>
</div>
<div class="partner">
<a href="#" onClick="openWindow('2_audit', ''); return false;">Второй партнер</a>
</div>
<!-- Описания партнеров -->
<div id="1_leazing_window" style="display:none;">
<script type="text/javascript">
$.get('page.html', '', function(response){
$('#ajax').html(response);
});
</script>
</div>
<div id="2_audit_window" style="display:none;">Описание партнера</div>
|
| |
| |
|
|
| |
|
|
| |
для: Владимир55
(29.11.2014 в 17:23)
| | | $('#ajax') - это ссылка на элемент, в который должен быть подгружено то, что будет передано через ajax.
#ajax - это CSS-селектор, который идентифицирует элемент, к которому применен метод html(). Короче, код должен выглядеть так:
$.get('page.html', '', function(response){
$('css-селектор объекта').html(response);
});
|
В данном случае можно упростить:
$('css-селектор').load('page.html');
|
Метод load() загружает содержимое указанного элемента с указанного адреса. | |
| |
|
|
| |
|
|
| |
для: Commander
(29.11.2014 в 20:19)
| | | А 'css-селектор объекта' - это что? Это файл стилей? Или класс css? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(29.11.2014 в 20:33)
| | | Или класс css?
Типа того. #ajax - это ссылка на элемент с id="ajax". Почитайте подробнее, как выбрать элемент(ы) для манипуляций при помощи jQuery. Например здесь. К выбранным элементам можно применить метод load(). А можно вставить HTML-содержимое при помощи метода html(). | |
| |
|
|
| |
|
|
| |
для: Commander
(29.11.2014 в 20:44)
| | | Я пробовал и так, и сяк - ничего не выводится.
Вы можете дописать эту несчастную строку, чтобы хоть что-нибудь заработало? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(29.11.2014 в 17:23)
| | |
<!DOCTYPE html>
<html>
<head>
<title>Проверка </title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="/partner.css" />
<style type="text/css">
.partner {background-color: #E9DFBA; vertical-align: middle; padding:0.2em; border-radius:0.3em; color: #000; float:none; border: #D6C48D 1px solid; margin: 0.5em auto; padding-top:0; width:75%; }
.partner a{ font-family: Tahoma, Geneva, sans-serif; font-weight:bold; text-decoration:none; height:0px; color:#663300;}
.partner a:hover {
/* при наведении ссылка становится */
text-decoration: underline; /* подчеркнутой */
}
.name_grupp {text-align: center; font-weight: bolder; font-size: 120%;}
</style>
<!-- jQuery -->
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/jquery.simplemodal.js"></script>
<script type="text/javascript">
function openWindow(module, id, success_href){
$('#'+module+'_window').modal({onShow: function (dialog) {
}});
};
</script>
</head>
<body>
<div class="partner">
<a href="#" onClick="$.get('page.html', '', function(response){ $('#1_leazing_window').html(response); }); return false;"
>Первый партнер</a>
</div>
<div class="partner">
<a href="#" onClick="$.get('page.html', '', function(response){ $('#2_audit_window').html(response); }); return false;"
>Второй партнер</a>
</div>
<!-- Описания партнеров -->
<div id="1_leazing_window" style="display:none;">
</div>
<div id="2_audit_window" style="display:none;">Описание партнера</div>
|
| |
| |
|
|
| |
|
|
| |
для: Trianon
(30.11.2014 в 19:29)
| | | Плохо | |
| |
|
|
| |
|
|
| |
для: confirm
(30.11.2014 в 19:47)
| | | плохо, конечно.
клиентская сторона - это вообще ни разу не моя область.
Но Владимира это с места столкнет. | |
| |
|
|
| |
|
|
| |
для: Trianon
(30.11.2014 в 19:49)
| | | Но Владимира это с места столкнет
Так оно и получилось, спасибо! | |
| |
|
|
