Свежие комментарии

    Архивы за Январь, 2012

    Введение в Ajax

    Введение в Ajax

    Привет, дорогой читатель. В этой статье я расскажу тебе о том, что такое ajax и с чем его едят.Ajax(Asynchronous Javascript And Xml)- технология для взаимодействия с сервером без перезагрузки страниц. Преимущество ajax в том, что при его использование можно изменить часть web страницы, не перезагружая всю страницу целиком, а только лишь нужную нам часть. Сейчас мы рассмотрим простой пример использования ajax.

    Создадим файл «ajax.html», в него вставим этот html код:

    <html>
    <head>
    <title>Пример асинхронной передачи данных</title>
    </head>
    <body>
    <input value="Сколько время?" onclick="now_time()" type="button">
    <div id="time">Здесь будет ответ сервера
    </body>
    </html>

    Теперь рассмотрим данный html код.

    При нажатие на кнопку «сколько время?» будет вызвана java script функция now_time(). Функция пошлет запрос на сервер, сервер обработает запрос и вышлет нам ответ в div time.

    Теперь мы рассмотрим саму функцию now_time():

    Во-первых, для асинхронного обмена данными мы будем использовать специальный объект XmlHttpRequest, который умеет отправлять запрос и получать ответ от сервера.

    function getXmlHttp(){
      var xmlhttp;
      try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
          xmlhttp = false;
        }
      }
      if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
      }
      return xmlhttp;
    }

    Подробно про этот объект вы можете прочитать тут.

    А теперь про саму функцию now_time():

    function now_time() {
    var req = getXmlHttp() // создадим объект для запроса к серверу
    var statusElem = document.getElementById('time') // id div`a  в котором будет отображатся ход выполнения скрипта
    req.onreadystatechange = function() {  // onreadystatechange - активируется при получении ответа сервера
    if (req.readyState == 4) { // если запрос закончил выполняться
    statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..)
    if(req.status == 200) { // если статус 200 - выдать ответ пользователю
    alert("Ответ сервера: "+req.responseText); // выдаем ответ
    }
    }
    }
    req.open('GET', '/time.php', true);   // задаем адрес подключения скрипта
    /* объект запроса подготовлен: указан адрес и создана функция onreadystatechange
         для обработки ответа сервера */
    req.send(null);  // отослать запрос
    statusElem.innerHTML = 'Ожидаю ответа сервера...' 
    }

    Серверный обработчик, к которому обратился наш ajax-запрос (в примере это time.php), по сути, ничем не отличается от обычной php страницы.

    Теперь мы перейдем к файлу time.php

    <?php
    sleep(2);
    setlocale(LC_TIME, 'ru_RU.CP1251', 'rus_RUS.CP1251', 'Russian_Russia.1251');
    $time = strftime("%H:%M:%Sn");
    $unix_time = time();
    echo "<p>Человеческое время: $time <br> Unix время: $unix_time";
    ?>

    Шикарный меню для сайтов которые используют шаблоны от YooTheme

    Шикарный меню для сайтов которые используют шаблоны от YooTheme

    Здравствуйте дорогие читатели этого блога.Данная тема для тех кто использует шаблоны от популярной студии YooTheme.

    Сегодня я расскажу вам как сделать «шикарный» меню для сайта.На разных форумах заметил данную проблему,ведь,такой студии как YooTheme нужны только уникальные способы отображения меню.

    Допустим у вас стоит шаблон(YT Balance) от YooTheme и вместо такого меню:

    Шикарный меню для сайтов которые используют шаблоны от YooTheme

    Вам нужен такой меню:

    Шикарный меню для сайтов которые используют шаблоны от YooTheme

    Как быть?Это очень просто,я объясню как.

    Через админ-панель вашего сайта,идем таким путем «Расширения->Менеджер модулей» потом выбираем желаемое меню.Во вкладке «Расширенные параметры» добавляем следующее (badge-hot icon-cart) в ячейке «Суффикс класса модуля».

    Шикарный меню для сайтов которые используют шаблоны от YooTheme

    Вот что получаем взамен:

    Шикарный меню для сайтов которые используют шаблоны от YooTheme

    Красивое меню с этикеткой и иконочкой.

    Можно комбинировать массу иконок,баджиков,стилей,цветов а также вы можете добавлять свои иконочки,стили и т.д.Все эти иконки выглядят красиво в оформлении и дают сайту уникальный дизайн.Представьте себе сколько времени нужно было самописному сайту чтобы так играть с меню,Joomla предоставляет нам широкий ассортимент в этом плане.

    Ниже представлена таблица для шаблона YT Balance с которой можно комбинировать меню.

    Styles Box, Line
    Colors White, Black, Color
    Badges Hot, New, Free, Top
    Icons Download, Twitter, Mail, Bubble, Login, Cart

    Как всегда видеоурок: