WEB лаборатория DLE » Другое для WEB » Разное и другое » Делаем диалоги как вконтакте (Урок 01)
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 5
    Пользователей: 0
    Гостей: 5


    Последние комментарии
    ...
    HI-tech:
    0

    Делаем диалоги как вконтакте (Урок 01)

    Делаем диалоги как вконтакте (Урок 01)


    Добрый день! сегодня мы с вами разработаем тело диалогов. а это где будут отображатся все юзеры (кто онлайн).
    И так создадим папку dialogvk и в этой папке создадим файлы: style.css, index.html, и папка images.
    Зайдём в index.html и поместим вот такой код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    
    <title>Диалоги (в)контакте от "Вадима Кондакова"</title>
    
    </head>
    
    <body>
    
    </body>
    </html>

    Сохраняем, и после
    <title>Диалоги (в)контакте от "Вадима Кондакова"</title>

    вставляем:
    <link rel="stylesheet" href="style.css" type="text/css"/>

    Сохраним, и между тегами:
    <body>
    
    </body>

    вставим:
    <script type='text/javascript'>
      /* Определяем тип браузера */
      var ie = 0;
      var op = 0;
      var ff = 0;
      var browser = navigator.userAgent;
      if (browser.indexOf("Opera") != -1) op = 1;
      else {
        if (browser.indexOf("MSIE") != -1) ie = 1;
        else {
          if (browser.indexOf("Firefox") != -1) ff = 1;
        }
      }
      var block = document.getElementById("block");
      delta_x = 0;
      delta_y = 0;
      /* Ставим обработчики событий на нажатие и отпускание клавиши мыши */
      block.onmousedown = saveXY;
      if (op || ff) {
        block.addEventListener("onmousedown", saveXY, false);
      }
      document.onmouseup = clearXY;
      /* При нажатии кнопки мыши попадаем в эту функцию */
      function saveXY(obj_event) {
        /* Получаем текущие координаты курсора */
        if (obj_event) {
          x = obj_event.pageX;
          y = obj_event.pageY;
        }
        else {
          x = window.event.clientX;
          y = window.event.clientY;
          if (ie) {
            y -= 2;
            x -= 2;
          }
        }
        /* Узнаём текущие координаты блока */
        x_block = block.offsetLeft;
        y_block = block.offsetTop;
        /* Узнаём смещение */
        delta_x = x_block - x;
        delta_y = y_block - y;
        /* При движении курсора устанавливаем вызов функции moveWindow */
        document.onmousemove = moveBlock;
        if (op || ff)
          document.addEventListener("onmousemove", moveBlock, false);
      }
      function clearXY() {
        document.onmousemove = null; // При отпускании мыши убираем обработку события движения мыши
      }
      function moveBlock(obj_event) {
        /* Получаем новые координаты курсора мыши */
        if (obj_event) {
          x = obj_event.pageX;
          y = obj_event.pageY;
        }
        else {
          x = window.event.clientX;
          y = window.event.clientY;
          if (ie) {
            y -= 2;
            x -= 2;
          }
        }
        /* Вычисляем новые координаты блока */
        new_x = delta_x + x;
        new_y = delta_y + y;
        block.style.top = new_y + "px";
        block.style.left = new_x + "px";
      }
    </script>

    теперь откроем файл style.css и вставим вот это:
    html { height:100%; }
    
    body {
        background: repeat center top #1F3147;
        height: 100%;
        margin:0px;
        padding:0px;    
        word-wrap: break-word;
        font-family: tahoma;
        font-size:11px;
        overflow-x:hidden
    }

    сохраним. и откроем наш index.html и посмотрим перед собой тёмно-синий фон).
    и так теперь в style.css вставим:
    .block {
     cursor: move;
     position: fixed;
     z-index: 9999999;
    }
    .im_title_online {
     font-size: 1.09em;
     cursor: pointer;
     font-weight: bold;
     text-shadow: 0px 1px 0px #262626;
     color: white;
    }
    .im_close {
     display: block;
     background: black;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
     -moz-box-shadow: 0 0 2px #111;
     -webkit-box-shadow: 0 0 2px #111;
     box-shadow: 0 0 2px #111;
     padding: 3px;
     margin: 0 0 0 4px;
     visibility: hidden;
     opacity: 0.6;
     filter: alpha(opacity=60);
     visibility: visible;
     cursor: pointer;
    }
    .im_header {
     background: white;
     background:rgba(0, 0, 0, 0.75);
     width:220px;
     height: 388px; 
     padding: 5px 10px 5px 10px;
     border-radius: 3px 3px 3px 3px;
    }
    .im_content {
     background: white;
     box-shadow: inset 0 0 3px #777;
     height: 307px;
     border-radius: 3px 3px 3px 3px;
     padding: 5px 8px 5px 8px;
     cursor: default;
     overflow:auto
    }
    .ims_content img {
     border-radius: 2px;
     float:left;
     margin-right:3px;
     width:30px
    }
    .ims_content a {
    color: #2B587A;
    text-decoration: none;
    padding: 0 0 0 8px;
    cursor: pointer;
    line-height: 2.72em;
    white-space: nowrap;
    display: block;
    width: 130px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    padding: 5px 2px 5px 2px;
    }
    .ims_content a:hover {
    background: none repeat scroll 0 0 rgba(219, 227, 235, 0.5);
    width:200px;
    padding: 5px 2px 5px 2px;
    border-radius: 3px 3px 3px 3px;
    }

    сохраняем и в index.html поместим:
    после:
    <body>

    добавляем:
    <div id="block" class="block">
    <div class="im_header">
    <div class="im_title_online">
    8 друзей онлайн
    <div class="im_close" style="float:right;"><img src="./images/close.png"></div>
    <p>
    <input type="text" style="color: rgb(119, 119, 119);border:0px;width: 200px;" placeholder="Начните вводить имя...">
    </div>
    <div class="im_content">
    <div class="ims_content">
    <a><img src="http://cs307513.vk.me/v307513253/987a/_uUnuva59Co.jpg" />
    Кирилл Филинков
    </a>
    <a><img src="http://cs403017.vk.me/v403017405/449e/SzTfQ-vU8Gw.jpg" />
    Денис Телешев
    </a>
    <a><img src="http://cs406523.vk.me/v406523776/7b12/DR2mk_m0PmA.jpg" />
    Евгений Одинцов
    </a>
    
    </div>
    </div>
    </div>
    </div>

    сохраняем. и смотрим результат и у нас получилось вот такое чудо:
    Делаем диалоги как вконтакте (Урок 01)


    И теперь добавим в style.css:
    input[type=checkbox] {
      margin: 5px;
    }
    
    input,
    textarea {
      background: white;
      border: 1px solid #AAA;
      box-shadow: 0px 1px 0px white;
      -webkit-box-shadow: 0px 1px 0px white;
      -moz-box-shadow: 0px 1px 0px white;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      font-family: inherit;
      font-size: 11px;
      line-height: 26px;
      color: #555555;
      font-size: 11px;
      padding: 0px 10px;
      height: 28px;
      position: relative;
      display: block;
      outline: none;
      -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
      -o-transition: border linear 0.2s, box-shadow linear 0.2s;
      -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
      -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
      transition: border linear 0.2s, box-shadow linear 0.2s;
    }
    input.hidden,
    textarea.hidden {
      display: none;
    }
    input:focus,
    textarea:focus {
      border-color: rgba(34, 121, 204, 0.8) !important;
      outline: 0;
      outline: thin dotted \9;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(34, 121, 204, 0.5);
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(34, 121, 204, 0.5);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(34, 121, 204, 0.5);
    }
    
    input[type=checkbox] {
      border: none;
      padding: 0px;
    }
    
    textarea {
      height: 100px;
      padding: 10px;
      line-height: 18px;
      font-size: 12px;
      resize: vertical;
      box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1);
    }

    Сохраним и смотрим результат. ну на этом у меня всё. а на следущем уроке мы научим открывать окна диалогов и закрывать форму диалога.

    Исходник работы можно скачать на Яндекс.Диске)
    Если есть вопросы задавайте отвечу
    PS: В исходнике данного урока имеются все картинки.

    Сказать спасибо вы можете через:
    Yandex.Money: 410011064487253
    WebMoney WMR: R287241570118



    Теги: css, javascript

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.