Файловый архив студентов. Файловый архив студентов.
1314 вуза, 5328 предмета.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Ульяновский институт гражданской авиации имени главного маршала авиации Б.П. Бугаева
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
PHP для продвинутых.docx
Скачиваний:
16
Добавлен:
01.07.2025
Размер:
12.54 Mб
Скачать
☆
►Содержание►

29. Модальное окно на ajax

Работаем с библиотекой jQuery. Создание модального окна можно разбить на следующие этапы:

  • Определение идентификатора тэга, который будет реагировать на определенные действия пользователя (например, на клик мыши либо любое другое событие).

  • Создание модального окна по тому событию, которое было предусмотрено в первом пункте.

  • Обработка данных методо ajax.

  • Создание кнопки закрытия окна.

  • Добавление эффектов плавного появления либо исчезновения.

Извлечение идентификатора

Начнем с того, что необходимо выбрать селектор, по клику на который будет выполняться ajax-запрос. Затем свяжем данный селектор с событием click

Выбор селектора и создание связи данного селектора с событием click. Листинг 29.1

jQuery(function($) {

$(“li>a”).live(‘click’, function(){

});

})

Селектор li>a выбирает все элементы потомки тэга li.

Т.к. при клике осуществляется переход на другую страницу, то необходимо предотвратить выполнение этого действия. Для этого воспользуемся методом .preventDefault().

Предотвращение действия по умолчанию. Листинг 29.2

jQuery(function($) {

$(“li>a”).bind(‘click’, function(event){

event.preventDefault();

// Проверим, что сработал обработчик события и выведем текст ссылки в консоль firebug

console.log($(this).text());

});

})

Ключевое слово this нам указывает на текущую нажатую ссылку. Селекторможет вызывать множество элементов страницы, но thisуказывает только на единственный текущий элемент. Вместо console.log можно использовать метод alert(), тогда текст ссылки будет выводиться не в консоли, а в всплывающем окне.

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

  • Тексту ссылки. $data = $(this).text();

  • Значению атрибута href. $data = $(this).attr(‘href’);

Рассмотрим извлечение идентификатора по значению атрибута href подробнее.

Если значение атрибута href является http://localhost/kohana/news/12, то нам нужно извлечь последний параметр, который содержит идентификатор статьи. Для этого воспользуемся методом replace.

Извлечение идентификатора с помощью метода replace(). Листинг 29.3

