-1
Problem: wenn die Aufgabe "zu tun" durch Drücken der Eingabetaste in Safari hinzugefügt wird, wird die Registerkarte "Woche" dupliziert. Und jede Aufgabe hinzugefügt.Aufgabe hinzufügen funktioniert inkorrekt
Ich weiß nicht, wo es schief geht
Wer kann mir helfen?
Die HTML
<!DOCTYPE html>
<html>
<head>
<title>planIt</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="https://use.fontawesome.com/e886da0b59.js"></script>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- jquery custom -->
<script type="text/javascript" src="js/script.js"></script>
<!-- jquery mobile -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- jquery ui -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- touch -->
<script src="js/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div data-role="page" id="pagedag">
<div id="header" data-role="header" style="overflow:hidden;">
<div class="logo"></div>
<a href="#overlayPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow"><i class="fa fa-bars" aria-hidden="true"></i></a>
</div><!-- /header -->
<div data-role="panel" id="overlayPanel" data-display="overlay">
<div class="logo"></div>
<p>Dag</p>
<p>Week</p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left"></a>
</div>
<div data-role="tabs" id="tabs">
<div data-role="navbar" class="custom-navbar">
<ul>
<li><a href="#dag" class="ui-btn-active" data-ajax="false">dag</a></li>
<li><a href="#week" data-ajax="false">week</a></li>
</ul>
</div>
<!--- dag --->
<div id="dag" class="ui-body-d ui-content">
<h1>Tijdlijn...</h1>
<div data-role="collapsible">
<h4>To Do</h4>
<p>Hoi</p>
<form name="toDoList">
<input type="text" name="ListItem"/>
</form>
<button id="button" class="ui-btn">Add</button>
</div>
<div data-role="collapsible">
<h4>Progress</h4>
<p>Hoi2</p>
<div id="progress">
<ol id="sortableProgress"></ol>
</div>
</div>
<div data-role="collapsible">
<h4>Done</h4>
<p>Hoi3</p>
<div id="done">
<ol id="sortableDone"></ol>
</div>
</div>
</div>
<!--- einde dag --->
<!--- week --->
<div id="week" class="ui-body-d ui-content">
<h1>Tijdlijn...</h1>
<div data-role="collapsible">
<h4>To do</h4>
<p>Hoi</p>
<form name="toDoList">
<input type="text" name="ListItem"/>
</form>
<button id="button" class="ui-btn">Add</button>
</div>
<div data-role="collapsible">
<h4>Progress</h4>
<p>Hoi2</p>
<div id="progress">
<ol id="sortableProgress"></ol>
</div>
</div>
<div data-role="collapsible">
<h4>Done</h4>
<p>Hoi3</p>
<div id="done">
<ol id="sortableDone"></ol>
</div>
</div>
</div>
<!--- einde week --->
</div>
<div id="header" data-role="header" style="overflow:hidden;">
<p>© planIT</p>
</div><!-- /footer -->
</div>
</body>
</html>
Die CSS
header, section {
display: block;
color: #fff;
}
body{
margin: 0px;
padding: 0px;
background: #1abc9c;
font-family: 'Lato',sans-serif;
}
h1{
color: #000;
text-align: center;
margin-top: 20px;
}
.logo{
content: url(assets/planit.png);
height: 80px;
width: auto;
margin: auto;
padding: 8px;
}
/* header */
#header {
background-color: #fff;
}
/* button dag/week */
.custom-navbar ul li a {
background: #eee; /* Old browsers */
background: -moz-linear-gradient(#eee, #eee) !important; /* FF3.6+ */
background: -webkit-linear-gradient(#eee, #eee) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#eee, #eee) !important; /* Opera 11.10+ */
background: -ms-linear-gradient(#eee, #eee) !important; /* IE10+ */
border: none;
letter-spacing: 1px;
font-weight: normal;
}
.custom-navbar ul li a.ui-btn-active {
background: #57cb98; /* Old browsers */
background: -moz-linear-gradient(#57cb98, #57cb98) !important; /* FF3.6+ */
background: -webkit-linear-gradient(#57cb98, #57cb98) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#57cb98, #57cb98) !important; /* Opera 11.10+ */
background: -ms-linear-gradient(#57cb98, #57cb98) !important; /* IE10+ */
border: none;
letter-spacing: 1px;
font-weight: normal;
}
/* collapse */
.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
border-right-width: 1px;
border-left-width: 1px;
background-color: #57cb98;
color: #fff;
letter-spacing: 1px;
font-weight: normal;
}
.ui-collapsible-inset .ui-collapsible-heading .ui-btn:hover {
border-right-width: 1px;
border-left-width: 1px;
background-color: #38b77f;
color: #fff;
letter-spacing: 1px;
font-weight: normal;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400);
body {
font: normal normal 13px/16px "Open Sans", sans-serif;
background: #ccc;
}
.container{
padding: 20px;
width: 300px;
margin: 0 auto;
margin-top: 40px;
background: white;
border-radius: 5px;}
form {
display: inline-block;
}
input{
padding: 4px 15px 4px 5px;
}
#button{
display: inline-block;
background-color:#fc999b;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
padding: 5px 15px;
}
#button:hover{
cursor: pointer;
opacity: .8;}
ol {padding-left: 20px;}
ol li {padding: 5px;color:#000;}
ol li:nth-child(even){background: #dfdfdf;}
.strike{text-decoration: line-through;}
li:hover{
cursor: pointer;
}
jQuery
$(document).ready(
function(){
$('#button').click(
function(){
var toAdd = $('input[name=ListItem]').val();
$('#sortableProgress').append('<li>' + toAdd + '</li>');
});
$("input[name=ListItem]").keyup(function(event){
if(event.keyCode == 13){
$("#button").click();
}
});
$(document).on('dblclick','li', function(){
$(this).toggleClass('strike').fadeOut('slow');
});
$('input').focus(function() {
$(this).val('');
});
$('#sortableProgress').sortable();
}
);
$ ('input [name = ListItem]') sollte $ ("input [name = 'ListItem']") sein – Bindrid
sollten Sie Ihren Return-Taste fangen mit dem Keydown – Bindrid