生成名为Apply Leave和Leave Detail的两个折叠框，要求Apply Leave折叠框内包含一个名为Apply Leave的下拉菜单框，下拉菜单包含Annual Leave，No Pay Leave，Compensation Leave三项子菜单。要求监听该子菜单change事件，在点击子菜单时，显示名为Leave Start和Leave End日期选择框，并且设置为必选项。并且根据选择的日期自动生成Leave Days。Leave Detail折叠框内用表格的形式显示详细信息。两个折叠框可以根据页面大小自动变为横排或者竖排。生成完整PHP代码

时间: 2024-02-05 07:11:13 浏览: 118

JS中使用apply、bind实现为函数或者类传入动态个数的参数

在JavaScript中，函数是一等公民，意味着函数可以作为变量存储、作为参数传递给其他函数、作为其他函数的返回值，以及可以拥有属性和方法。然而，当使用`new`操作符来创建一个类的实例时，我们需要按照构造函数定义的方式传入参数。如果参数是由其他函数动态计算得来的，或者在运行时数量不确定，那么就产生了如何动态传递参数给函数或构造函数的问题。ES5和ES6提供了解决这一问题的不同方法，主要涉及`apply`和`bind`方法。在ES5中，`apply`和`call`方法允许我们指定函数执行时`this`的值，并且可以传递参数列表。区别在于`apply`接受一个参数数组，而`call`则接受一系列参数列表。例如，如果我们有一个不确定数量参数的函数`foo`，我们可以先构造一个参数数组，然后通过`apply`方法调用它： ```javascript function foo(...args) { console.log(args); // 输出参数数组 } var params = [1, 2, 3]; foo.apply(null, params); // 第一个参数为null表示不修改this指向，params为参数列表 ``` `bind`方法与`apply`和`call`类似，也可以指定`this`的值和参数，但它不会立即执行函数，而是返回一个新的函数，这个新函数已经绑定了指定的`this`和参数，可以稍后再被调用。这个特性对于需要预先传递参数的场景非常有用。 ```javascript function bar(a, b, c) { // ...函数体 } var boundBar = bar.bind(null, 1, 2, 3); // 预先绑定参数1, 2, 3 var obj = new boundBar(); // 创建新对象时，不需要再手动传递参数 ``` 在ES6中，引入了Rest参数(`...args`)和Spread语法(`...args`)的概念，这让我们在函数定义和调用中，都能够非常灵活地处理不定数量的参数。Rest参数允许我们将多个参数收集到一个数组中，而Spread语法则允许我们展开一个数组的元素作为多个参数使用。因此，在ES6中，动态传递参数变得更加简单。 ```javascript function baz(...args) { console.log(args); // 所有传入的参数都会被收集到args数组中 } baz(1, 2, 3, 4); // 输出 [1, 2, 3, 4] ``` 如果需要在ES5中动态创建对象时传入动态数量的参数，我们可以先用`apply`将参数应用到构造函数上，或者利用`bind`预先绑定参数，然后再用`new`关键字来创建实例。例如，我们有一个`Foo`类，需要传入动态数量的参数来创建实例： ```javascript function Foo(a, b, c) { this.a = a; this.b = b; this.c = c; } var params = [1, 2, 3]; var FooWithArgs = Foo.bind(null, ...params); // 使用ES6的Spread语法绑定参数 var instance = new FooWithArgs(); // 等同于 new Foo(1, 2, 3); ``` 在上述示例中，尽管是在ES5的环境中，通过结合`apply`、`bind`以及ES6的Spread语法，我们可以解决在构造函数中动态传参的问题。 `apply`、`call`和`bind`是JavaScript中非常强大的方法，它们提供了一种方式，可以灵活地控制函数执行的上下文(`this`)和参数。虽然ES6中引入了更多语法糖来简化这类问题，但掌握ES5中的用法同样重要，因为这有助于我们更好地理解JavaScript的基本原理和向后兼容代码。

以下是生成名为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> ```

阅读全文

相关推荐

pandas使用apply多列生成一列数据的实例

PHP页面的Apply Leave下拉菜单包含Annual Leave，No Pay Leave，Compensation Leave三项子菜单。要求监听该子菜单，并在点击子菜单时，查询数据库并在原网页内用表格输出查询的内容。生成PHP完整代码

leave_apply.rar_java 请假_sql选课系统_学生请假系统_请假

自定义下拉选择框_winform_下拉选择框_

Bootstrap导航条可点击和鼠标悬停显示下拉菜单

apply和call方法定义及apply和call方法的区别

利用xml和xsl自动生成菜单

apply和plyr1

SQL Server CROSS APPLY和OUTER APPLY的应用详解

Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码

一个利用xml和xsl解释生成无限级的树形菜单的源程序

apply book

$sql = " SELECT * FROM leave_apply INNER JOIN event WHERE leave_apply.employee_id = event.employee_id ";含义

【java毕业设计】应急救援物资管理系统源码（springboot+vue+mysql+说明文档）.zip

基于java的音乐网站答辩PPT.pptx

基于Flexsim的公路交通仿真系统.zip

weixin073智慧旅游平台开发微信小程序+ssm后端毕业源码案例设计.zip

最新推荐

SQL Server CROSS APPLY和OUTER APPLY的应用详解

详谈pandas中agg函数和apply函数的区别

浅谈Scala的Class、Object和Apply()方法

一列保存多个ID(将多个用逗号隔开的ID转换成用逗号隔开的名称)

【java毕业设计】应急救援物资管理系统源码（springboot+vue+mysql+说明文档）.zip

Android圆角进度条控件的设计与应用

管理建模和仿真的文件

【R语言lattice包实战】：从案例到技巧，图形制作不再难

输入正整数n.打出长度为n的菱形

mui框架实现带侧边栏的响应式布局