Отправляет email-рассылки с помощью сервиса Sendsay

Понемногу обо всем

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Январь 2011   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
beloll

Статистика

4 подписчиков
0 за неделю
←   Все выпуски   →

Сегодня хочу рассказать о динамическом формировании меню HTML-страницы.


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

Зачем это нужно? Хочется предоставить возможность ведения календаря многим людям, имеющим разную степень компьютерной грамотности и не разрабатывать  административную часть связанную с редактированием, поиском, добавлением событий. Пусть этим занимаются профессионалы , мы же воспользуемся результатами их труда.

В качестве средства работы с календарем используем и события календаря будем выводить на веб-страницу.
Для начала подготовим заготовку для нашей страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  </head>
  <body>
    <div id="calendarTitle"></div>
    <div id="events"></div>
    <div id="content" style="width:100%;height:380px">Загрузка...  </div>
  </body>
</html>

Затем в заголовок страницы между тегами <head> и </head> добавляем код работы с календарем.
Первым делом подключаем библиотеку API:

<script type="text/"&>
.load("gdata", "2.x");

Первым параметром функции load идет название библиотеки, вторым – ее версия.
Затем описываем функцию инициализации библиотеки:

function init() {
// инициализируем  библиотеку, устанавливая обработчик ошибок
  .gdata.client.init(handleGDError);
// выводим календарь
l  oadCalendar();
}

Далее, обработчик ошибок:

function handleGDError(e) {
  document.getElementById('content').setAttribute('style',   'display:none');
  if (e instanceof Error) {
  // выводим модальное окно со строкой, файлом и текстом ошибки
    alert('Ошибка в строке ' + e.lineNumber +  ' в ' + e.fileName + '\n' + 'Сообщение: ' + e.message);
    // если доступно, выводим HTTP код ошибки и строку статуса
    if (e.cause) {
      var status = e.cause.status;
      var statusText = e.cause.statusText;
      alert(Ошибка HTTP ' + status + ' с текстом: ' +
statusText);
    }
  } else {
    alert(e.toString());
  }
}

Далее пишем функцию запроса к календарю:

function loadCalendar() {
  var calendarUrl = "http://www..com/calendar/feeds/u0upesqc5es2opgjslm9sao53840group.calendar..com/public/basic/"
  //Указываем фид (адрес) реального календаря  . Получить его можно в окне управления календарем.
  var service = new .gdata.calendar.CalendarService("gdata-js-client-samples-simple");
  //Создаем сервис календаря (параметр функции - любая строка.
  var query = new .gdata.calendar.CalendarEventQuery(calendarUrl);
  //Создаем запрос к календарю. Это и дальнейшее очень напоминает работу с базой данных
  var startMin = .gdata.DateTime.fromIso8601("2010-01-07T00:00:00.000-08:00");
  var startMax = .gdata.DateTime.fromIso8601("2010-12-31T00:00:00.000-08:00");
  query.setMinimumStartTime(startMin);
  query.setMaximumStartTime(startMax);
  //Устанавливаем диапазон дат событий, которые хотим получить
  query.setOrderBy("starttime");
  query.setSortOrder("ascending");
  //Устанавливаем поле и порядок для сортировки данных
  query.setSingleEvents(false);
  //Устанавливаем способ выдачи событий календаря: true - отдельными событиями, false - списком
  service.getEventsFeed(query, listEvents, handleGDError);
  //Выполняем запрос и назначаем процедуру обработки данных в случае успеха, и знакомый нам обработчик ошибок
}

Далее идет собственно обработка событий календаря и вывод на страницу:

function listEvents(feedRoot) {
  var entries = feedRoot.feed.getEntries();
  var eventTable=document.getElementById('events');
  document.getElementById('jsSourceFinal').setAttribute('style',
      'display:none');
  if (eventTable.childNodes.length > 0) {
    eventTable.removeChild(eventTable.childNodes[0]);
  }
  document.getElementById('calendarTitle').innerHTML =   "Календарь: " + feedRoot.feed.title.$t;
  //Выводим название календаря
  var tr = eventTable.insertRow(i);
  tr.setAttribute('bgcolor','#ccffcc');
  var len = entries.length;
  var j = 0;
  for (var i = 0; i < len; i++) {
    var entry = entries[i];
    var title = entry.getTitle().getText();
    var place = entry.getContent().getText();
    var startDateTime = place.substring(6,place.indexOf('')-1).trim();
    place = place.substr(place.indexOf('Место:')+7);
    var age = place.substr(place.indexOf('Описание мероприятия:')+21);
    place = place.substr(0,place.indexOf('')-1).trim();
    var endDateTime = startDateTime.substr(startDateTime.indexOf('-')+1);
    endDateTime = endDateTime.substr(endDateTime.indexOf(',')+1).trim();
    endDateTime = endDateTime.substr(0,endDateTime.indexOf(' '));
    if (startDateTime.indexOf('-')>0){
      startDateTime = startDateTime.substr(0,startDateTime.indexOf('-')-1);
    }
    startDateTime = startDateTime.substr(startDateTime.indexOf(',')+1).trim();
    var startMonth = startDateTime.substr(startDateTime.indexOf(' ')+1,3).trim();
    startDateTime = startDateTime.substr(0,startDateTime.indexOf(' '));
    tr = eventTable.insertRow(j++);
    tr.setAttribute('bgcolor','ffffff');
    td = tr.insertCell(0);
    td.appendChild(document.createTextNode(startMonth));
    td = tr.insertCell(1);
    if(startDateTime==endDateTime){
      td.appendChild(document.createTextNode(startDateTime));
    }else{
      td.appendChild(document.createTextNode(startDateTime + '-' + endDateTime));
    }
    td = tr.insertCell(2);
    td.appendChild(document.createTextNode(title));
    td = tr.insertCell(3);
    td.appendChild(document.createTextNode(age));
    td = tr.insertCell(4);
    td.appendChild(document.createTextNode(place));
  }
}

Здесь мы работаем с краткой версией событий – это уменьшает трафик, но требует некоторых усилий по парсингу результата. Можно получать полноформатные события и в следующих статьях мы рассмотрим работу с таким форматом данных.
И в конце последней строкой скрипта запускаем процедуру инициализации, которая запустит механизм обработки календаря после загрузки библиотеки :
.setOnLoadCallback(init);
Вот и все. В дальнейшем планирую рассказать о работе с календарем на PHP и Java.
Сегодня хочу рассказать о динамическом формировании меню HTML-страницы.
Зачем это нужно? Предположим, вы создаете страничку, демонстрирующую фотоальбомы, и хотели бы формировать меню сайта в зависимости от таких альбомов. При этом изменять код каждый раз, когда добавится новый альбом или владелец сайта изменит название или структуру http://www.beloll.ru/wp-admin/edit.phpальбома исправлять код не самое лучшее решение. Гораздо удобнее использовать технику формирования динамического меню.
Итак, начнем.
Для обучения создадим файл topmenu.xml, в котором и будут храниться пункты будущего меню.

<?xml version="1.0" encoding="utf-8"?>
<menu title="Тестовая страница">
  <menuitem>
 <label>Меню1</label>
 <link>#page1</link>
  </menuitem>
  <menuitem>
   <label>Меню2</label>
 <link>#page2</link>
  </menuitem>
  <menuitem>
   <label>Меню3</label>
 <link>#page3</link>
  </menuitem>
 </menu>

Файл имеет простую структуру: кроме заголовка, который также можно отображать на странице, здесь содержатся названия пунктов меню и ссылки.
Простой шаблон страницы index.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>Динамическое меню с jQuery</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="1.css" type="text/css" media="screen,projection" />
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="header">
  <h1></h1>
  <h3>Динамическое меню с jQuery</h3>
  <ul id="nav">
  </ul>
</div>
<div class="content">
<h2></h2>
<p>Основной текст</p>
</div>
<div id="footer">
  <p>Нижняя часть странцы</p>

</div>
</body>
</html>

