Главная / Java Script / Mootools /


Mootools - PageMooSlider v1.0

Понедельник, 15 Февраль 2010

 

Проблема навигации по страницам сайта всегда была актуальна, и таковой будет всегда так как если сайт может содержать большое количество страниц, то необходимо обеспечить удобное и интуитивно-понятное перемещение для пользователя по этим страницам.

 

Решений данной задачи множество, к примеру реализация навигации в Joomla 1.5! организована с помощью плагина для навигации "pagenavigation.php" который находиться по адресу /plugins/content/pagenavigation.php, и выполняет все манипуляции по разбивке материалов по страницам, этот плагин написан на PHP и в данной статье он нам не интересен, так как в этой статье мы рассмотрим плагин для навигации написанный на Javascript и использующий библиотеку Mootools v1.2.4.

 

Итак рассмотрим данный плагин более подробно. Как уже говорилось выше, данный плагин использует библиотеку Mootools, поэтому для работы плагина ее нужно подключить к странице следующим образом:

 

Между тегами документа вашей страницы пропишите подключение библиотеки:

 

  • <script src="mootools-1.2.4-core-yc.js" 
  •  
  • type="text/javascript"></script>

 

в src укажите путь где у вас будет находиться данная библиотека.

 

Работает данный плагин на основе класса "PageMooSlider" - который выполняет всю работу по созданию навигации, его тоже подключаем вслед за библиотекой:

 

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

 

И стили для блока с навигацией:

 

  •  
  • <link href="PageMooSlider.css" rel="stylesheet" media="all" /> 
  •  

 

Не забываем про путь в src!

 

Итак подключив скрипты библиотеки и плагина к странице, после их подгрузки, необходимо инициализировать(вызвать) методы из класса "PageMooSlider" которым передаются параметры(данные) на основе которых будет формироваться блок навигации.

 

Рассмотрим это по подробней: Устанавливаем событие для объекта WINDOW - "domready", это сыбытие загрузки DOM(объектной модели html документа) в браузер при котором инициализируется функция которая

 

1) Извлекает параметр href из окна браузера 2)Создает экземпляр класса "PageMooSlider", с пользовательскими настройками:

 

  •  
  •     <script type="text/javascript">
  •       //<![CDATA[
  •         window.addEvent('domready', function() {
  •             var page = /page=([^#&]*)/.exec(window.location.href);
  •       page = page ? page[1] : 400;
  •  
  •         new PageMooSlider({
  •           container: $('page_slider4'),
  •           pagesTotal: 400,
  •         pagesSpan: 10,
  •         pageCurrent: page,
  •         baseUrl: 'index.html?page=%page%',
  •         lang: {
  •           next  : "Next",
  •           last  : "Last",
  •           prior : "Prior",
  •           first : "First",
  •           arrowRight : String.fromCharCode(8594),
  •           arrowLeft  : String.fromCharCode(8592)
  •         }
  •         });
  •     });
  •       //]]>
  •   </script>
  •  

 

Впишите это в документ вслед за подключениями библиотеки и плагина.

 

Итак построчно разберем параметры которые будут переданы в класс "PageMooSlider" его методам на обработку.

 

1)container - контейнер в который будет встроен блок с навигацией; 2)pagesTotal - общее количество страниц; 3)pagesSpan - отображение количества пунктов в блоке с навигацией; 4)pageCurrent - устанавливает текущий номер страницы ; 5)baseUrl - тип url, может быть например 'index.php?page=%page%', - если сайт на php. 6)lang - устанавливает заголовки навигационным кнопкам, arrowRight и arrowLeft - это коды символов (те самые стрелочки и т.п).

 

