Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>Втора задача</title>
- <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
- <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
- <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
- <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
- <style>
- body
- {
- font-size: 62.5%;
- }
- label, input
- {
- display:block;
- }
- input.text
- {
- margin-bottom:12px;
- width:95%;
- padding: .4em;
- }
- fieldset
- {
- padding:0;
- border:0;
- margin-top:25px;
- }
- h1
- {
- font-size: 1.2em;
- margin: .6em 0;
- }
- div#letovi-contain
- {
- width: 350px;
- margin: 20px 0;
- }
- div#letovi-contain table
- {
- margin: 1em 0;
- border-collapse: collapse;
- width: 100%;
- }
- div#letovi-contain table td, div#letovi-contain table th
- {
- border: 1px solid #eee;
- padding: .6em 10px;
- text-align: left;
- }
- .ui-dialog .ui-state-error
- {
- padding: .3em;
- }
- .validateTips
- {
- border: 1px solid transparent;
- padding: 0.3em;
- }
- .ui-autocomplete-category
- {
- font-weight: bold;
- padding: .2em .4em;
- margin: .8em 0 .2em;
- line-height: 1.5;
- }
- </style>
- <script>
- $(function() {
- $("#kalendarche1").datepicker({
- onClose: function(selectedDate){
- $("#kalendarche2").datepicker("option","minDate",selectedDate);
- }
- });
- $("#kalendarche2").datepicker({
- onClose: function(selectedDate){
- $("#kalendarche1").datepicker("option","maxDate",selectedDate);
- }
- });
- });
- </script>
- <script>
- $.widget( "custom.catcomplete", $.ui.autocomplete, {
- _renderMenu: function( ul, items ) {
- var that = this,
- currentCategory = "";
- $.each( items, function( index, item ) {
- var li;
- if ( item.category != currentCategory ) {
- ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
- currentCategory = item.category;
- }
- li = that._renderItemData( ul, item );
- });
- }
- });
- $(function() {
- var dialog, form,
- // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
- shifra = $("#shifra"),
- avioprevoznik = $("#avioprevoznik"),
- dest = $("#dest"),
- kategorija = $("#kategorija"),
- datumOd = $("#kalendarche1"),
- datumDo = $("#kalendarche2"),
- allFields = $([]).add(shifra).add(avioprevoznik).add(dest).add(kategorija).add(datumOd).add(datumDo),
- tips = $(".validateTips");
- function updateTips(t) {
- tips
- .text(t)
- .addClass("ui-state-highlight");
- setTimeout(function () {
- tips.removeClass("ui-state-highlight", 1500);
- }, 500);
- }
- function checkRegexp(o, regexp, n) {
- if (!( regexp.test(o.val()) )) {
- o.addClass("ui-state-error");
- updateTips(n);
- return false;
- } else {
- return true;
- }
- }
- function addFlight() {
- var valid = true;
- allFields.removeClass("ui-state-error");
- valid = valid && checkRegexp(shifra, /^([0-9])+$/, "Шифрата мора да содржи само цифри");
- if (valid) {
- $("#letovi tbody").append("<tr>" +
- "<td>" + shifra.val() + "</td>" +
- "<td>" + avioprevoznik.val() + "</td>" +
- "<td>" + dest.val() + "</td>" +
- "<td>" + kategorija.val() + "</td>" +
- "<td>" + datumOd.val() + "</td>" +
- "<td>" + datumDo.val() + "</td>" +
- "</tr>");
- dialog.dialog("close");
- }
- $(function () {
- pole = [];
- $.each($("#letovi tr").not(".ui-widget-header"), function (i, o) {
- var t2 = $(o).find("td:nth-child(2)");
- var t3 = $(o).find("td:nth-child(3)");
- var t4 = $(o).find("td:nth-child(4)");
- pole.push({label: t3.html() + " - " + t2.html(), category: t4.html()});
- });
- $("#prebaraj").catcomplete({
- delay: 0,
- source: pole
- });
- });
- return valid;
- }
- dialog = $("#dialog-form").dialog({
- autoOpen: false,
- height: 330,
- width: 350,
- modal: true,
- buttons: {
- "Додади": addFlight,
- "Откажи": function () {
- dialog.dialog("close");
- }
- },
- close: function () {
- form[0].reset();
- allFields.removeClass("ui-state-error");
- }
- });
- form = dialog.find("form").on("submit", function (event) {
- event.preventDefault();
- addFlight();
- });
- $("#create-flight").button().on("click", function () {
- dialog.dialog("open");
- });
- });
- $(function() {
- pole=[];
- $.each($(" #letovi tr").not(".ui-widget-header"),function(i,o){
- var t2=$(o).find("td:nth-child(2)");
- var t3=$(o).find("td:nth-child(3)");
- var t4=$(o).find("td:nth-child(4)");
- pole.push({label:t3.html()+" - "+t2.html(),category:t4.html()});
- });
- $( "#prebaraj" ).catcomplete({
- delay: 0,
- source: pole
- });
- });
- </script>
- <script>
- $(function() {
- $( "#dialog" ).dialog({
- autoOpen: false,
- modal: true,
- buttons: {
- ok: function(){
- console.log("OK");
- $( "#dialog" ).dialog("close");
- },
- cancel:function(){
- console.log("cancel");
- $( "#dialog" ).dialog("close");
- }
- }
- });
- $( "#opener" ).click(function() {
- $( "#dialog" ).dialog( "open" );
- });
- });
- </script>
- </head>
- <body>
- <div id="dialog-form" title="Create new flight">
- <p class="validateTips">Сите полиња се задолжителни.</p>
- <form>
- <fieldset>
- <label for="shifra">Шифра</label>
- <input type="text" name="shifra" id="shifra" value="" class="text ui-widget-content ui-corner-all">
- <label for="avioprevoznik">Авиопревозник</label>
- <input type="text" name="avioprevoznik" id="avioprevoznik" value="" class="text ui-widget-content ui-corner-all">
- <label for="dest">До</label>
- <input type="text" name="dest" id="dest" value="" class="text ui-widget-content ui-corner-all">
- <label for="kategorija">Категорија</label>
- <select name="kategorija" id="kategorija" class="text ui-widget-content ui-corner-all">
- <option value="Бизнис">Бизнис</option>
- <option value="Класа А">Прва Класа</option>
- <option value="Економска">Економска</option>
- </select>
- <!-- Allow form submission with keyboard without duplicating the dialog button -->
- <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
- </fieldset>
- </form>
- </div>
- <label for="prebaraj">Пребарај: </label>
- <input id="prebaraj">
- <p>
- Датум од:
- <input type="text" id="kalendarche1">
- </p>
- <p>
- Датум до:
- <input type="text" id="kalendarche2">
- </p>
- <button id="create-flight">Резервирај лет</button>
- <div id="letovi-contain" class="ui-widget">
- <h1>Летови:</h1>
- <table id="letovi" class="ui-widget ui-widget-content">
- <thead>
- <tr class="ui-widget-header ">
- <th>Шифра</th>
- <th>Авиопревозник</th>
- <th>До</th>
- <th>Класа</th>
- <th>Датум од</th>
- <th>Датум до</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>12331</td>
- <td>Wizz Air</td>
- <td>London</td>
- <td>Бизнис</td>
- <td>11/11/2015</td>
- <td>11/23/2015</td>
- </tr>
- </tbody>
- </table>
- </div>
- </body>
- </html>
Add Comment
Please, Sign In to add comment
