Заказчики меня часто спрашивают сделать вывод новостей на jQuery. Поэтому я решил привести для всеобщего пользования все скрипты наиболее интересного вывода новостей на PHP jQuery и SQL.
Возможности плагина:
- отображение ajax календаря;
- вывод новостей из базы данных;
- эффекты и анимация на jQuery;
- возможность лёгкой установки и настройки
Сразу же представляю Вам пример календаря новостей:
Конечно - те, кто не терпит и не хочет разбираться может скачать архив, со структурой указанной ниже, но я настоятельно рекомендую прочитать всю статью, естественно не для снижения показателя отказов, а для экономии Вашего времени:
./ index.php config.php calendar.php news.js style.css calendar.sql ajaxc.php ajax-loader.gif
Структура таблицы базы данных будет следующей, хотя Вы можете изменить под свои нужды:
CREATE TABLE IF NOT EXISTS `news` (
`id` mediumint(9) NOT NULL AUTO_INCREMENT,
`name` text,
`opisanie` text,
`razdel` varchar(50) NOT NULL,
`avtor` text,
`count` int(10) NOT NULL,
`comment` int(11) NOT NULL,
`time` datetime NOT NULL,
`arhiv` varchar(255) NOT NULL,
`href` varchar(50) DEFAULT NULL,
`si` varchar(255) NOT NULL,
`bi` varchar(255) NOT NULL,
`metka` varchar(255) NOT NULL,
PRIMARY KEY (`id`),
FULLTEXT KEY `statii` (`opisanie`,`name`,`razdel`,`avtor`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=0;
Все файлы, которые мы будем использовать в выводе новостей должны быть в кодировке UTF8, кодировка таблиц баз данных так же должна быть UTF8.
Календарь будет на php, весь php календаря:
<?php
include_once "calendarClass.php";
$db = new Calendar();
//error_reporting(E_ALL);
$months=array(1 => "Январь",2 => "Февраль",3 => "Март",4 => "Апрель",5 => "Май",6 => "Июнь",7 => "Июль",8 => "Август",9 => "Сентябрь",10 => "Октябрь",11 => "Ноябрь",12 => "Декабрь");
$month = (isset($_GET['m'])) ? intval($_GET['m']) : date('m');
$year = (isset($_GET['y'])) ? intval($_GET['y']) : date('Y');
$day = (isset($_GET['d'])) ? intval($_GET['d']) : date('d');
$mktime=mktime(0,0,0,$month,1,$year);
$daysamount=date('t',$mktime)+1;
$weeks=floor($daysamount/7);
$firstday=date('w',$mktime)-1;
$dday=date('d');
$mmonth=date('n');
//Календарик :)
$sel_year='<select name="y" style="width:53">';
for($y=2008;$y<=date("Y");$y++) {
$sel_y=($year == $y)?' selected ':'';
$sel_year.="<option value='".$y."' ".$sel_y." >".$y."</option>";
}
$sel_year.='</select>';
$sel_month='<select name="m" style="width:85">';
for($m=1;$m<=12;$m++) {
$sel=($db->check_date($month) == $m)?' selected ':'';
$sel_month.="<option value='".$m."' ".$sel." >".$months[$m]."</option>";
}
$sel_month.='</select>';
$calendar='<div id="bodycalendar">
<div id="center">
<h2>Календарь</h2>
<div id="c">
<table cellspacing="2" cellpadding="2" class="calendar_table">
<tr><td colspan="7"><form id="ajax-calendar" method="get" action="'.$_SERVER['PHP_SELF'].'">'.$sel_month.' '.$sel_year.' <input type="hidden" name="d" value="'.$day.'" /><input value="»" id="knopka" type="submit" style="width:15" /></form></td></tr>
<tr align="center"><td class="working_days"><b>Пн</b></td><td class="working_days"><b>Вт</b></td><td class="working_days"><b>Ср</b></td><td class="working_days"><b>Чт</b></td><td class="working_days"><b>Пт</b></td><td class="weekend"><b>Сб</b></td><td class="weekend"><b>Вс</b></td></tr><tr align="center">';
$db->sql_query("SET NAMES 'utf8'");
$db->sql_query("SET CHARACTER SET 'utf8'");
$result = $db->sql_query("SELECT * FROM statii WHERE MONTH(FROM_UNIXTIME(time)) = $mmonth AND YEAR(FROM_UNIXTIME(time)) = $year");
$romonth = array();
$rowday = array();
$newarr = array();
$i = 0;
while($str = $result->fetch_array(MYSQLI_ASSOC)) {
$romonth[$i++] = (int)date('m',$str['time']);
$rowday[$i++] = date('d',$str['time']);
}
//var_dump($newarr);
//echo in_array('2011-12-25 00:00:00',$newarr);
if($firstday == -1){$firstday=6;}
for($i=0;$i<$firstday;$i++) {$calendar.="<td> </td>";}
for($q=1;$q<$daysamount;$q++) {
if($mktime <= time()) {
if($month == $mmonth && $dday < $q) {
$lnk=$q;
} else {
if($q < 10) {
$dd = (int)$q;
}
else {
$dd = (int)$q;
}
if(in_array($dd,$rowday) & in_array($month,$romonth))
{
$lnk="<a class=\"isnews\" href='y=$year&m=$month&d=$q'>$q</a>";
}
else {
$lnk="$q";
}
}
} else {
$lnk=$q;
}
if (($q+$firstday)%7==1){$calendar.="</tr><tr align='center'>";}
if($day == $q) {
$calendar.="<td class='tooday'> <b>$lnk</b> </td>";
} else {
$calendar.="<td> $lnk </td>";
}
}
$calendar.="</tr></table>
</div>
</div>
<div id=\"centerb\" style=\"width:350px;\"></div>
<img id=\"loadpage\" style=\"display:none;\" src=\"ajax-loader.gif\" alt=\"Loading...\">
</div>
";
echo $calendar;
?>
Думаю у Вас не должно возникнуть трудностей в понимании работы календаря, основной код содержится в цикле, который выводит дни недели в таблицу:
for($q=1;$q<$daysamount;$q++) {
if($mktime <= time()) {
if($month == $mmonth && $dday < $q) {
$lnk=$q;
} else {
if($q < 10) {
$dd = (int)$q;
}
else {
$dd = (int)$q;
}
if(in_array($dd,$rowday) & in_array($month,$romonth))
{
$lnk="<a class=\"isnews\" href='y=$year&m=$month&d=$q'>$q</a>";
}
else {
$lnk="$q";
}
}
} else {
$lnk=$q;
}
if (($q+$firstday)%7==1){$calendar.="</tr><tr align='center'>";}
if($day == $q) {
$calendar.="<td class='tooday'> <b>$lnk</b> </td>";
} else {
$calendar.="<td> $lnk </td>";
}
}
Единственное затруднение, которое может у Вас возникнуть - это использование функции in_array в цикле. Необходимо это делать для того, чтобы проверить существует ли новость с определенно датой, которую мы проходим в цикле - если существует, то отмечаем её как ссылку, если нет -просто оставляем как есть.
Для того чтобы получить все даты существующих новостей и проверить их с помощью функции in_array нам нужно собрать все даты в единый массив:
while($str = $result->fetch_array(MYSQLI_ASSOC)) {
$romonth[$i++] = (int)date('m',$str['time']);
$rowday[$i++] = date('d',$str['time']);
}
Класс "Calendar" для работы с таблицами mysqli - часто пригождается для выполнения простых запросов, ничего сложного в нём нет(класс содержится в файле calendarClass.php в архиве с другими файлами к этой статье, скачать его можно ниже):
<?php
include_once "config.php";
class Calendar {
private $mMysqli;
function __construct(){
$this->mMysqli = new mysqli(HOST, USER, PASSWORD, DATABASE);
}
public function sql_query($query){
$this->mMysqli->query("SET NAMES 'utf8'");
$this->mMysqli->query("SET CHARACTER SET 'utf8'");
$result = $this->mMysqli->query($query);
return $result;
}
public function sql_numrows($query){
$result = $query->num_rows;
return $result;
}
function __detsruct(){
$this->mMysqli = close();
}
public function truncate_utf8($string, $max_length, $wordsafe = FALSE, $add_ellipsis = FALSE, $min_wordsafe_length = 1) {
$ellipsis = '';
$max_length = max($max_length, 0);
$min_wordsafe_length = max($min_wordsafe_length, 0);
if (strlen($string) <= $max_length) {
// No truncation needed, so don't add ellipsis, just return.
return $string;
}
if ($add_ellipsis) {
// Truncate ellipsis in case $max_length is small.
$ellipsis = substr('...', 0, $max_length);
$max_length -= strlen($ellipsis);
$max_length = max($max_length, 0);
}
if ($max_length <= $min_wordsafe_length) {
// Do not attempt word-safe if lengths are bad.
$wordsafe = FALSE;
}
if ($wordsafe) {
$matches = array();
// Find the last word boundary, if there is one within $min_wordsafe_length
// to $max_length characters. preg_match() is always greedy, so it will
// find the longest string possible.
$found = preg_match('/^(.{' . $min_wordsafe_length . ',' . $max_length . '})[' . PREG_CLASS_UNICODE_WORD_BOUNDARY . ']/u', $string, $matches);
if ($found) {
$string = $matches[1];
}
else {
//$string = substr($string, 0, $max_length);
$string = mb_substr($string, 0, $max_length, 'UTF-8');
}
}
else {
//$string = substr($string, 0, $max_length);
$string = mb_substr($string, 0, $max_length, 'UTF-8');
}
if ($add_ellipsis) {
$string .= $ellipsis;
}
return $string;
}
}
?>
Всё что мы сделали выше только php и html, сейчас перейдём к самому интересному - jQuery.
$(document).ready(function(){
function loader(){
$('#loadpage').css({
'display': 'block',
'z-index': 6000,
'background-color': '#fff',
'padding': '10px',
'font': 'bold 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif',
'border': '1px solid #d8d8d8',
'color': '#7d7c7d',
'-webkit-box-shadow': '0 0 10px #f1f1f1',
'-moz-box-shadow': '0 0 10px #f1f1f1',
'box-shadow': '0 0 10px #f1f1f1',
'-moz-border-radius': '6px',
'-webkit-border-radius': '6px',
'border-radius': '6px',
'text-align': 'center'
})
.empty();
var myel = $('#loadpage');
myel.css('position','absolute');
myel.css('top', ($('#bodycalendar').height() - myel.height()) / 2 +'px');
myel.css('left', (( $('#bodycalendar').width() - myel.width()) / 2)-10 + 'px');
}
if (!$.isFunction($.fn.on)) {
$('#ajax-calendar').live('submit',getCallendar);
} else {
$('body').on('submit','#ajax-calendar', getCallendar);
}
function getCallendar (){
var s = $('#ajax-calendar').serialize();
// 1 запрос - обновление календаря
$.ajax({
type: "GET",
data: s,
url: "calendar.php",
dataType: "html",
cache: "false",
beforeSend: function() {
loader()
$('#c').fadeOut();
},
success: function(result) {
$('#loadpage').hide();
$('#c').fadeIn(function(){
$('#c').html(result);
});
}
});
return false
};
if (!$.isFunction($.fn.on)) {
$('#c a').live('click',getNews);
} else {
$('body').on('click','#c a',getNews);
}
function getNews(){
var c = $(this).attr('href');
// 2 запрос - загрузка новостей
$.ajax({
type: "GET",
data: c,
url: "ajaxc.php",
dataType: "html",
cache: "false",
beforeSend: function() {
loader()
},
success: function(result) {
$("#centerb").fadeOut(2000,function(){
$('#centerb').html(result);
$('#centerb').fadeIn('slow');
$('#loadpage').hide();
});
}
});
return false
}
if(loadlastnews) {
$('#c a:last').trigger('click');
}
});
jQuery код содержит два ajax запроса. Первый - запрос на обновление самого календаря. Второй - для загрузки новостей. Функция loader() создаёт элемент индикатор загрузки, который центрируется в блоке. Для начала выполнения запросов я использую обработчик функцию «live», данная функция перехватывает события не только существующих элементов, но и вновь создаваемых в структуре DOM, пример функции live:
$('#ajax-calendar').live('submit',getCallendar);
Аналогичным образом используется функция live для запроса, осуществляющего загрузку новостей, с тем лишь отличием, что обработчик перехватывает событие "click":
if (!$.isFunction($.fn.on)) {
$('#ajax-calendar').live('submit',getCallendar);
} else {
$('body').on('submit','#ajax-calendar', getCallendar);
}
Для того чтобы ajax запросы, возвращающие новости, выполнялись необходим следующий код (файл ajaxc.php):
<?php
########### выод данных из таблицы ###########
require_once "calendarClass.php";
$factory = new Calendar();
$month = (isset($_GET['m'])) ? intval($_GET['m']) : date('n');
$year = (isset($_GET['y'])) ? intval($_GET['y']) : date('Y');
$day = (isset($_GET['d'])) ? intval($_GET['d']) : date('j');
function check_date($date){
$date = ($date<10)?'0'.$date:$date;
return $date;
}
if(isset($_GET['d']) && isset($_GET['m']) && isset($_GET['d'])){
$today = check_date($year).'-'.check_date($month).'-'.$day;
}
else {
$today = 'CURDATE()';
}
$news = '<ul>';
$where = "WHERE DATE(time) = '".$today."'";
$result = $factory->sql_query("SELECT name,opisanie,razdel FROM news ".$where."");
while (list($name, $opisanie,$razdel) = $result->fetch_row()){
$news .= '<li><a href="">'.$factory->truncate_utf8($name,30,true,true,true).'</a></li>';
}
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT' );
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Type: text/html; charset=UTF-8;');
echo $news.'</ul>';
?>
204 просмотра
Взаимосвязанные материалы
Продолжая обзор возможностей php при работе с excel документами, после того как в предыдущей статье ма завершили рассматривать чтение файлов excel с помощью пакета pear Spreadsheet_Excel_Reader, сл
читать...Порой для работы требуется извлекать данные из файлов xls в базу данных, что обычными средствами php не возможно.
читать...Графики на страницах с помощью PHP необходимы во многих случаях - для создания опросов и голосований, статистики. Иногда можно использовать Google Api для создания графиков, иногда PHP. Исходя из этого, мы рассмотрим сегодня примеры различных графиков на PHP и Javascript. читать...
Nivo Slider обладает множеством настроек для создания эффектного рекламного ролика на сайте.
читать...Заказчики меня часто спрашивают сделать вывод новостей на jQuery.
читать...