In a typical form activity design, the next course of action is often determined using one of the form fields. We can see such example on the screenshot below.在典型的表单活动设计中，下一步的行为往往是使用表单域中的一个字段来确定的。我们可以在下面的截图中看到这样的例子。
Figure 1: Approval Form Generated Using 图1：使用生成流程 - 审批流程
With the use of some client side scripting, we can change the way decision is being made from a select box into individual buttons as shown in the screenshot below.
Figure 2: Decision Making Buttons
This design may be better tailored to certain user base who have used systems with similar design before.
In order to implement this design, we will need to first obtain the "name" of the select box. Please see the screenshot below.
Figure 3: Identifying Element Name
通过使用一些客户端脚本，我们可以改变从选择框到单个按钮的决策方式，如下面的截图所示。
图2：决策按钮
这个设计可能更适合于以前使用过类似设计的系统的某些用户群。
为了实现这个设计，我们需要首先获取选择框的“名称”。请看下面的截图。
图3：识别元素名称
创建一个 自定义HTML到你想要的形式，并粘贴在下面的代码。将第2行更改为选择框的名称。Create a 自定义HTML into your intended form, and paste in the code below. Change line 2 with the name of your select box.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript">
var selectBoxName = "approval_request_approval_action_status";
$(function(){
$(FormUtil.getField(selectBoxName)).parent().hide();
$(FormUtil.getField(selectBoxName)).children().each(function(){
if($(this).attr("value") != ""){
var cssClass = $(".form-button:last").attr("class");
var button = "<div type=\"button\" class=\"form-cell\"><button class=\"" + cssClass + "\" onclick=\"completeWithVariable($(this));return false;\" value=\"" + $(this).attr("value") + "\">" + $(this).attr("value") + "</button></div>";
$(".form-button:last").after(button);
}
});
});
function completeWithVariable(obj){
$(FormUtil.getField(selectBoxName)).val($(obj).val());
$("#assignmentComplete").trigger("click");
}
</script>
<style type="text/css">
input#assignmentComplete{
display: none;
}
</style> |