PHP и jQuery

Опубликовал: Thursday, November 29, 2023 в категории AJAX, PHP | Пока нет комментариев

На сегодняшний день к библиотеке jQuery написано очень много интересных плагинов. Но написать большой проект на JavaScript очень сложно. Поддержка AJAX средствами JQuery не может полностью решить эту проблему, т. к. требует написания JavaScript-функций обработки ответов с сервера. Нам нужен PHPфреймворк, который в требуемый момент будет осуществлять динамическую подгрузку библиотеки jQuery и плагинов на страницу. Для этой цели как раз и подойдет xajax. Рассмотрим примеры использования связки xajax и jQuery.

Динамическая подгрузка jQuery и плагина Carousel

Для начала создадим простой пример динамической подгрузки на страницу плагина jQuery. Плагин будем подгружать на страницу при нажатии на ссылку по AJAX, используя фреймворк xajax. Файлы примера находятся на компакт-диске в папке book_primers/2-5. Для загрузки примера наберите в браузере http:// book_ primers/2-5 (Денвер должен быть запущен). Вы увидите страницу, изображенную на рис. 2.19.

Рис. 2.19. Вид страницы при загрузке примера 2-5

При нажатии ссылки Подгрузить js файл библиотеки jCarousel подгружаем внешний файл библиотеки jCarousel (вызов xajax-функции с аргументом 1). Страница принимает вид, показанный на рис. 2.20.

Рис. 2.20. Вид страницы после загрузки js библиотеки jCarousel

Рис. 2.21. Вид страницы после загрузки контента для плагина jCarousel

Рис. 2.22. Плагин jCarousel загружен

При нажатии ссылки Подгрузить контент подгружаем контент для плагина

(вызов xajax-функции с аргументом 2). Вид страницы показан на рис. 2.21.

При нажатии ссылки Запустить плагин запускаем плагин (вызов xajax-

функции с аргументом 2). Вид страницы показан на рис. 2.22.

Содержимое файла index.php приведено в листинге 2.21. Из файла идет запуск

xajax-функции Plugin, которая расположена в файле plugin.php (листинг 2.22).

Листинг 2.21

<?php

require_once ("xajax_core/xajax.inc.php"); require_once ("plugin.php");

$xajax = new xajax();

// регистрация функций

$xajax->register(XAJAX_FUNCTION,"Plugin");

$xajax->processRequest();

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<link rel="stylesheet" type="text/css" href="js/skins/tango/skin.css" />

<title> Пример 1 (глава 2)к книге </title>

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

<?php $xajax->printJavascript(”); ?>

</head>

<body>

<!-шапка ->

<div id=header1><b>Примеры к книге (глава 2 пример 5)<br>

Динамическая подгрузка плагина jQuery (jCarousel)</b></div>

<br>

<!-Форма ->

<div id=’div0′>

<a href=’javascript:void();’ onclick=’xajax_Plugin(1);’>

Подгрузить js-файл библиотеки jCarousel</a>

</div>

<div id=’div1′><!-Место для загрузки плагина->

</div>

</body>

</html>

Листинг 2.22

<?php

// Подгрузка плагина jQuery function Plugin($Id)

{

$objResponse = new xajaxResponse();

switch($Id)

{

case 1:

$objResponse->includeScript("js/jquery.jcarousel.js");

$text="<a href=’javascript:void();’ onclick=’xajax_Plugin(2);’> Подгрузить контент</a>";

$objResponse->assign("div0","innerHTML",$text); break;

case 2:

$text1="

<ul id=’mycarousel’ class=’jcarousel-skin-tango’>

<li><img src=’img/img1.gif’ /></li>

<li><img src=’img/img2.gif’ /></li>

<li><img src=’img/img3.gif’ /></li>

<li><img src=’img/img4.gif’ /></li>

<li><img src=’img/img5.gif’ /></li>

<li><img src=’img/img6.gif’ /></li>

<li><img src=’img/img7.gif’ /></li>

<li><img src=’img/img8.gif’ /></li>

<li><img src=’img/img9.gif’ /></li>

<li><img src=’img/img10.gif’ /></li>

<li><img src=’img/img11.gif’ /></li>

<li><img src=’img/img12.gif’ /></li>

</ul>";

$objResponse->assign("div1","innerHTML",$text1);

$text2="<a href=’javascript:void();’ onclick=’xajax_Plugin(3);’> Запустить плагин</a>";

$objResponse->assign("div0","innerHTML",$text2); break;

case 3:

$script="jQuery(‘#mycarousel’).jcarousel();";

$objResponse->script($script);

$text2="";

$objResponse->assign("div0","innerHTML",$text2); break;

default: break;

}

return $objResponse;

}

?>

Источник: Петин В. А., Сайт на AJAX под ключ. Готовое решение для интернет-магазина. — СПб.: БХВ-Петербург, 2011. — 432 с.: ил. + CD-ROM — (Профессиональное программирование)

Похожие посты:

Комментировать

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">