在jQuery验证引擎中,promptPositions bottomRight和bottomLeft箭头指向顶部,反之亦然。对于centerRight位置我想将箭头指向左侧,而对于centerLeft,我想将箭头指向右侧。
我参与其中。但是,找不到更好的解决方案。
arrow.addClass("formErrorArrowBottom").html('<div class="line5"><!-- --></div>\n\
<div class="line6"><!-- --></div>\n\
<div class="line7"><!-- --></div>\n\
<div class="line8"><!-- --></div>\n\
<div class="line9"><!-- --></div>\n\
<div class="line6"><!-- --></div>\n\
<div class="line7"><!-- --></div>\n\
<div class="line8"><!-- --></div>\n\
<div class="line9"><!-- --></div>\n\
<div class="line10"><!-- --></div>');
我在jquery.ValidateEngine.js中对此进行了编辑。但是徒劳。有人知道正确的格式,左右箭头。
TIA
答案 0 :(得分:1)
我遇到了同样的问题,所以我更新了CSS:
.formError .formErrorArrow .sideline12 {
width: 1px;
height: 15px;
border: none;
float: left;
}
.formError .formErrorArrow .sideline11 {
width: 1px;
height: 13px;
border: none;
float: left;
margin-top: 1px;
}
.formError .formErrorArrow .sideline10 {
width: 1px;
height: 11px;
border: none;
float: left;
margin-top: 2px;
border-top: solid 4px #fff;
border-bottom: solid 4px #fff;
}
.formError .formErrorArrow .sideline9 {
width: 1px;
height: 9px;
border: none;
float: left;
margin-top: 3px;
border-top: solid 4px #fff;
border-bottom: solid 4px #fff;
}
.formError .formErrorArrow .sideline8 {
width: 1px;
height: 7px;
border: none;
float: left;
margin-top: 4px;
border-top: solid 4px #fff;
border-bottom: solid 4px #fff;
}
.formError .formErrorArrow .sideline6 {
width: 1px;
height: 5px;
border: none;
float: left;
margin-top: 5px;
border-top: solid 4px #fff;
border-bottom: solid 4px #fff;
}
.formError .formErrorArrow .sideline6 {
width: 1px;
height: 3px;
border: none;
float: left;
margin-top: 6px;
border-top: solid 4px #fff;
border-bottom: solid 4px #fff;
}
.formError .formErrorArrow .sideline5 {
width: 1px;
height: 1px;
border: none;
float: left;
margin-top: 7px;
border-top: solid 4px #fff;
border-bottom: solid 4px #fff;
}
.formError .formErrorArrow .sideline4 {
width: 1px;
height: 7px;
border: none;
float: left;
margin-top: 8px;
background: #fff;
}
.formError .formErrorArrow .sideline3 {
width: 1px;
height: 5px;
border: none;
float: left;
margin-top: 9px;
background: #fff;
}
.formError .formErrorArrow .sideline2 {
width: 1px;
height: 3px;
border: none;
float: left;
margin-top: 10px;
background: #fff;
}
.formError .formErrorArrow .sideline1 {
width: 1px;
height: 1px;
border: none;
float: left;
margin-top: 11px;
background: #fff;
}
.formError .formErrorArrow .rightSideArrow {
width: 14px;
margin-left: 2px;
margin-bottom: 7px;
z-index: 5;
background-color: transparent;
border-color: transparent;
vertical-align: middle;
}
和JS一起:
case "centerRight":
prompt.find(".formErrorContent").before(arrow);
arrow.addClass("formErrorArrowRight").html('<div class="rightSideArrow"><div class="sideline1"><!-- --></div><div class="sideline2"><!-- --></div><div class="sideline3"><!-- --></div><div class="sideline4"><!-- --></div><div class="sideline5"><!-- --></div><div class="sideline6"><!-- --></div><div class="sideline7"><!-- --></div><div class="sideline8"><!-- --></div><div class="sideline9"><!-- --></div><div class="sideline10"><!-- --></div><div class="sideline11"><!-- --></div><div class="sideline12"><!-- --></div></div>');
break;
和HTML:
<script>
jQuery(document).ready(function(){
jQuery("#formID").validationEngine({ promptPosition: "centerRight" });
});
</script>