Скачать можно отсюда: jquery canvas plugin jcanvas

Или с сайта автора: jCanvas

Итак, нам понадобятся два файла:

1. index.php — загружаем основу и немного контента из базы
2. loadmore.php — динамическая загрузка данных

Эти два файла нужны чтобы взаимодействовать с базой. Я использую MySQL.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(window).scroll(function(){
	if($(window).scrollTop() == $(document).height() - $(window).height()){
		$('div#loadmoreajaxloader').show();
		$.ajax({
			url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
			success: function(html){
				if(html){
					$("#postswrapper").append(html);
					$('div#loadmoreajaxloader').hide();
				}else{
					$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
				}
			}
		});
	}
});

Этот код занимается тем, что смотрит проскролили ли мы до низа. Он расположен в index.php. Тут сразу скажу, что такой способ не айс. Т.к. если мы будем выводить мало контента и скролбара на странице не будет, то и событие не сработает.

Я вынес ajax в отдельную функцию, которую можно вызывать как ссылкой, так и при срабатывании события. Но тут я привожу код без правок.

1
2
3
4
5
6
7
8
9

$dblink = mysql_connect('DB_HOST', 'DB_USERNAME', 'DB_PASSWORD');
mysql_select_db('DB_NAME');
if($_GET['lastid']){
	$query = 'SELECT * FROM infinitescrolling WHERE id < "'.$_GET['lastid'].'" ORDER BY id DESC LIMIT 0, 10';
	$result = mysql_query($query);
	while($rec = mysql_fetch_object($result)) {
		echo '<div class="postitem" id="'.$rec->id.'">Post no '.$rec->id.': '.$rec->text.'"</div>';
	}
}

Ну а в loadmore.php у нас загрузка новых записей из базы.

Это только пример. Я знаю, что в продакшене такое никогда не будет и не имеет права использоваться. Это лишь пример.

Итак, чем-же удобны всплывающие окна? Ответ прост. Это привлекает внимание, это стильно, модно и просто в исполнении. Эти появляющиеся окна по сути похожи на то как работает lightbox, т.е. тоже плавное затемнение фона и появление окна посередине экрана.

Ну и от теории к практике.

Для начала нам нужны следующие файлы: jquery.js, jwin.css и jwin.js

И код который вставляется в HEAD файла.

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jwin.js"></script>
<link href="./js/jwin.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
var cont;
cont = 'Текст сообщения';
function testWindow(){
var w = $.jWin.create({alwaysCentered:true,autoShow:false,
modal:true,overlayOpacity:0.8,overlayColor:'#000',
title: '<strong>Заголовок</strong>',handleEscape:true
});
w.setContent(cont);
w.show();
}
</script>


Ссылки формируются как обычно, но плюс onclick=»testWindow();»
Естественно никто не мешает усовершенствовать интерефейс. Это и так переделка окошек от http://maxantonov.name за что ему огромнейшее спасибо.

UPD: было обновление у на сайте у Макса забирайте новую версию, умеет заберать контент через $.get и вставит в .body окна из http:// и из ./file.html