jQuery(function($) {

$(“li>a”).live(‘click’, function(event){

event.preventDefault();

// Проверим, что сработал обработчик события и выведем текст ссылки в консоль firebug

var data = $(this).attr(‘href’)

.replace(‘http://localhost/kohana/news/’, ‘’);

});

})

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

Метод replace() с регулярным выражением. Листинг 29.4

jQuery(function($) {

$(“li>a”).live(‘click’, function(event){

event.preventDefault();

// Проверим, что сработал обработчик события и выведем текст ссылки в консоль firebug

var data = $(this).attr(‘href’)

.replace(/([0-9])/i, ‘’);

});

})

Если в адресной строке есть get-запросы, то можно воспользоваться следующим регулярным выражением:

Регулярное выражение для извлечения get-параметров. Листинг 29.5

jQuery(function($) {

$(“li>a”).live(‘click’, function(event){

event.preventDefault();

// Проверим, что сработал обработчик события и выведем текст ссылки в консоль firebug

var data = $(this).attr(‘href’)

.replace(/.+?\?(.*)$/, ‘’);

});

})

Объектные литералы

Объектный литерал – это переменная javaScript с двумя фигурными скопками, в которые можно добавлять любое количество значений, используя пары: имя-значение, разделенные запятой.

Объектные литералы. Листинг 29.6

var obj = {

“name” : ‘Иван’,

“age” : ‘25’

}

Чтобы получить доступ к этим значениям, нужно вызвать имя литерала и через точку добавить имя значения.

Вызов значений литерала. Листинг 29.7

alert(obj.name);

Что делает литералы особенно ценными, так это то, что в них можно хранить функции.

Функции в объектных литералах. Листинг 29.8

var obj = {

“name” : ‘Иван’,

“age” : ‘25’,

“func” : function() {alert(“Объектные литералы – это круто!”)}

}

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

Вызов функции в литералах. Листинг 29.9

obj.func();

Создадим функцию манипулирования модальным окном.Функция будет возвращать модальное окно, если оно существует либо создавать новое.

Функция манипулирования модальным окном. Листинг 29.10

var fx = {

“initModal” : function(){

if($(“.modal-window”).length == 0) {

return $(“<div>”)

.addClass(“modal-window”)

.appendTo(“body”);

}

else {

return $(“.modal-window”);

}

}

}

Далее модифицируем обработчик события click.

Вызов функции модального окна. Листинг 29.11

jQuery(function($) {

var fx = {

“initModal” : function(){

if($(“.modal-window”)).length == 0 {

return $(“<div>”)

.addClass(“modal-window”)

.appendTo(“body”);

}

else {

return $(“.modal-window”);

}

}

}

$(“li>a”).live(‘click’, function(event){

event.preventDefault();

// Проверим, что сработал обработчик события и выведем текст ссылки в консоль firebug

var data = $(this).attr(‘href’);

modal = fx.initModal();

});

})

Теперь по событию click будет появляться модальное окно. Но мы его не заметим до тех пор, пока не пропишем css-стили для класса .modal-window

Стили .modal-window. Листинг 29.12

.modal-window {

position:absolute;

top:150px;

left:50%;

width:400px;

margin-left:200px;

padding:10px;

border:solid 1px #ccc;

background-color:#fff;

z-index:99;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

-webkit-box-shadow: 1px 1px 5px #999;

-moz-box-shadow: 1px 1px 5px #999;

box-shadow: 1px 1px 5px #999;

}

Метод Ajax

Основная функция для работы с AJAX-запросами – это функция ajax().

Использование вспомогательной функции ajax. Листинг 29.13

<script type="text/javascript">

$(function () {

$("button:first").click(function(){

$.ajax({

url: "testAjax.php",

type: "POST",

data: "name=Jonh&age=35",

timeout: 3000,

beforeSend: function(){

$("div").text("Загрузка...");

},

success: function(data){

$("div").html(data);

},

error: function(xhr, status){

$("div").html("<span>" + status + "</span>");

}

});

});

$("button:last").click(function(){

$("div").empty();

});

});

</script>

…

<div id="target"></div>

<button>Загрузить</button>

<button>Очистить</button>

Рассмотрим основные опции функции ajax.

  • url – файл, к которому будет отправлен запрос.

  • type – способ передачи данных: $_POST либо $_GET

  • timeout – время выполнения запроса, число в милисекундах. Работа ajax останавливается, если за данное время запрос не успел обработаться. Параметр необязательный.

  • beforeSend – функция срабатывающая, во время выполнения запроса. Т.к. по умолчанию, ajax-запросы передаются в асинхронном режиме, то в процессе выполнения запроса, мы можем выполнять любые другие функции.

  • success - функция срабатывающая после успешного выполнения запроса.

  • error – функция, выводящая ошибки запроса, если таковые имеются.

  • data – строка с передаваемыми данными. Объект должен представлять собой пары ключ/значение.

Часто возникает следующая ситуация: все AJAX-запросы должны отправляться одному и тому же файлу, с использованием одних и тех же опций. Различаться будут только отправляемые на сервер данные. В таком случае рациональнее воспользваться методом ajaxSetup()

Совместное использование ajaxSetap() и ajax(). Листинг 29.14

<script type="text/javascript">

$(function () {

$.ajaxSetup({

url: "testAjaxSetup.php",

type: "POST",

timeout: 3000,

beforeSend: function(){

$("div:last").empty();

$("#result").text("Загрузка...");

},

success: function(data){

$("div:last").html(data);

$("#result").text("Готово!");

},

error: function(xhr, status){

$("#result").html("<span>" + status + "</span>");

}

});

$("button:eq(0)").click(function(){

$.ajax({ data: "q=1&er=none" });

});

$("button:eq(1)").click(function(){

$.ajax({ data: "q=2&er=none" });

});

});

</script>

</head>

<body>

<div id="result"></div>

<div></div>

<button>Запрос №1</button>

<button>Запрос №2</button>

Как видно из листинга, все передаваемые параметры, за исключением параметра data, находятся в функции ajaxSetup. Задача функции ajax сводится к тому, чтобы связать конкретный селектор с данными, которые необходимо передать в файл-обработчик.

По щелчку на любую из кнопок листинга в testAjaxSetup.php будут поступать переменные $_POST[‘q’] и $_POST[‘er’].

Вернемся к нашему модальному окну.

Подключение ajax. Листинг 29.15

$(“li>a”).live(‘click’, function(event){

event.preventDefault();

// Проверим, что сработал обработчик события и выведем текст ссылки в консоль firebug

var data = $(this).text();

modal = fx.initModal();

$.ajax({

type: “Post”,

url: “ajaxfile.php”,

data: “url=” +data,

success: function(data) {

modal.append(data);

},

error: function(msg) {

modal.append(msg);

}

});

});

Теперь по клику будет создаваться модальное окно и в это окно будет помещаться всё текстовое содержимое файла ajaxfile.php (всё что выводится на экран в данном файле).

Создание кнопки закрытия окна

Создание кнопки закрытия окна. Листинг 29.16

$(“li>a”).live(‘click’, function(event){

event.preventDefault();

// Проверим, что сработал обработчик события и выведем текст ссылки в консоль firebug

var data = $(this).text();

modal = fx.initModal();

$(“<a>”).attr(“href”, “#”)

.addClass(“modal-close-btn”)

.html(“×”)

.click(function(event){

event.preventDefault();

$(“.modal-window”).remove();

}).appendTo(modal);

$.ajax({

type: “Post”,

url: “ajaxfile.php”,

data: “url=” +data,

success: function(data) {

modal.append(data);

},

error: function(msg) {

modal.append(msg);

}

});

});

Добавим css-стили для кнопки закрытия

Стили для класса modal-close-btn. Листинг 29.17

.modal-close-btn{

position:absolute;

top:1px;

right:1px;

margin:0;

padding:0;

text-decoration:none;

color:red;

font-size:18px;

}

.modal-close-btn:before{

position:relative;

top:-1px;

content: “Закрыть”;

font-size:12px;

}

Эффект плавного исчезновения модального окна

Добавим в объектный литерал функцию закрытия окна boxout()

Вызов функции модального окна. Листинг 29.18

jQuery(function($) {

var fx = {

“initModal” : function(){

if($(“.modal-window”)).length == 0 {

return $(“<div>”)

.addClass(“modal-window”)

.appendTo(“body”);

}

else {

return $(“.modal-window”);

}

},

“boxout” : function() {

$(“.modal-window”).fadeOut(“slow”, function(){

$(this).remove();

});

}

}

});

Чтобы включить данную функцию в сценарий, внесем изменения в обработчик события клика на кнопку “Закрыть”.

Вызов функции закрытия окна. Листинг 29.19

$(“li>a”).live(‘click’, function(event){

event.preventDefault();

// Проверим, что сработал обработчик события и выведем текст ссылки в консоль firebug

var data = $(this).text();

modal = fx.initModal();

$(“a”).attr(“href”, “”)

.addClass(“modal-close-btn”)

.html(“×”)

.click(function(event){

fx.boxout();

});

$.ajax({

type: “Post”,

url: “ajaxfile.php”,

data: “url=” +data,

success: function(data) {

modal.append(data);

},

error: function(msg) {

modal.append(msg);

}

});

});

Окончательный код

Модальное окно. Листинг 29.20

<script type="text/javascript">

jQuery(function($){

var fx = {

'initModal': function(){

if($(".modal-window").length == 0){

$("<div>")

.attr("id", "jquery-overlay")

.css({

"background":"#000 repeat-x",

"opacity": "0.7",

"position":"fixed",

"height":"100%",

"width":"100%",

"left" : 0,

"top":0

})

.fadeIn("slow")

.appendTo("body");

return $("<div>")

.addClass("modal-window")

.fadeIn("slow")

.appendTo("body");

}else{

return $(".modal-window");

}

}

}

$(".mainblocktext a")

.live("click", function(event){

event.preventDefault();

var data = $(this).attr("href").replace("<?=Kohana::$base_url?>", "");

var modal = fx.initModal();

$("<a>").attr("href", "#")

.addClass("modal-close-btn")

.html("×")

.click(function(event){

event.preventDefault();

$(".modal-window").fadeOut("slow", function(){$(this).remove();});

$("#jquery-overlay").fadeOut("slow", function(){$(this).remove();});

})

.appendTo(modal);

$.ajax({

type: "POST",

url: "<?=Kohana::$base_url?>tovars/tovarsajax",

data: "id=" + data,

success: function(data){

modal.append(data);

},

error: function(msg){

modal.append(msg);

}

});

});

}

)

</script>
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности