以下是生成名为Apply Leave和Leave Detail的两个折叠框的完整PHP代码。请注意，该代码使用了Bootstrap框架和jQuery库。
```php
<!DOCTYPE html>
<html>
<head>
<title>Apply Leave</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#leave-type").
change(function(){
if($(this).val() == "Annual Leave" || $(this).val() == "No Pay Leave" || $(this).val() == "Compensation Leave"){
$("#leave-start, #leave-end").prop("required", true).show();
} else {
$("#leave-start, #leave-end").prop("required", false).hide();
}
});
$("#leave-start, #leave-end").
change(function(){
var start = new Date($("#leave-start").val());
var end = new Date($("#leave-end").val());
var days = Math.round((end - start) / (1000 * 60 * 60 * 24)) + 1;
$("#leave-days").val(days);
});
$(
window).resize(function(){
if($(
window).width() < 768){
$(".panel-heading").removeClass("text-center").addClass("text-left");
$(".panel-body").removeClass("text-center").addClass("text-left");
$(".panel-body table").removeClass("table-responsive");
} else {
$(".panel-heading").removeClass("text-left").addClass("text-center");
$(".panel-body").removeClass("text-left").addClass("text-center");
$(".panel-body table").addClass("table-responsive");
}
}).trigger("resize");
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading text-center">
Apply Leave
</div>
<div class="panel-body text-center">
<form
method="post">
<div class="form-group">
<label for="leave-type">Leave Type:</label>
<select class="form-control" id="leave-type" name="leave-type" required>
<option value="">Select Leave Type</option>
<option value="Annual Leave">Annual Leave</option>
<option value="No Pay Leave">No Pay Leave</option>
<option value="Compensation Leave">Compensation Leave</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label for="leave-start">Leave Start:</label>
<
input type="date" class="form-control" id="leave-start" name="leave-start" required>
</div>
<div class="form-group">
<label for="leave-end">Leave End:</label>
<
input type="date" class="form-control" id="leave-end" name="leave-end" required>
</div>
<div class="form-group">
<label for="leave-days">Leave Days:</label>
<
input type="number" class="form-control" id="leave-days" name="leave-days" readonly>
</div>
<button type="submit" class="btn btn-primary">Apply</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading text-center">
Leave Detail
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-responsive">
<thead>
<tr>
<th>Date</th>
<th>Leave Type</th>
<th>Leave Days</th>
</tr>
</thead>
<tbody>
<tr>
<td>2021-01-01</td>
<td>Annual Leave</td>
<td>1</td>
</tr>
<tr>
<td>2021-02-15</td>
<td>No Pay Leave</td>
<td>3</td>
</tr>
<tr>
<td>2021-05-01</td>
<td>Compensation Leave</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
扫一扫
1283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
