Рубрика «JavaScript»

Работа с cookies. Часть 3

Установка срока действия

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

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

Wdy, DD- Mon- YYYY HH: MM: SS GMT
(День недели, ДД-Мес-ГГГГ ЧЧ:ММ:СС среднего времени по Гринвичу)

Ниже приведено одно из возможных значений срока действия cookie-набора.

Tue, 25-Dec-2007 12:34:56 GMT

Это несколько усложняет правильное определение даты (особенно дня недели), но здесь на помощь могут прийти внешние библиотеки.

Как только срок действия будет определен, его остается лишь ввести в качестве значения свойства document.cookie, как показано ниже:

document.cookie="myLanguage=JavaScript; expires=Tue, 22-Dec-2009 12:34:56 GMT";

Использование других свойств cookie

Несмотря на то что срок действия используется чаще всего, для применения доступны и другие свойства cookie-набора.

  • path. Задает путь для связывания с cookie-набором. По умолчанию используется текущий путь. Если же установлено значение / этого свойства, данный cookie-набор получает весь сайт.
  • domain. Определяет используемый домен или несколько доменов. По определению в имени домена должно быть по крайней мере две точки, хотя многие браузеры игнорируют этот факт.
  • Если же установлено значение .example.com данного свойства, то cookie получают домены по адресам www.example.com и subdomain.example.com.
  • secure. Если данное свойство установлено (для этого достаточно его ввести в строку cookie-набора), то cookie-набор передается только по защищенному соединению (т.е. по протоколу HTTPS).

В приведенном ниже примере кода устанавливается cookie-набор, связанный с доменом .example.com и передаваемый только по HTTPS-соединениям.

document.cookie="myLanguage=JavaScript; expires=Tue, 22-Dec-2009 12:34:56 GMT; path=/; domain=.example.com; secure";

Модальное окно с использованием jQuery

Последние веяния моды в стиле веб 2.0 принесли с собой много возможностей, которые ранее были доступны только настольным приложениям. Современные браузеры поддерживают CSS и Javascript на уровне, вполне достаточном для реализации модальных окон. Модальное окно представляет собой окно, которое полностью перехватывает на себя фокус, не давая пользователю взаимодействовать с какими-либо другими окнами на экране. Сегодня рассмотрим способ создания такого окна с использованием библиотеки jQuery. В итоге мы получим что-то вроде этого:

Для начала создадим простую HTML-страницу, содержащую два <div>-блока:

  • popupContact - модальное окно;
  • backgroundPopup - затемнение.
<!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; windows-1251" />
    <title>Модальное окно с использованием jQuery</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script src="jquery.js" type="text/javascript"></script>
    <script src="popup.js" type="text/javascript"></script>
</head>
<body>
    <center>
        <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
        <div id="button"><input type="submit" value="Press me please!" /></div>
    </center>
    <div id="popupContact">
        <a id="popupContactClose">x</a>
        <h1>Title of our cool popup, yay!</h1>

        <p id="contactArea">
            Here we have a simple but interesting sample of our new stuning and smooth popup.
            As you can see jQuery and CSS does it easy...
            <br/><br/>
            We can use it for popup-forms and more... just experiment!
            <br/><br/>
            Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
            <br/><br/>
            <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
        </p>
    </div>

    <div id="backgroundPopup"></div>
</body>
</html>

Файл стилей нашей HTML-страницы:

body{
  line-height:1;
  font-size: 12px;
  font-family:arial,sans-serif;
  margin:0;
}
img {
  border:0;
}
a {
  cursor: pointer;
  text-decoration:none;
}
br.both{
  clear:both;
}
#backgroundPopup{
  display:none;
  position:fixed;
  _position:absolute; /* hack for internet explorer 6 */
  height:100%;
  width:100%;
  top:0;
  left:0;
  background:#000000;
  border:1px solid #cecece;
  z-index:1;
}
#popupContact{
  display:none;
  position:fixed;
  _position:absolute; /* hack for internet explorer 6 */
  height:384px;
  width:408px;
  background:#FFFFFF;
  border:2px solid #cecece;
  z-index:2;
  padding:12px;
  font-size:13px;
}
#popupContact h1{
  color:#6FA5FD;
  font-size:22px;
  border-bottom:1px dotted #D3D3D3;
  padding-bottom:2px;
  margin-bottom:20px;
}
#popupContactClose {
  font-size:14px;
  line-height:14px;
  right:6px;
  top:4px;
  position:absolute;
  color:#6fa5fd;
  font-weight:bold;
  display:block;
}
#button{
  text-align:center;
  margin:100px;
}

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

Теперь JavaScript (файл popup.js):

