Публікації блогу Міки > Рубрика: Колекція скриптів > "Сайт на jQuery AJAX без JS"


Сайт на jQuery AJAX без JS


17 Серпень 2010 00:00:00


Сайт чудово індексується пошуковиками та працює при відключеному JavaScript.

Приклад роботи сайту можна глянути тут
Вихідні файлики

Я, за звичкою, роблю всі сторінки на php :) Але html тут теж буде доречним.

Отож, у нас є папка із сайтом. В папці із сайтом є ще дві папочки: css і js.
В папці css - стилі, які ми не розглядатимемо.
А в папці js - бібліотека jquery-1.4.2.min.js та скрипт nav.js.

У корені сайту три пхп сторіночки: index.php, mag.php, contakt.php. У нашому випадку відрізняються ці три сторіночки тільки контентом. Тому розглянемо структуру однієї, індексної.

Отож, index.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

<title>Сайт на jQuery AJAX без JS</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />

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

<script type="text/javascript" src="js/nav.js"></script>

<script type="text/javascript">

$(function(){

AjaxContent.init({containerDiv:"#ajax-wrap",contentDiv:"#text"}).ajaxify_links("#menu a");

});

</script>


</head>

<body>

<ul id="menu">

<li><a href="index.php">Головна</a></li>

<li><a href="mag.php">Магазин</a></li>

<li><a href="contakt.php">Контакт</a></li>

</ul>


<div id="ajax-wrap">

<div id="text">

<h1>ГОЛОВНА СТОРІНКА </h1>

<p>І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. </p>

<p>І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. І тут наш основний текст сторінки. </p>

<p>І тут наш основний текст сторінки. </p>

</div>

</div>


<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

<script type="text/javascript">

try {

var pageTracker = _gat._getTracker("UA-15016663-1");

pageTracker._trackPageview();

} catch(err) {}</script>


</body>

</html>




І скрипт nav.js:
var AjaxContent = function(){
var container_div = '';
var content_div = '';
return {
getContent : function(url){
$(container_div).animate({opacity:0}, //Turn the opacity to 0
function(){ // the callback, loads the content with ajax
$(container_div).load(url+" "+content_div, //only loads the selected portion
function(){
$(container_div).animate({opacity:1}); //and finally bring back the opacity back to 1
}
);
});
},
ajaxify_links: function(elements){
$(elements).click(function(){
AjaxContent.getContent(this.href);
return false; //prevents the link from beign followed
});
},
init: function(params){ //sets the initial parameters
container_div = params.containerDiv;
content_div = params.contentDiv;
return this; //returns the object in order to make it chainable
}
}
}();

Автор: Міка
Кількість переглядів: 1238

Рейтинг: Рейтинг
Ваша оцінка:
1
2
3
4
5






Коментарів ще нема

  • X
    Ваше ім'я:

    Ваш E-mail:
    Ваш коментар:

    Ми хочемо знати, що Ви не робот. Будь ласка введіть суму цифрами:
    Сімсот Сімдесять Сім