Scribd Logo
Upload

Welcome to Scribd!

  • 11 Labaweb

    Uploaded by

    Maksymenko Oleksiy
    3 views3 pages

    Original Title

    11labaweb

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    3 views3 pages

    11 Labaweb

    Uploaded by

    Maksymenko Oleksiy

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 3

    Кисiль О.

    , КI - 172
    Лабораторна робота №11
    Введення в jQuery
    Мета: Знайомство с бібліотекою jQuery. Підключення і робота с
    бібліотекою jQuery. Асинхронні запити в jQuery.
    Хід роботи:
    1. У форму зворотного зв'язку додати можливість вибору міста звернення.
    Сам список повинен завантажуватися після завантаження сторінки через
    AJAX.
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Form Validation</title>
    <style>
    #form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    }

    button {
    margin-top: 5px;
    }
    </style>
    </head>
    <body>
    <div id="errors"></div>
    <form id="form">
    <label for="username">Yuor Name</label>
    <input type="text" name="username" id="username" placeholder="e.g Vasya" />
    <label for="userphone">Your phone</label>
    <input type="tel" name="userphone" id="userphone" placeholder="e.g +38(099)999-9999" />
    <label for="usermail">Your email</label>
    <input type="text" name="usermail" id="usermail" placeholder="e.g vasya.traktor@mail.ua"
    />
    <label for="usertext">Additional info</label>
    <input type="text" name="usertext" id="usertext" placeholder="e.g хочу новый трактор" />
    <button type="submit">Send</button>
    </form>
    <script src="./jquery.min.js"></script>
    <script src="./scripts.js"></script>
    </body>
    </html>

    Рисунок 1 – Результат виконання програми


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Form Validation</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    #form {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    padding: 50px;
    }

    button {
    margin-top: 5px;
    }

    .cities-list {
    background-color: #fff;
    list-style: none;
    }

    .cities-list li {
    cursor: pointer;
    }

    .cities-list li:hover {
    color: orange;
    }
    </style>
    </head>
    <body>
    <div id="errors"></div>
    <form id="form">
    <label for="username">Yuor Name</label>
    <input type="text" name="username" id="username" placeholder="e.g Vasya" />
    <label for="userphone">Your phone</label>
    <input type="tel" name="userphone" id="userphone" placeholder="e.g +38(099)999-9999" />
    <label for="usermail">Your email</label>
    <input type="text" name="usermail" id="usermail" placeholder="e.g vasya.traktor@mail.ua"
    />
    <label for="usertext">Additional info</label>
    <input type="text" name="usertext" id="usertext" placeholder="e.g хочу новый трактор" />
    <label for="usercity">Ваш город</label>
    <div class="cities">
    <input
    type="usercity"
    name="usercity"
    id="usercity"
    placeholder="e.g Чернигов"
    style="width: 100%;"
    />
    </div>
    <button type="submit">Send</button>
    </form>
    <script src="./jquery.min.js"></script>
    <script src="./scripts.js"></script>
    </body>
    </html>

    Рисунок 2 – Результат виконання програми


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Tabs</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    }

    .tabs {
    border: 1px solid black;
    }

    .tabs-links .tab-link {
    display: inline-block;
    padding: 5px 10px;
    }

    .tabs-links .tab-link.active a {
    color: brown;
    }

    .tab-content-item {
    padding: 5px 10px;
    display: none;
    }

    .tab-content-item.active {
    display: block;
    }
    </style>
    </head>

    <body>
    <div class="tabs">
    <ul class="tabs-links">
    <li class="tab-link active">
    <a href="#" data-tab-link="1"> link1</a>
    </li>
    <li class="tab-link"><a href="#" data-tab-link="2">link2</a></li>
    <li class="tab-link"><a href="#" data-tab-link="3">link3</a></li>
    </ul>
    <div class="tabs-content">
    <div class="tab-content-item active" data-tab-content="1">
    content1
    </div>
    <div class="tab-content-item" data-tab-content="2">
    content2
    </div>
    <div class="tab-content-item" data-tab-content="3">
    content3
    </div>
    </div>
    </div>
    <script src="./jquery.min.js"></script>
    <script src="./scripts.js"></script>
    </body>
    </html>

    Рисунок 3 – Результат виконання програми


    Висновок: під час виконання лабораторної роботи ознайомились с
    бібліотекою jQuery, з підключенням і роботою с бібліотекою jQuery.
    Асинхронні запити в jQuery.

    You might also like