6

フォームを作成するコードを制御できないため、jquery を介してレンダリングされた後にフォームを変更しています。

いずれにしても、フォームの一部であるログイン ボタンの横にボタンを追加しています。これを行うために、次の jquery を使用しています。

$('.mynewbutton').hide();
$(".submit").addClass("buttonalign");
$('<div class="shared">').insertBefore($('.submit'));
$('.submit').after($('<div class="circle circlealign">i</div>'));

追加する新しいボタンは、実際には css を使用して描いた円です。これは正常に機能します。新しいボタンはログインに合わせて配置されます。CSSは次のとおりです。

.shared {
    position: absolute;
    width: 200px;
}

.buttonalign {
    position: absolute;
    top:340px;
}

.circlealign {
    position: absolute;
    top:340px;
}

解決しなければならない問題は、ログイン フォームがエラー メッセージを返し、フォームの上部にエラーが表示され、すべてが押し下げられることです。そのため、ログイン ボタンと新しいボタンは、位置が固定されているため、フォーム上の他の要素を覆ってしまいます。

固定数値をパーセンテージに変更し、em を次のように変更しました。

.shared {
    position: absolute;
    width: 100%;
}

.buttonalign {
    position: absolute;
    top:40em;
}

.circlealign {
    position: absolute;
    top:40em;
}

しかし、これにより新しいボタンの位置が変更され、ログイン ボタンと整列しなくなりました。ページのかなり下にあります。
正しい方向に私を向けることができますか？

ありがとう。

編集1

レンダリングされた HTML は次のとおりです。もちろん、jquery はここには表示されません。これは面倒です。しかし、最初のフォームがどのように見えるかを見ることができます

<H1>Login</H1><DL>
<P class="err">Logon Failed</P>
<form action="/cgi-bin/logon/logon" method="POST">
<DT>User ID</DT>
<DD>
<input class=" text" type="text"  name="userid">
</DD>
<DT>Password</DT>
<DD>
<input class=" password" type="password"  name="password" >
</DD>
<DT></DT><DD><input class="submit" type="submit" name="submit" value="Logon">
</DD>
</FORM></DL>
4

2 に答える 2

0

絶対配置を使用している理由がまったく理解できないので、何らかの理由でそれが必要な場合は、ご容赦ください。私の解決策は、既存のボタンを div でラップし、カスタム ボタンをそのコンテナに追加することです。次に、そのコンテナー内に要素を配置すると、エラー メッセージが戻ってきたときに他のすべての要素と共に押し下げられます。

HTML:

<H1>Login</H1>
<DL>
<P class="err">Logon Failed</P>
<form action="/cgi-bin/logon/logon" method="POST">
<DT>User ID</DT>
<DD>
    <input class=" text" type="text"  name="userid"/>
</DD>
<DT>Password</DT>
<DD>
    <input class=" password" type="password"  name="password" />
</DD>
    <DT></DT>
    <DD><input class="submit" type="submit" name="submit" value="Logon"/>
</DD>
</form></DL>

CSS:

#actionButtons > * {
    float: left;
    margin-right: 2px;
}

#actionButtons:after {
    content: "";
    clear: both;
    display: block;
}

jQuery (DOM 対応関数にラップ):

$(function(){
    $('.submit').wrap('<div id="actionButtons"/>');
    $('#actionButtons').append($('<div class="circle circlealign">i</div>'));
});

更新- サークル CSS:

.circle {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: #d1d1c9;
    box-shadow: 1px 1px 2px #000;
    opacity: 0.95;

    font: italic bold 2em/1em "Times New Roman";
    text-align: center;
    color: #000;
    text-shadow: 0 1px 0 #666;
    text-decoration: none;
}

ここにデモがあります: http://jsfiddle.net/ebTS2/1/

于 2013-06-07T15:41:10.730 に答える
0

エラーが DIV タグ内で返された場合、jQueryUI のdialog()メソッドを使用してエラー メッセージを表示し、div を非表示にできますか?

    $( "#myError" ).dialog({
        autoOpen: true,
        height: 300,
        width: 350,
        modal: true,
                close: function() {
                    $('#ErrorDIV').hide();
                }
        });
于 2013-06-07T15:35:06.370 に答える