0

ページにDIVを動的に挿入しています。ここでは、簡単な例を示します。

http://jsfiddle.net/GEgEc/4/

HTML：

<div class="left-column">
    <p>
        <label>Company Name:</label>
        <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_CompanyNameTextBox" />

    </p>
    <p>
        <label>Phone:</label>
        <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_PhoneNumberTextBox" __id="105" />         
    </p>
</div>
<div class="right-column">
    <p>
        <label __id="109">Contact Name:</label>
        <input  type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_ContactNameTextBox" __id="110" /> 
    </p>
    <p>
        <label>Email:</label>
        <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_EmailTextBox"  />     </p>
</div>
<div style="clear:both;">
    <input type="submit" value="Submit Request" id="myButton" />
</div>

CSS：

.inputError {
    border: 1px solid #006;
    background: pink;
}
.divError {
    border: 1px solid black;
    background: red;

}
label {
    float:left;
    width:120px;
    text-align:right;
    margin-right:5px;
}
input[type="text"] {
    width: 150px;
}
.left-column, .right-column {
    float:left;
    position: relative;
}
.left-column p, .right-column p {
    padding-bottom: 10px;
}
.left-column {
    margin-right:5px;
}

JS：

$(document).ready(function() {

    $("#myButton").on("click", DoTrick);
});

function DoTrick()
{
    var $input = $("#BodyContentPlaceholder_LeftColumnContentPlaceHolder_CompanyNameTextBox");

    var $div = $("<div/>")
        .attr("id", "GGG")
        .addClass("divError")
        .text("This field has error");

    $div.insertAfter($input);

}

しかし、理想的には、入力要素がわかっているときはいつでも、その右上に表示されるDIVを追加したい場合は、一般的に機能するようにします。これは、「フロート」する必要がある検証メッセージです。

今、DIVを追加すると、レイアウトが壊れて、必要な場所に移動しません。

4

4 に答える 4

0

要素をピクセル単位で配置するだけです。私はそれがそのようなものであるべきだと思います：

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
于 2013-03-25T00:23:46.697 に答える
0

your.divErrorは、<div>であり、display：block属性があるため、新しい行に配置されます。

代わりに作成した場合は<span>、入力要素とインラインになります（またはCSSクラスを変更します）

于 2013-03-25T00:25:19.427 に答える
0

私があなたを正しく理解したかどうかはわかりませんが、あなたはこのようなものを探していますか？http://jsfiddle.net/5ZM25/1/

「入力ボックスの右上隅」にinsertAfter変更して、必要な場所に配置することができます。insertBefore

于 2013-03-25T00:28:45.597 に答える
0

これは、位置：絶対の場合です。

http://jsfiddle.net/HNQMm/3/を参照してください

フィールドをラップするクラスを追加し（私は.relativeを使用しました）、それを'position：relative'に設定します。

エラーボックスは次のようになります。

.divError {
border: 1px solid black;
background: red;
position: absolute;
top: 0;
left: 50px;

}

.divErrorの上部と左側の値は、外側の相対divを基準にしているため、必要な場所に正確に設定できます。

于 2013-03-25T00:29:05.043 に答える