В файле мы подключаем библиотеку jQuery и собственный файл с JavaScript, а так же простенький файл с таблицей стилей.
Файл 1.css:

body {
 background:#fff;
 font: 16px/1.95em "Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;
 margin:0;
 color:#666;
 padding-top:20px;
 border:3px solid #eee;
}
html {
 border:15px solid #f6f6f6;
 border-left:30px solid #f6f6f6;
 border-right:30px solid #f6f6f6;
}
* {
 margin:0;
 padding:0;
 outline:none;
}
.content p {
 line-height:30px;
 margin:0 10px 15px;
 word-spacing:2px;
}
.content h2 {
 font:190% Times;
 margin-top:5px;
 margin-left:15px;
}
#header {
 width:100%;
 margin:0 auto;
 padding:20px 0;
}
#header .right {
 float:right;
}
#header h1 {
 font: 200% Verdana, Geneva, Arial, Helvetica, sans-serif;
 letter-spacing:-2px;
 margin-bottom:5px;
 margin-left:35px;
}
#header h3 {
 font:80% Verdana;
 color:#999;
 display:inline;
 margin-left:35px;
}
ul#nav {
 background:#0030F0;
 padding:10px;
 font-size:80%;
 border-top:3px solid #0D427A;
 border-bottom:3px solid #0D427A;
 font-weight:bold;
 margin:45px 0 0 0;
}
ul#nav li {
 display:inline;
 list-style:none;
 margin-right:10px;
}
ul#nav li a {
 padding:10px 14px;
 color:#fff;
 text-decoration:none;
 -moz-border-radius:5px; /* rounding them */
   -khtml-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius:5px;
}
ul#nav li a:hover {
 background:#0458B3;
 color:#fff;
}
ul#nav li a.active {
 background:#fff;
 color:#333;
 border-right:2px solid #0D427A;
 border-bottom:2px solid #0D427A;
}
.content {
 width:920px;
 float: left;
 position: relative;
 background-color:#FFF;
}
#footer {
 padding:20px 50px;
 margin-top:50px;
 clear:both;
 border-top:2px solid #eee;
 font:80% Verdana;
 line-height:25px;
}

И, собственно, файл script.js, который и выполняет главные действия:

$(document).ready(function(){
  //Функция-обработчик окончания загрузки документа, вызывает функцию формирования меню
  makeMainMenu();
});
function makeMainMenu()
{
  //С помощью Ajax запроса открываем наш файл с описанием меню
  //Здесь можно загружать текстовый файл с шаблоном меню любой упорядоченной структуры
  //или запросы к фото-хранилищам для получения списка альбомов
  $.ajax({
          type: "GET",
          url: "topmenu.xml",
          dataType: "xml",
          success: xmlMainMenu
          //В случае успешной загрузки работает функция xmlMainMenu
  });
}
function xmlMainMenu(xml)
  {$('div#header h1').append($(xml).find('menu').attr('title'));
  //Добавляем заголовок, полученный из файла
  $(xml).find('menuitem').each(function (){
    var $list  = $(<li />');
    var $link=$('<a  >').append($(this).find('label').text()).attr('href',$(this).find("link").text());
    $('ul#nav').append($list.append($link));
    //В список добавляем ссылки  - пункты меню, которые считываем из файла
  });
  $('#nav li:first-child a').addClass('active');
  //Отмечаем активный пункт меню - рот первоначальной загрузке - это первый пункт
  $('#nav li a').bind('click',function(enent){
    //На каждую ссылку пункта меню устанавливаем обработчик нажатия мушь
    //В этом обработчике делаем активным нажатый пункт меню и
    //вводим в главный блок текста ссылку из пункта меню
    //собственно, здесь должны быть более сложные действия, но для учебных целей достаточно
    $('#nav li a').removeClass('active');
    $(this).addClass('active');
    $('div.content h2').empty();
    $('div.content h2').append($(this).attr('href'));
  });
}

Вот и все, простая страница с динамически формируемым меню с помощью jQuery готова.
В избранное