Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Канцер</title>
- <style type="text/css">
- * {padding: 0; margin: 0;}
- .main-wrapper {display: table; margin: 0 auto;}
- label {width: 100px; display: block; margin-bottom: 10px; float: left;}
- input {width: 200px; box-sizing: border-box; float: left; }
- .main-wrapper div {width: 300px; position: relative; clear: both;}
- .main-wrapper div:first-of-type {margin-top: 20px;}
- input + span {position: absolute; display: inline-block; width: 200px; padding-left: 5px; left: 100%; color: red; display: none;}
- .one-empty-boi {box-shadow: 0 0 5px red; border: 2px solid red;}
- .add {clear: both;}
- #selectable {list-style-type: none; width: 100%; clear: both;}
- #selectable .ui-selecting { background: #FECA40; }
- #selectable .ui-selected { background: #F39814;}
- #selectable li { margin-bottom: 3px; padding: 5px;}
- .dialog {font-size: .8em;}
- .dialog div {margin: 10px 0;}
- </style>
- <script src="jquery/jquery.js"></script>
- <script src="jquery/jquery-ui.js"></script>
- <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
- <script type="text/javascript">
- $(document).ready(function() {
- var $inputFields = $("input"),
- $addButton = $(".add"),
- $dialog = $(".dialog");
- $($inputFields[3]).datepicker({
- changeMonth: true,
- changeYear: true
- });
- function fillDialog() {
- var $hobbies = $(".ui-selected"),
- hobbies = "";
- for(var i = 0; i < $hobbies.length-1; i++)
- hobbies += $($hobbies[i]).text() + ", ";
- hobbies += $($hobbies[i]).text();
- $dialog.html("<div>Name: " + $($inputFields[0]).val() + "</div>" +
- "<div>Surame: " + $($inputFields[1]).val() + "</div>" +
- "<div>Password: " + $($inputFields[2]).val() + "</div>" +
- "<div>DateOfBirth: " + $($inputFields[3]).val() + "</div>" +
- "<div>Hobbies: " + hobbies + "</div>");
- }
- function isEmpty() {
- var empty = false;
- $inputFields.removeClass("one-empty-boi").next("span").hide();
- for(var i = 0; i < $inputFields.length; i++) {
- if($($inputFields[i]).val() == "") {
- empty = true;
- $($inputFields[i]).addClass("one-empty-boi").next("span").show();
- }
- }
- if(!empty) {
- fillDialog();
- dialog.dialog("open");
- }
- }
- var dialog = $dialog.dialog({
- autoOpen: false,
- width: 350,
- modal: false,
- });
- $addButton.on("click", isEmpty);
- $("#selectable").selectable();
- });
- </script>
- </head>
- <body>
- <div class="main-wrapper">
- <div class="dialog" title="User Info"></div>
- <div>
- <label>Name:</label>
- <input type="text" placeholder="Name"><span>Insert a name</span>
- </div>
- <div>
- <label>Surname:</label>
- <input type="text" placeholder="Surname"><span>Insert a surname</span>
- </div>
- <div>
- <label>Password:</label>
- <input type="password" placeholder="Password"><span>Insert a password</span>
- </div>
- <div>
- <label>DateOfBirth:</label>
- <input type="text" placeholder="Date Of Birth"><span>Insert a date</span>
- </div>
- <div>
- <span style="display: block; float: left; width: 100%; margin: 30px 0 15px 0;">Select your hobbies</span>
- <ul id="selectable">
- <li class="ui-widget-content">Gaming</li>
- <li class="ui-widget-content">Sports</li>
- <li class="ui-widget-content">Watching Tv</li>
- <li class="ui-widget-content">Sleeping</li>
- <li class="ui-widget-content">Hiking</li>
- <li class="ui-widget-content">Skiing</li>
- <li class="ui-widget-content">Dancing</li>
- </ul>
- </div>
- <div style="margin-top: 40px;"><button class="add">Add my info</button></div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement