Rambler's Top100

ПОСТРАНИЧНАЯ НАВИГАЦИЯ
без перезагрузки страницы

Если у вас большой объём контента одной темы, это может быть и текстом и страница с картинками, но размещение его слишком удлиняет страницу , то решить проблему разрыва страницы, без перезагрузки всей страницы, можно с использованием CSS и jQuery-библиотеке JavaScript, более подробно об этой библиотеке можете прочитать в Википедии

Существуют различные способы реализации постраничной навигации без перезагрузки страницы, один из этих способов, простой и с красивым эффектом затухания при смене контента расмотрим здесь

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

ДEMO ИСХОДНИКИ

Распакуйте скачанный файл, там будет папка js, в которой два файла jquery.min.js и main.js. Папку js с файлами загрузиите в корневую папку своего сайта. Затем эти два файла нужно подключить к странице сайта между тегами <head> </head>, смотрите код ниже, строки 09, 10


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//>
<html >

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Постраничная навигация</title>
  <LINK href="style.css" TYPE="text/css" rel="stylesheet">

  <script src="js/jquery.min.js"></script>
  <script src="js/main2.js"></script>

</head>

Скопируйте и добавте в свой файл CSS нижеследующий код, высоту страницы можно изменить в строке 16, height:600px;, вместо 600px, поставте нужную вам высоту


/*---------------------Постраничная навигация---------------------- */
.example{

width:560px;
border:0px;
margin:5px auto;
padding:5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px

}


#conte {
  position:relative;
  height:600px;
}


#conte .page {
 position:absolute;
 top:0px;
}


.pagination{
padding: 2px;
}


.pagination ul{
 margin: 20px;
 padding: 0;
 text-align: center;
 font-size: 16px;

}


.pagination li{
 list-style-type: none;
 display: inline;
 padding-bottom: 1px;

}

.pagination a, .pagination a:visited{
  padding: 0 5px;
  border: 1px solid #9aafe5;
  text-decoration: none;
   color: #2e6ab1;
}


.pagination a:hover, .pagination a:active{
  border: 1px solid #2b66a5;
  color: #000;
  background-color: #FFFF80;

}


.pagination a.prevnext{
 font-weight: bold;
}


.page_number {
 border: 1px solid #9aafe5;
 color: #2e6ab1;
 padding:5px;
 margin:0 auto;   
text-align: center;
width: 20px;
}

Перед заголовком открываем тег div и присваеваем ему класс "example"
(<div class="example">), в конце всего текста закрываем тег </div> (смотри строки 01 и 32)

Под заголовком открываем тег div и присваеваем ему id="conte" class="page"
(<div id="conte" class="page">) и в конце текста закрываем тег </div> (стр. 05-15)

Затем выделите и скопиируйте код из строк 17-30 и вставте его между двумя закрывающими тегами </div>


<div class="example">

   <h1>ЗАГОЛОВОК</h1>

   <div id="conte" class="page">

     <p> Текст абзаца  </p>

     <p> Текст другого абзаца </p>

     <p> Текст следующего абзаца </p>

     <p> Текст ещё обзаца и так далее ниже все абзацы </p>

   </div>

           <div class="pagination">
	<ul>
<li>
 <a href="#" id="prev" class="prevnext">« Назад</a>
</li>
<li>
<a href="#" id="next" class="prevnext">Вперёд »</a>
</li>
	</ul>

	<br />
     <div id="page_number" class="page_number">1</div>

          </div>

</div>

 

 

 

 

Rambler's Top100 Яндекс цитирования