Теперь сам HTML код документа должен выглядеть следующим образом:

 

  •  
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  •  
  • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  •     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  •   <title>PageMooSlider - Mootools class</title>
  •   <link href="PageMooSlider.css" rel="stylesheet" media="all" /> 
  •   <style type="text/css">
  •       html {background:#fff;}
  •     .main {width:600px;  margin:0 auto;}
  •   </style>
  •   <script src="mootools-1.2.4-core-yc.js" type="text/javascript"></script>
  •     <script src="PageMooSlider.js" type="text/javascript"></script>
  •     <script type="text/javascript">
  •       //<![CDATA[
  •         window.addEvent('domready', function() {
  •             var page = /page=([^#&]*)/.exec(window.location.href);
  •       page = page ? page[1] : 400;
  •  
  •  
  •       new PageMooSlider({
  •           container: $('page_slider1'),
  •           pagesTotal: 400,
  •         pagesSpan: 10,
  •         pageCurrent: page,
  •         baseUrl: 'index.html?page='
  •         });
  •  
  •     });
  •       //]]>
  •   </script>
  • </head>
  • <body>
  •   <div class="main">
  •     <p>Пример простого использования плагина</p>
  •     <div class="pagemooslider" id="page_slider1"></div>
  •   </div>  
  • </body>
  • </html>
  •  

 

Демо c четырьмя вариантами настройки можете посмотреть здесь PageMooSlider Demo

 

Скачать архив - PageMooSlider Download

 

В завершении описания хочу привести пример использования этого чудесного плагина в связке PHP&MySql. Этапы подключения - библиотеки, стилей и плагина, аналогичны как и в html версии, описанной выше, поэтому пропускаем их, и сразу переходим к формированию параметров для передачи их функциям класса "PageMooSlider".

 

Главный параметр который будет устанавливаться динамически - это как вы наверное уже догадались - " pagesTotal" (общее количество страниц), для простоты примера пусть это количество будет зависить от количества статей.

 

Другими словами - в начале осуществляем запрос к БД на выборку всех записей (статей), считаем их и полученное значение устанавливаем в параметр для экземпляра нашего класса "PageMooSlider".

 

Выглядит это (в упрощенном виде) таким образом:

 

  •  
  • <?
  •  
  • $db = mysql_connect ("localhost","user","pass");
  • mysql_select_db ("db_name", $db);
  • $row = mysql_query("SELECT * FROM article ORDER BY id DESC, $db);
  •  
  • if($row){$pagesTotal = mysql_num_rows($row);}
  •  
  • ?>
  •  

 

Здесь соединение с Бд и выборка всех записей из таблицы "article", затем подсчет количества записей, на основе этого количества выводим в параметр "pagesTotal" полученное значение (которое рано количеству статей/записей). Выглядит это так:

 

  •  
  •  <script type="text/javascript">
  •       //<![CDATA[
  •         window.addEvent('domready', function() {
  •             var page = /page=([^#&]*)/.exec(window.location.href);
  •       page = page ? page[1] : 400;
  •  
  •         new PageMooSlider({
  •           container: $('page_slider4'),
  •           pagesTotal: <?php echo $pagesTotal ?>,
  •         pagesSpan: 10,
  •         pageCurrent: page,
  •         baseUrl: 'index.php?page=%page%',
  •         lang: {
  •           next  : "Next",
  •           last  : "Last",
  •           prior : "Prior",
  •           first : "First",
  •           arrowRight : String.fromCharCode(8594),
  •           arrowLeft  : String.fromCharCode(8592)
  •         }
  •         });
  •     });
  •       //]]>
  • </script>
  •  

 

Обратите внимание на параметр "baseUrl" - расширение у файла должно быть php так как пишем на php :).

 

И теперь после того как известно количество записей (и все они выбраны из таблицы и помещены в массив), извлекаем из href переменную $_GET, которая содержит в себе номер страницы, и далее в зависимости от ее значения выполняем цикл в котором формируется массив соответствующий извлечённому ряду выборки из БД, в котором храниться данные в ассоциативных индексах, используя в качестве ключей имена полей из таблицы (выбираете имена полей которые у вас в таблице article например.), в качестве примера выбирается краткое описание статьи - поле "description". Получается что на каждом цикле переменная перезаписывается (в нее заносятся по очереди разные описания) и в итоге присваивается значение из ряда выборки с номером равным номеру страницы (не забываем про $_GET).

 

Выглядеть это будет так:

 

  •  
  • <?php 
  •   $page = (int)$_GET['page'];
  •   if($page == 0 and $page == ''){$page = 1;}
  • ?>
  •   <h1>This page number <span>(<?php echo $page; ?>)</span></h1>
  • <?php 
  •  
  •   for($i=0; $i<$page; $i++){
  •     $array = mysql_fetch_array ($row);
  •     $text = $array["description"];
  •   }
  •   echo "<p>".$text."</p>";
  •  ?>
  •  

 

Учтите данный скрипт не оптимизирован в плане производительности и нагрузки на сервер, поэтому рассматривается только как пример!

 

Все в месте будет выглядеть таким образом:

 

  •  
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  •  
  • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  •     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  •   <title>PageMooSlider - Mootools class</title>
  •   <link href="PageMooSlider.css" rel="stylesheet" media="all" /> 
  •   <style type="text/css">
  •       html {background:#fff;}
  •     .main {width:600px;  margin:0 auto;}
  •     .item{ 
  •       width:500px; 
  •       height:350px; 
  •       margin: 50px auto 10px auto;
  •     }
  •     h1{ color:#2B90C0; font-size:16px; border-bottom:#CCCCCC 1px solid;}
  •     h1 span{ color:#FF0033; font-size:18px;}
  •   </style>
  •   <script src="mootools-1.2.4-core-yc.js" type="text/javascript"></script>
  •     <script src="PageMooSlider.js" type="text/javascript"></script>
  •   <?php 
  •     $db = mysql_connect ("localhost","user","pass");
  •     mysql_select_db ("db_name", $db);
  •     $row = mysql_query("SELECT * FROM article ORDER BY id DESC", $db);
  •  
  •     if($row){$pagesTotal = mysql_num_rows($row);}
  • ?>
  •     <script type="text/javascript">
  •       //<![CDATA[
  •         window.addEvent('domready', function() {
  •             var page = /page=([^#&]*)/.exec(window.location.href);
  •       page = page ? page[1] : 400;
  •  
  •         new PageMooSlider({
  •           container: $('page_slider4'),
  •           pagesTotal: <?php echo $pagesTotal ?>,
  •         pagesSpan: 10,
  •         pageCurrent: page,
  •         baseUrl: 'index.php?page=%page%',
  •         lang: {
  •           next  : "Next",
  •           last  : "Last",
  •           prior : "Prior",
  •           first : "First",
  •           arrowRight : String.fromCharCode(8594),
  •           arrowLeft  : String.fromCharCode(8592)
  •         }
  •         });
  •     });
  •       //]]>
  •   </script>
  • </head>
  • <body>
  •   <div class="main">
  •   <div class="item">
  •  
  •     <?php 
  •       $page = (int)$_GET['page'];
  •       if($page == 0 and $page == ''){$page = 1;}
  •     ?>
  •     <h1>This page number <span>(<?php echo $page; ?>)</span></h1>
  •     <?php 
  •  
  •     for($i=0; $i<$page; $i++){
  •       $array = mysql_fetch_array ($row);
  •       $text = $array["description"];
  •     }
  •     echo "<p>".$text."</p>";
  •      ?>
  •   </div>
  •     <div class="pagemooslider" id="page_slider4"></div>
  •   </div>  
  • </body>
  • </html>
  •  

 

Демо можете посмотреть здесь PageMooSlider Demo

 

Скачать архив - PageMooSlider Download

 

В заключении статьи хочу поблагодарить Lexx - автора данного плагина, за предоставленный им качественный и полезный скрипт, и пожелать ему успехов в разработке плагинов под Mootools. Еще раз спасибо за предоставленный материал!

 

В продолжении: PageMooSlider с использованием Ajax

 

PS. Читайте последние записи RSS RSS

Метки:

Похожие статьи:

Добавить комментарий