HTML-Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS--> <link rel="stylesheet" href="http://localhost/YAP/public/css/bootstrap/bootstrap.min.css" /> <link rel="stylesheet" href="http://localhost/YAP/public/css/datatables/dataTables.bootstrap.css" /> <link rel="stylesheet" type="text/css" href="http://localhost/YAP/public/css/main.css"> <link rel="shortcut icon" type="image/x-icon" href="http://localhost/YAP/public/images/favicon16.ico"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries--> <!--if lt IE 9 script(src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js') script(src='https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js') --> </head> <body class="sidebar-mini fixed"> <div class="wrapper"> <!-- Navbar--> <header class="main-header hidden-print"><a class="logo" href="index.html"><img src="http://localhost/YAP/public/images/logo.png" style='max-width: 100%;height: auto'></a> <nav class="navbar navbar-static-top"> <!-- Sidebar toggle button--><a class="sidebar-toggle" href="#" data-toggle="offcanvas"></a> <!-- Navbar Right Menu--> <div class="navbar-custom-menu"> <ul class="top-nav"> <!--Notification Menu--> <li class="dropdown notification-menu"><a class="dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell-o fa-lg"></i></a> <ul class="dropdown-menu"> <li class="not-head">You have 4 new notifications.</li> <li><a class="media" href="javascript:;"><span class="media-left media-icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-primary"></i><i class="fa fa-envelope fa-stack-1x fa-inverse"></i></span></span> <div class="media-body"><span class="block">Lisa sent you a mail</span><span class="text-muted block">2min ago</span></div></a></li> <li><a class="media" href="javascript:;"><span class="media-left media-icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-danger"></i><i class="fa fa-hdd-o fa-stack-1x fa-inverse"></i></span></span> <div class="media-body"><span class="block">Server Not Working</span><span class="text-muted block">2min ago</span></div></a></li> <li><a class="media" href="javascript:;"><span class="media-left media-icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-success"></i><i class="fa fa-money fa-stack-1x fa-inverse"></i></span></span> <div class="media-body"><span class="block">Transaction xyz complete</span><span class="text-muted block">2min ago</span></div></a></li> <li class="not-footer"><a href="#">See all notifications.</a></li> </ul> </li> <!-- User Menu--> <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user fa-lg"></i></a> <ul class="dropdown-menu settings-menu"> <li><a href="page-user.html"><i class="fa fa-cog fa-lg"></i> Settings</a></li> <li><a href="page-user.html"><i class="fa fa-user fa-lg"></i> Profile</a></li> <li><a href="http://localhost/YAP/public/logout"><i class="fa fa-sign-out fa-lg"></i>Logout</a></li> </ul> </li> </ul> </div> </nav> </header> <!-- Side-Nav--> <aside class="main-sidebar hidden-print"> <section class="sidebar"> <div class="user-panel"> <div class="pull-left image"> <img class="img-circle" src="http://localhost/YAP/public/images/user.png" alt="User Image"> </div> <div class="pull-left info"> <p>Holger Kramer</p> <p class="designation">Super Administrator</p> </div> </div> <ul class="sidebar-menu"><li><a href="http://localhost/backend"><i class="fa fa-dashboard fa-fw"></i><span>Dashboard</span></a></li><li><a href="#"><i class="fa fa-cog fa-fw"></i><span>Configuration</span><i class="fa fa-angle-right"></i></a><ul class="treeview-menu"><li><a href="http://localhost/YAP/public/backend/config/server"><i class="fa fa-envelope-o fa-fw"></i>Server</a></li></ul></li><li><a href="#"><i class="fa fa-cog fa-fw"></i><span>Language</span><i class="fa fa-angle-right"></i></a><ul class="treeview-menu"><li><a href="http://localhost/YAP/public/backend/language/add"><i class="fa fa-circle-o"></i>add Language</a></li><li><a href="http://localhost/YAP/public/backend/languages"><i class="fa fa-circle-o"></i>Show Languages</a></li></ul></li></ul> </section> </aside> <div class="content-wrapper"> <div class="page-title"> <div> <h1><i class="fa fa-dashboard"></i> Languages</h1> <p></p> </div> <div> <ul class="breadcrumb"> <li><i class="fa fa-home fa-lg"></i></li> <li><a href="http://localhost/YAP/public/backend">Dashboard</a></li> </ul> </div> </div> <div id="list"> <table class="table-hover" style="width: 100%" id="languagelist"> <thead> <tr> <th>ID</th> <th>Name</th> <th>ISO:</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>English</td> <td>en</td> <td><a href="#" class="btn btn-success" role="button">Edit</a> <a href="#" class="btn btn-danger" role="button">Delete</a></td> </tr> <tr> <td>2</td> <td>deutsch</td> <td>de</td> <td><a href="#" class="btn btn-success" role="button">Edit</a> <a href="#" class="btn btn-danger" role="button">Delete</a></td> </tr> </tbody> </table> </div> <div id="mask"> <form method="POST" action="http://localhost/YAP/public/backend/languages" accept-charset="UTF-8" role="form" class="form-horizontal"><input name="_token" type="hidden" value="5Vc6eGkugxKm3t0dJJXwGIWJgVd41b9Tci8xQS0S"> <h4>Email</h4> <div class="form-group " id="number"><label for="number" class="control-label col-sm-2 col-md-3">Name:</label><div class="col-sm-10 col-md-9"><input placeholder="The country name" class="form-control" name="number" type="text" value=""></div></div> <div class="form-group " id="iso639"><label for="iso639" class="control-label col-sm-2 col-md-3">ISO639:</label><div class="col-sm-10 col-md-9"><input placeholder="iso639 code" class="form-control" name="iso639" type="text" value=""></div></div> <div class="form-group " id="iso3166"><label for="iso3166" class="control-label col-sm-2 col-md-3">ISO3166:</label><div class="col-sm-10 col-md-9"><input placeholder="iso3166 code" class="form-control" name="iso3166" type="text" value=""></div></div> <div class="form-group"><div class="col-sm-offset-2 col-md-offset-3 col-sm-10 col-md-9"><div class="checkbox"><label ><input name="deleted" type="checkbox" value="1">Deleted</label></div></div></div> <div class="form-group"><div class="col-sm-offset-2 col-md-offset-3 col-sm-10 col-md-9"><div class="checkbox"><label ><input name="published" type="checkbox" value="1">Published</label></div></div></div> <div class="form-group " id="ordering"><label for="ordering" class="control-label col-sm-2 col-md-3">yap.language_field_ordering</label><div class="col-sm-10 col-md-9"><input placeholder="order number for the selector" class="form-control" name="ordering" type="number" value=""></div></div> <div class="form-group"><div class="col-sm-offset-2 col-md-offset-3 col-sm-10 col-md-9"><div class="checkbox"><label ><input name="published" type="checkbox" value="1">Default</label></div></div></div> <div class="form-group " id="flag"><label for="flag" class="control-label col-sm-2 col-md-3">Flag:</label><div class="col-sm-10 col-md-9"><input class="form-control filestyle" data-buttonBefore="true" name="flag" type="file"></div></div> <div class="form-group " id="short_date"><label for="short_date" class="control-label col-sm-2 col-md-3">Short Date:</label><div class="col-sm-10 col-md-9"><input placeholder="short date format for display" class="form-control" name="short_date" type="text" value=""></div></div> <div class="form-group " id="short_date"><label for="short_date" class="control-label col-sm-2 col-md-3">Long Date:</label><div class="col-sm-10 col-md-9"><input placeholder="long date format for display" class="form-control" name="short_date" type="text" value="" id="short_date"></div></div> <button type = "button" class = "btn btn-primary">yap.add</button> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </form> </div> </div> </div> <!-- Javascripts--> <script src="http://localhost/YAP/public/js/jquery/jquery-2.1.4.min.js"></script> <script src="http://localhost/YAP/public/js/essential-plugins.js"></script> <script src="http://localhost/YAP/public/js/bootstrap/bootstrap.min.js"></script> <script src="http://localhost/YAP/public/js/plugins/pace.min.js"></script> <script src="http://localhost/YAP/public/js/main.js"></script> <script type="text/javascript" src="http://localhost/YAP/public/js/plugins/chart.js"></script> <script type="text/javascript" src="http://localhost/YAP/public/js/plugins/jquery.vmap.min.js"></script> <script type="text/javascript" src="http://localhost/YAP/public/js/plugins/jquery.vmap.world.js"></script> <script type="text/javascript" src="http://localhost/YAP/public/js/plugins/jquery.vmap.sampledata.js"></script> <script type="text/javascript" src="http://localhost/YAP/public/js/datatables/jquery.dataTables.js"></script> <script type="text/javascript" src="http://localhost/YAP/public/js/datatables/dataTables.bootstrap.js"></script> <script type="text/javascript"> $(document).ready(function(){ var table = $("#languagelist").DataTable({ "pageLength": 25, /* Disable initial sort */ "aaSorting": [], "language": { "emptyTable": "No data available in table", "info": "Showing _START_ to _END_ of _TOTAL_ entries", "infoEmpty": "Showing 0 to 0 of 0 entries", "infoFiltered": "(filtered from _MAX_ total entries)", "infoPostFix": "", "thousands": ",", "lengthMenu": "_MENU_ records per page", "loadingRecords": "Loading...", "processing": "Processing...", "search": "Search: ", "zeroRecords": "No matching records found", "paginate": { "first": "First", "last": "Last", "next": "Next", "previous": "Previous" }, "aria": { "sortAscending": ": activate to sort column ascending", "sortDescending": ": activate to sort column descending" } }, "columnDefs": [ { "targets": 0, "width": "25px", "className": "dt-right", }, { "targets": 1, "width": "65%", "className": "dt-left", }, { "targets": 2, "width": "10%", "className": "dt-right", }, /* { "targets": 4, "width": "10%", "className": "dt-center", }, { "targets": 5, "width": "10%", "className": "dt-center", }, { "targets": 6, "width": "10%", "className": "dt-center", }, */ { "targets": 3, "orderable": false, "width": "25%" }, ], }); //alert('Höhe' + $('#mask').height() ); $('#mask').hide(); }); $( "td" ).click(function() { $('#mask').show(); }); </script> </body> </html>