jQuery 验证引擎中的箭头答案

【问题标题】：Arrow in jQuery validation enginejQuery 验证引擎中的箭头
【发布时间】：2012-11-13 16:51:02
【问题描述】：

在提示位置bottomRight 和bottomLeft 的JQuery 验证引擎中，箭头指向顶部，反之亦然。对于 centerRight Position，我想将箭头指向左侧，对于 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

【问题讨论】：

标签： jquery html css css-shapes jquery-validation-engine

【解决方案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>

【讨论】：