//0 - окно закрыто; 1  - окно открыто; 
var popupStatus = 0;
// Показываем (открываем) окно, используя эффекты jQuery 
function loadPopup(){ 
  // Открываем окно только если оно закрыто
  if(popupStatus==0){ 
    $("#backgroundPopup").css({ 
      "opacity": "0.7" 
    })
    $("#backgroundPopup").fadeIn("slow")
    $("#popupContact").fadeIn("slow")
    popupStatus = 1
  } 
}
// Скрываем (закрываем) окно, используя эффекты jQuery
function disablePopup(){ 
  // Закрываем окно только если оно открыто
  if(popupStatus==1){ 
    $("#backgroundPopup").fadeOut("slow")
    $("#popupContact").fadeOut("slow")
    popupStatus = 0
  } 
}
// Окно будет расположено в центре страницы
function centerPopup(){ 
  // ширина и высота окна браузера 
  var windowWidth = document.documentElement.clientWidth
  var windowHeight = document.documentElement.clientHeight
  var popupHeight = $("#popupContact").height()
  var popupWidth = $("#popupContact").width()
  // размещаем окно в центре страницы
  $("#popupContact").css({ 
    "position": "absolute"
    "top": windowHeight/2-popupHeight/2
    "left": windowWidth/2-popupWidth/2 
  })
  // только для MS IE 6   
  $("#backgroundPopup").css({ 
    "height": windowHeight 
  })
}
// Обработчики событий
$(document).ready(function(){
  // ОТКРЫТИЕ ОКНА
  // Событие - щелчек по кнопке
  $("#button").click(function(){
    // размещаем окно в центре страницы
    centerPopup();
    // открываем окно
    loadPopup();
  });
               
  // ЗАКРЫТИЕ ОКНА
  // Событие - щелчок по "x"
  $("#popupContactClose").click(function(){
    // закрываем окно
    disablePopup();
  });
  // Событие - щелчок за пределами окна
  $("#backgroundPopup").click(function(){
    // закрываем окно
    disablePopup();
  });
  // Событие - нажата клавиша Escape
  $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1) {
      // закрываем окно
      disablePopup();
    }
  });
});

Ссылки по теме:

Тень с использованием jQuery: плагин Drop Shadow

Плагин jquery.dropshadow.js для библиотеки jQuery позволяет добавить тень элементам страницы. Как это выглядит, можно посмотреть здесь (обратите внимание, что изображение шестеренки можно перетаскивать мышкой). Для начала подключаем в разделе head HTML-страницы необходимые файлы:

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

Синтаксис:

$(selector).dropShadow(options)// создает новую тень
$(selector).redrawShadow();       // изменяет существующую тень
$(selector).removeShadow();       // удаляет тень
$(selector).shadowId();           // возвращает ID тени

Параметры dropShadow():

left    : integer (default = 4)
top     : integer (default = 4)
blur    : integer (default = 2)
opacity : decimal (default = 0.5)
color   : string (default = "black")
swap    : boolean (default = false)
  • Параметры left и top задают расположение тени. Если left и top равны нулю, тень расположена за элементом страницы, если значения положительные - тень будет справа снизу, если отрицательные - слева сверху.
  • Параметр blur задает размытие тени. Если blur=0 получим резкую тень, значение один или два создает нормальную тень, значение три или четыре создает сильно размытую (мягкую) тень.
  • Параметр opacity задает прозрачность тени. Как правило, имеет значение меньше единицы.
  • Параметр color задает цвет тени (строка названия цвета или шестнадцатеричное значение). Не применяется к прозрачным изображениям.
  • Параметр swap используется для создания специальных эффектов (рельеф, гравировка).

Тени, которые создает плагин, не связаны с оригинальными элементами, таким образом, если оригинальные элементы изменятся, тени останутся без изменений. Если оригинальные элементы перемещаются или изменяют размеры, надо обработать эти события вручную. Тени могут быть изменены с помощью метода redrawShadow() или удалены с помощью метода removeShadow(). Метод redrawShadow() метод использует те же самые параметры, что и dropShadow(). Чтобы изменить параметры тени, сначала надо удалить тень, а затем создать новую.

Метод dropShadow() метод возвращает jQuery-коллекцию новых теней (созданных плагином новых элементов страницы). Их можно сохранить для дальнейшей обработки:

var myShadow = $("#myElement").dropShadow();

Можно получить ID тени по ID оригинального элемента:

var myShadowId = $("#myElement").attr("shadowId");

или

var myShadowId = $("#myElement").shadowId();

Если оригинальный элемент не имеет уникального ID, плагин его добавит. ID тени создается на основе ID оригинала: если уникальный ID элемента - “myElement”, то ID тени тени будет “myElement_dropShadow”.

Скачать исходные коды