"Больше" стиль кнопки щебетать
Страница 1 из 2
В этой статье я объясню, как воссоздать эффект "More" кнопку, чтобы Twitterать использованием JQuery библиотеки.
Кнопка, которую мы хотим воссоздать, для непосвященных, позволяет расширить список сообщений по умолчанию отображаются без необходимости обновлять страницу (что возможно благодаря технологии Ajax, все чаще используется в среде Веб 2.0).
Мы начнем с создания тестовой базы данных состоит из одной таблицы:
CREATE TABLE сообщений ( msg_id INT PRIMARY KEY AUTO_INCREMENT, Текст сообщения );Как вы видите таблицу, которую только что построили, состоит всего из двух полей:
- msg_id которое будет идентифицировать сообщения;
- и сообщение, содержащее текст;
Для моего удобства я создал файл PHP (который я буду использовать во включении), в котором я делаю только подключение к базе данных, и я назвал его "dbconfig.php"
<? Php
Конн $ = mysql_connect ("HOST", "ИМЯ" "пароль") или умереть (mysql_error ());
mysql_select_db ("NAME_DB", $ сопп) или умереть (mysql_error ());
?>
Как уже упоминалось файл "dbconfig.php" будут включены в файлы мы создаем, чтобы не переписывать же код несколько раз.
Для выполнения эффекта необходимо создать два файла:
- впервые использован для показа первой "п" сообщений;
- и второе, что будет сделано запросов AJAX (реализовано с JQuery), чтобы отобразить "следующему сообщения".
<html>
<head>
Более <title> Кнопка щебетать стиль </ TITLE>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ SCRIPT>
<script type="text/javascript">
$ (Function () {
$ ('. More "). Нажмите кнопку (функция () {
уаг элемент = $ (это);
уаг тзд = element.attr ("Ид");
$ ('# Morebutton') сайтов ('<img src="loading.gif" />').
$. Ajax ({
Тип: 'POST',
адрес: 'more_ajax.php »,
Дата: "lastmsg = '+ MSG,
Кэш: ложь,
успех: функция (HTML) {
$ ('# Morebutton') Remove ().
$ ('# More_updates') Append (HTML).
}
});
вернуться ложным;
});
});
</ Script>
</ HEAD>
<body>
<div align="center" style="width:500px;">
<? Php
включают в себя ("dbconfig.php ');
$ Sql_check = mysql_query ("SELECT * FROM порядок более msg_id LIMIT DESC 2");
в то время как ($ строка = mysql_fetch_array ($ sql_check)) {
$ Msg_id = $ строки ['msg_id'];
$ MSG = $ строки ['сообщение'];
?>
<Div ID = "<Php Эхо $ msg_id;?>" Class = "boxMsg">
<span style="padding:5px;"> <PHP Эхо $ MSG;?> </ SPAN>
</ P>
<? Php
}
?>
<div id="more_updates"> </ P>
<div id="morebutton"> <ID = "<PHP Эхо $ msg_id;?>" класс = "больше" HREF = "#"> Подробнее </> </ P>
</ P>
</ Body>
</ Html>
Как вы можете видеть после просмотра первых 2 сообщений (отсортированные по "msg_id" в порядке убывания), есть пустые дел с идентификатором "more_update" (там будет "упаковано" следующему сообщения) и дел, что представляет собой следующий ссылку "Подробнее", к которой мы связываем - метод использования JQuery - сообщения действия запроса.
Заголовок (<head> ...</ HEAD>) документа, после вызова JQuery библиотеки, мы описали функцию JavaScript, связанные с ссылку "Подробнее" (эта функция вызывается с " события нажатия ).
С помощью этой функции, взятых из "паспортом" идентификатор ссылки ("msg_id") отображает последние сообщения, этот идентификатор передается на второй файл PHP в качестве параметра после запроса Ajax , тем временем, заменить содержимое контейнера дел ссылка "More" с прекрасным анимированный GIF с эффектом "загрузки" , просто чтобы убить время.
Если запрос Ajax прошла успешно (Успех применения собственность) мы удаляем все дела "morebutton" и вставьте HTML-ответ (содержащий другие сообщения) в контейнер DIV "more_update" с помощью добавления .
 |
ASP Zero (книгу)
Обучение Microsoft ASP и VBScript, с нуля. Находясь всего в 29 €. |
 |
Javascript (курс)
Полное руководство для сценариев на стороне клиента. С 39 €. |
 |
PHP (курс)
Полный курс для создания динамических веб-сайтов. От 49 €. |